chore(version): Update package versions [skip ci]

chore(version): version.json [skip ci]
feat(toolbar): new Toolbar to enable reactive state synchronization (#3983 )
2024-03-27 20:12:57 +00:00 · 2024-03-27 20:12:47 +00:00 · 2024-03-27 16:01:32 -04:00 · 2024-03-25 15:44:13 +00:00 · 2024-03-25 15:44:04 +00:00 · 2024-03-25 11:33:24 -04:00
218 changed files with 8496 additions and 6810 deletions
@@ -13,7 +13,7 @@ version: 2.1
 ##
 orbs:
  codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.2.1
+  cypress: cypress-io/cypress@3.3.1

 executors:
  cypress-custom:
@@ -1,22 +0,0 @@
---
-name: Codespell
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-permissions:
-  contents: read
-
-jobs:
-  codespell:
-    name: Check for spelling errors
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Codespell
-        uses: codespell-project/actions-codespell@v2
@@ -3,6 +3,91 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+
+### Features
+
+* **worklist:** new investigational use text ([#3999](https://github.com/OHIF/Viewers/issues/3999)) ([45b68e8](https://github.com/OHIF/Viewers/commit/45b68e841dcb9e28a2ea991c37ee7ac4a8c5b71e))
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+
+### Bug Fixes
+
+* **SR display:** and the token based navigation ([#3995](https://github.com/OHIF/Viewers/issues/3995)) ([feed230](https://github.com/OHIF/Viewers/commit/feed2304c124dc2facc7a7371ed9851548c223c5))
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+
+### Features
+
+* **delete measurement:** icon for measurement table ([#3775](https://github.com/OHIF/Viewers/issues/3775)) ([f7fe91c](https://github.com/OHIF/Viewers/commit/f7fe91c5f6c4f05f3f3f5f640d3a119bd40a5870))
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+
+### Bug Fixes
+
+* **cli:** mode creation template ([#3876](https://github.com/OHIF/Viewers/issues/3876)) ([#3981](https://github.com/OHIF/Viewers/issues/3981)) ([e485d68](https://github.com/OHIF/Viewers/commit/e485d68fd4619ce7187113cbe59e47f9523dbcc8))
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+
+### Bug Fixes
+
+* **docs:** Minor typos in hpModule.md ([#3962](https://github.com/OHIF/Viewers/issues/3962)) ([4cdfdae](https://github.com/OHIF/Viewers/commit/4cdfdae8149166cf9dc91a55c0d7f2a224e55d8f))
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1 +1 @@
-21e8a2bd0b7cc72f90a31e472d285d761be15d30
+566b25a54425399096864bd263193646556011a5
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/i18n": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/i18n": "3.8.0-beta.64",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+
+### Bug Fixes
+
+* **SR display:** and the token based navigation ([#3995](https://github.com/OHIF/Viewers/issues/3995)) ([feed230](https://github.com/OHIF/Viewers/commit/feed2304c124dc2facc7a7371ed9851548c223c5))
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/i18n": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/i18n": "3.8.0-beta.64",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -46,8 +46,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.63.4",
-    "@cornerstonejs/core": "^1.63.4",
+    "@cornerstonejs/adapters": "^1.66.7",
+    "@cornerstonejs/core": "^1.66.7",
    "@kitware/vtk.js": "29.7.0",
    "react-color": "^2.19.3"
  }
@@ -5,6 +5,7 @@ import { cache, metaData } from '@cornerstonejs/core';
 import {
  segmentation as cornerstoneToolsSegmentation,
  Enums as cornerstoneToolsEnums,
+  utilities,
 } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
 import { classes, DicomMetadataStore } from '@ohif/core';
@@ -18,6 +19,7 @@ import {
  getUpdatedViewportsForSegmentation,
  getTargetViewport,
 } from './utils/hydrationUtils';
+const { segmentation: segmentationUtils } = utilities;

 const { datasetToBlob } = dcmjs.data;

@@ -45,6 +47,7 @@ const commandsModule = ({
    uiDialogService,
    displaySetService,
    viewportGridService,
+    toolGroupService,
  } = (servicesManager as ServicesManager).services;

  const actions = {
@@ -397,6 +400,60 @@ const commandsModule = ({
        console.warn(e);
      }
    },
+    setBrushSize: ({ value, toolNames }) => {
+      const brushSize = Number(value);
+
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        if (toolNames?.length === 0) {
+          segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
+        } else {
+          toolNames?.forEach(toolName => {
+            segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+          });
+        }
+      });
+    },
+    setThresholdRange: ({
+      value,
+      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+    }) => {
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        toolNames?.forEach(toolName => {
+          toolGroup.setToolConfiguration(toolName, {
+            strategySpecificConfiguration: {
+              THRESHOLD: {
+                threshold: value,
+              },
+            },
+          });
+        });
+      });
+    },
+    toggleThresholdRangeAndDynamic() {
+      const toolGroupIds = toolGroupService.getToolGroupIds();
+
+      if (!toolGroupIds) {
+        return;
+      }
+
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        const brushInstances = segmentationUtils.getBrushToolInstances(toolGroup.id);
+
+        brushInstances.forEach(({ configuration }) => {
+          const { activeStrategy, strategySpecificConfiguration } = configuration;
+
+          if (activeStrategy.startsWith('THRESHOLD')) {
+            const thresholdConfig = strategySpecificConfiguration.THRESHOLD;
+
+            if (thresholdConfig) {
+              thresholdConfig.isDynamic = !thresholdConfig.isDynamic;
+            }
+          }
+        });
+      });
+    },
  };

  const definitions = {
@@ -424,11 +481,21 @@ const commandsModule = ({
    downloadRTSS: {
      commandFn: actions.downloadRTSS,
    },
+    setBrushSize: {
+      commandFn: actions.setBrushSize,
+    },
+    setThresholdRange: {
+      commandFn: actions.setThresholdRange,
+    },
+    toggleThresholdRangeAndDynamic: {
+      commandFn: actions.toggleThresholdRangeAndDynamic,
+    },
  };

  return {
    actions,
    definitions,
+    defaultContext: 'SEGMENTATION',
  };
 };

@@ -1,10 +1,16 @@
 import React from 'react';

 import { useAppConfig } from '@state';
+import { Toolbox } from '@ohif/ui';
 import PanelSegmentation from './panels/PanelSegmentation';
-import SegmentationToolbox from './panels/SegmentationToolbox';

-const getPanelModule = ({ commandsManager, servicesManager, extensionManager, configuration }) => {
+const getPanelModule = ({
+  commandsManager,
+  servicesManager,
+  extensionManager,
+  configuration,
+  title,
+}) => {
  const { customizationService } = servicesManager.services;

  const wrappedPanelSegmentation = configuration => {
@@ -26,13 +32,14 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager, co
  };

  const wrappedPanelSegmentationWithTools = configuration => {
-    const [appConfig] = useAppConfig();
    return (
      <>
-        <SegmentationToolbox
+        <Toolbox
          commandsManager={commandsManager}
          servicesManager={servicesManager}
          extensionManager={extensionManager}
+          buttonSectionId="segmentationToolbox"
+          title="Segmentation Tools"
          configuration={{
            ...configuration,
          }}
@@ -0,0 +1,65 @@
+export function getToolbarModule({ commandsManager, servicesManager }) {
+  const { segmentationService, toolGroupService } = servicesManager.services;
+  return [
+    {
+      name: 'evaluate.cornerstone.segmentation',
+      evaluate: ({ viewportId, button, toolNames }) => {
+        // Todo: we need to pass in the button section Id since we are kind of
+        // forcing the button to have black background since initially
+        // it is designed for the toolbox not the toolbar on top
+        // we should then branch the buttonSectionId to have different styles
+        const segmentations = segmentationService.getSegmentations();
+        if (!segmentations?.length) {
+          return {
+            disabled: true,
+            className: '!text-common-bright !bg-black opacity-50',
+          };
+        }
+
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+        if (!toolGroup) {
+          return;
+        }
+
+        const toolName = getToolNameForButton(button);
+
+        if (!toolGroup || !toolGroup.hasTool(toolName)) {
+          return {
+            disabled: true,
+            className: '!text-common-bright ohif-disabled',
+          };
+        }
+
+        const isPrimaryActive = toolNames
+          ? toolNames.includes(toolGroup.getActivePrimaryMouseButtonTool())
+          : toolGroup.getActivePrimaryMouseButtonTool() === toolName;
+
+        return {
+          disabled: false,
+          className: isPrimaryActive
+            ? '!text-black !bg-primary-light hover:bg-primary-light hover-text-black hover:cursor-pointer'
+            : '!text-common-bright !bg-black hover:bg-primary-light hover:cursor-pointer hover:text-black',
+          // Todo: isActive right now is used for nested buttons where the primary
+          // button needs to be fully rounded (vs partial rounded) when active
+          // otherwise it does not have any other use
+          isActive: isPrimaryActive,
+        };
+      },
+    },
+  ];
+}
+
+function getToolNameForButton(button) {
+  const { props } = button;
+
+  const commands = props?.commands || button.commands;
+
+  if (commands && commands.length) {
+    const command = commands[0];
+    const { commandOptions } = command;
+    const { toolName } = commandOptions || { toolName: props?.id ?? button.id };
+    return toolName;
+  }
+  return null;
+}
@@ -5,6 +5,7 @@ import getSopClassHandlerModule from './getSopClassHandlerModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
 import getPanelModule from './getPanelModule';
 import getCommandsModule from './commandsModule';
+import { getToolbarModule } from './getToolbarModule';
 import preRegistration from './init';

 const Component = React.lazy(() => {
@@ -29,7 +30,6 @@ const extension = {
   */
  id,
  preRegistration,
-
  /**
   * PanelModule should provide a list of panels that will be available in OHIF
   * for Modes to consume and render. Each panel is defined by a {name,
@@ -38,8 +38,8 @@ const extension = {
   */
  getPanelModule,
  getCommandsModule,
-
-  getViewportModule({ servicesManager, extensionManager }) {
+  getToolbarModule,
+  getViewportModule({ servicesManager, extensionManager, commandsManager }) {
    const ExtendedOHIFCornerstoneSEGViewport = props => {
      return (
        <OHIFCornerstoneSEGViewport
@@ -1,5 +1,5 @@
 import { addTool, BrushTool } from '@cornerstonejs/tools';

-export default function init({ configuration = {} }): void {
+export default function init({ servicesManager }): void {
  addTool(BrushTool);
 }
@@ -1,425 +0,0 @@
-import React, { useCallback, useEffect, useState, useReducer } from 'react';
-import { AdvancedToolbox, InputDoubleRange, useViewportGrid } from '@ohif/ui';
-import { Types } from '@ohif/extension-cornerstone';
-import { utilities } from '@cornerstonejs/tools';
-
-const { segmentation: segmentationUtils } = utilities;
-
-const TOOL_TYPES = {
-  CIRCULAR_BRUSH: 'CircularBrush',
-  SPHERE_BRUSH: 'SphereBrush',
-  CIRCULAR_ERASER: 'CircularEraser',
-  SPHERE_ERASER: 'SphereEraser',
-  CIRCLE_SHAPE: 'CircleScissor',
-  RECTANGLE_SHAPE: 'RectangleScissor',
-  SPHERE_SHAPE: 'SphereScissor',
-  THRESHOLD_CIRCULAR_BRUSH: 'ThresholdCircularBrush',
-  THRESHOLD_SPHERE_BRUSH: 'ThresholdSphereBrush',
-};
-
-const ACTIONS = {
-  SET_TOOL_CONFIG: 'SET_TOOL_CONFIG',
-  SET_ACTIVE_TOOL: 'SET_ACTIVE_TOOL',
-};
-
-const initialState = {
-  Brush: {
-    brushSize: 15,
-    mode: 'CircularBrush', // Can be 'CircularBrush' or 'SphereBrush'
-  },
-  Eraser: {
-    brushSize: 15,
-    mode: 'CircularEraser', // Can be 'CircularEraser' or 'SphereEraser'
-  },
-  Shapes: {
-    brushSize: 15,
-    mode: 'CircleScissor', // E.g., 'CircleScissor', 'RectangleScissor', or 'SphereScissor'
-  },
-  ThresholdBrush: {
-    brushSize: 15,
-    thresholdRange: null,
-  },
-  activeTool: null,
-};
-
-function toolboxReducer(state, action) {
-  switch (action.type) {
-    case ACTIONS.SET_TOOL_CONFIG:
-      const { tool, config } = action.payload;
-      return {
-        ...state,
-        [tool]: {
-          ...state[tool],
-          ...config,
-        },
-      };
-    case ACTIONS.SET_ACTIVE_TOOL:
-      return { ...state, activeTool: action.payload };
-    default:
-      return state;
-  }
-}
-
-function SegmentationToolbox({ servicesManager, extensionManager }) {
-  const { toolbarService, segmentationService, toolGroupService } =
-    servicesManager.services as Types.CornerstoneServices;
-
-  const [viewportGrid] = useViewportGrid();
-  const { viewports, activeViewportId } = viewportGrid;
-
-  const [toolsEnabled, setToolsEnabled] = useState(false);
-  const [state, dispatch] = useReducer(toolboxReducer, initialState);
-
-  const updateActiveTool = useCallback(() => {
-    if (!viewports?.size || activeViewportId === undefined) {
-      return;
-    }
-    const viewport = viewports.get(activeViewportId);
-
-    if (!viewport) {
-      return;
-    }
-
-    dispatch({
-      type: ACTIONS.SET_ACTIVE_TOOL,
-      payload: toolGroupService.getActiveToolForViewport(viewport.viewportId),
-    });
-  }, [activeViewportId, viewports, toolGroupService, dispatch]);
-
-  const setToolActive = useCallback(
-    toolName => {
-      initializeThresholdValue(toolName);
-
-      toolbarService.recordInteraction({
-        interactionType: 'tool',
-        commands: [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName,
-            },
-          },
-        ],
-      });
-
-      dispatch({ type: ACTIONS.SET_ACTIVE_TOOL, payload: toolName });
-    },
-    [toolbarService, dispatch]
-  );
-
-  /**
-   * sets the tools enabled IF there are segmentations
-   */
-  useEffect(() => {
-    const events = [
-      segmentationService.EVENTS.SEGMENTATION_ADDED,
-      segmentationService.EVENTS.SEGMENTATION_UPDATED,
-      segmentationService.EVENTS.SEGMENTATION_REMOVED,
-    ];
-
-    const unsubscriptions = [];
-
-    events.forEach(event => {
-      const { unsubscribe } = segmentationService.subscribe(event, () => {
-        const segmentations = segmentationService.getSegmentations();
-
-        const activeSegmentation = segmentations?.find(seg => seg.isActive);
-
-        setToolsEnabled(activeSegmentation?.segmentCount > 0);
-      });
-
-      unsubscriptions.push(unsubscribe);
-    });
-
-    updateActiveTool();
-
-    return () => {
-      unsubscriptions.forEach(unsubscribe => unsubscribe());
-    };
-  }, [activeViewportId, viewports, segmentationService, updateActiveTool]);
-
-  /**
-   * Update the active tool when the toolbar state changes
-   */
-  useEffect(() => {
-    const { unsubscribe } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => {
-        updateActiveTool();
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService, updateActiveTool]);
-
-  useEffect(() => {
-    // if the active tool is not a brush tool then do nothing
-    if (!Object.values(TOOL_TYPES).includes(state.activeTool)) {
-      return;
-    }
-
-    // if the tool is Segmentation and it is enabled then do nothing
-    if (toolsEnabled) {
-      return;
-    }
-
-    // if the tool is Segmentation and it is disabled, then switch
-    // back to the window level tool to not confuse the user when no
-    // segmentation is active or when there is no segment in the segmentation
-    setToolActive('WindowLevel');
-  }, [toolsEnabled, state.activeTool, setToolActive]);
-
-  const updateBrushSize = useCallback(
-    (toolName, brushSize) => {
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
-      });
-    },
-    [toolGroupService]
-  );
-
-  function initializeThresholdValue(toolName: any) {
-    if (state.ThresholdBrush.thresholdRange === null) {
-      // set the default threshold range from the tool configuration
-      const toolGroupIds = toolGroupService.getToolGroupIds();
-      const toolGroupId = toolGroupIds[0];
-      const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-      const toolConfig = toolGroup.getToolConfiguration(toolName);
-      const defaultThresholdRange = toolConfig?.strategySpecificConfiguration?.THRESHOLD?.threshold;
-      dispatch({
-        type: ACTIONS.SET_TOOL_CONFIG,
-        payload: {
-          tool: 'ThresholdBrush',
-          config: { thresholdRange: defaultThresholdRange },
-        },
-      });
-    }
-  }
-
-  const onBrushSizeChange = useCallback(
-    (valueAsStringOrNumber, toolCategory) => {
-      const value = Number(valueAsStringOrNumber);
-
-      _getToolNamesFromCategory(toolCategory).forEach(toolName => {
-        updateBrushSize(toolName, value);
-      });
-
-      dispatch({
-        type: ACTIONS.SET_TOOL_CONFIG,
-        payload: {
-          tool: toolCategory,
-          config: { brushSize: value },
-        },
-      });
-    },
-    [toolGroupService, dispatch]
-  );
-
-  const handleRangeChange = useCallback(
-    newRange => {
-      if (
-        newRange[0] === state.ThresholdBrush.thresholdRange?.[0] &&
-        newRange[1] === state.ThresholdBrush.thresholdRange?.[1]
-      ) {
-        return;
-      }
-
-      const toolNames = _getToolNamesFromCategory('ThresholdBrush');
-
-      toolNames.forEach(toolName => {
-        toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-          const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-          toolGroup.setToolConfiguration(toolName, {
-            strategySpecificConfiguration: {
-              THRESHOLD: {
-                threshold: newRange,
-              },
-            },
-          });
-        });
-      });
-
-      dispatch({
-        type: ACTIONS.SET_TOOL_CONFIG,
-        payload: {
-          tool: 'ThresholdBrush',
-          config: { thresholdRange: newRange },
-        },
-      });
-    },
-    [toolGroupService, dispatch, state.ThresholdBrush.thresholdRange]
-  );
-
-  return (
-    <AdvancedToolbox
-      title="Segmentation Tools"
-      items={[
-        {
-          name: 'Brush',
-          icon: 'icon-tool-brush',
-          disabled: !toolsEnabled,
-          active:
-            state.activeTool === TOOL_TYPES.CIRCULAR_BRUSH ||
-            state.activeTool === TOOL_TYPES.SPHERE_BRUSH,
-          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_BRUSH),
-          options: [
-            {
-              name: 'Radius (mm)',
-              id: 'brush-radius',
-              type: 'range',
-              min: 0.5,
-              max: 99.5,
-              value: state.Brush.brushSize,
-              step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'Brush'),
-            },
-            {
-              name: 'Mode',
-              type: 'radio',
-              id: 'brush-mode',
-              value: state.Brush.mode,
-              values: [
-                { value: TOOL_TYPES.CIRCULAR_BRUSH, label: 'Circle' },
-                { value: TOOL_TYPES.SPHERE_BRUSH, label: 'Sphere' },
-              ],
-              onChange: value => setToolActive(value),
-            },
-          ],
-        },
-        {
-          name: 'Eraser',
-          icon: 'icon-tool-eraser',
-          disabled: !toolsEnabled,
-          active:
-            state.activeTool === TOOL_TYPES.CIRCULAR_ERASER ||
-            state.activeTool === TOOL_TYPES.SPHERE_ERASER,
-          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_ERASER),
-          options: [
-            {
-              name: 'Radius (mm)',
-              type: 'range',
-              id: 'eraser-radius',
-              min: 0.5,
-              max: 99.5,
-              value: state.Eraser.brushSize,
-              step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'Eraser'),
-            },
-            {
-              name: 'Mode',
-              type: 'radio',
-              id: 'eraser-mode',
-              value: state.Eraser.mode,
-              values: [
-                { value: TOOL_TYPES.CIRCULAR_ERASER, label: 'Circle' },
-                { value: TOOL_TYPES.SPHERE_ERASER, label: 'Sphere' },
-              ],
-              onChange: value => setToolActive(value),
-            },
-          ],
-        },
-        {
-          name: 'Shapes',
-          icon: 'icon-tool-shape',
-          disabled: !toolsEnabled,
-          active:
-            state.activeTool === TOOL_TYPES.CIRCLE_SHAPE ||
-            state.activeTool === TOOL_TYPES.RECTANGLE_SHAPE ||
-            state.activeTool === TOOL_TYPES.SPHERE_SHAPE,
-          onClick: () => setToolActive(TOOL_TYPES.CIRCLE_SHAPE),
-          options: [
-            {
-              name: 'Mode',
-              type: 'radio',
-              value: state.Shapes.mode,
-              id: 'shape-mode',
-              values: [
-                { value: TOOL_TYPES.CIRCLE_SHAPE, label: 'Circle' },
-                { value: TOOL_TYPES.RECTANGLE_SHAPE, label: 'Rectangle' },
-                { value: TOOL_TYPES.SPHERE_SHAPE, label: 'Sphere' },
-              ],
-              onChange: value => setToolActive(value),
-            },
-          ],
-        },
-        {
-          name: 'Threshold Tool',
-          icon: 'icon-tool-threshold',
-          disabled: !toolsEnabled,
-          active:
-            state.activeTool === TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH ||
-            state.activeTool === TOOL_TYPES.THRESHOLD_SPHERE_BRUSH,
-          onClick: () => setToolActive(TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH),
-          options: [
-            {
-              name: 'Radius (mm)',
-              id: 'threshold-radius',
-              type: 'range',
-              min: 0.5,
-              max: 99.5,
-              value: state.ThresholdBrush.brushSize,
-              step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),
-            },
-            {
-              name: 'Mode',
-              type: 'radio',
-              id: 'threshold-mode',
-              value: state.activeTool,
-              values: [
-                { value: TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH, label: 'Circle' },
-                { value: TOOL_TYPES.THRESHOLD_SPHERE_BRUSH, label: 'Sphere' },
-              ],
-              onChange: value => setToolActive(value),
-            },
-            {
-              type: 'custom',
-              id: 'segmentation-threshold-range',
-              children: () => {
-                return (
-                  <div>
-                    <div className="bg-secondary-light h-[1px]"></div>
-                    <div className="mt-1 text-[13px] text-white">Threshold</div>
-                    <InputDoubleRange
-                      values={state.ThresholdBrush.thresholdRange}
-                      onChange={handleRangeChange}
-                      minValue={-1000} // Todo: these should be configurable
-                      maxValue={1000}
-                      step={1}
-                      showLabel={true}
-                      allowNumberEdit={true}
-                      showAdjustmentArrows={false}
-                    />
-                  </div>
-                );
-              },
-            },
-          ],
-        },
-      ]}
-    />
-  );
-}
-
-function _getToolNamesFromCategory(category) {
-  let toolNames = [];
-  switch (category) {
-    case 'Brush':
-      toolNames = ['CircularBrush', 'SphereBrush'];
-      break;
-    case 'Eraser':
-      toolNames = ['CircularEraser', 'SphereEraser'];
-      break;
-    case 'ThresholdBrush':
-      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'];
-      break;
-    default:
-      break;
-  }
-
-  return toolNames;
-}
-
-export default SegmentationToolbox;
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+
+### Bug Fixes
+
+* **SR display:** and the token based navigation ([#3995](https://github.com/OHIF/Viewers/issues/3995)) ([feed230](https://github.com/OHIF/Viewers/commit/feed2304c124dc2facc7a7371ed9851548c223c5))
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -34,10 +34,10 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-measurement-tracking": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-measurement-tracking": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.63.4",
-    "@cornerstonejs/core": "^1.63.4",
-    "@cornerstonejs/tools": "^1.63.4",
+    "@cornerstonejs/adapters": "^1.66.7",
+    "@cornerstonejs/core": "^1.66.7",
+    "@cornerstonejs/tools": "^1.66.7",
    "classnames": "^2.3.2"
  }
 }
@@ -128,13 +128,9 @@ const commandsModule = props => {
  const definitions = {
    downloadReport: {
      commandFn: actions.downloadReport,
-      storeContexts: [],
-      options: {},
    },
    storeMeasurements: {
      commandFn: actions.storeMeasurements,
-      storeContexts: [],
-      options: {},
    },
  };

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+
+### Bug Fixes
+
+* **SR display:** and the token based navigation ([#3995](https://github.com/OHIF/Viewers/issues/3995)) ([feed230](https://github.com/OHIF/Viewers/commit/feed2304c124dc2facc7a7371ed9851548c223c5))
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -38,9 +38,10 @@
    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
    "@cornerstonejs/codec-openjpeg": "^1.2.2",
    "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.63.4",
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@cornerstonejs/dicom-image-loader": "^1.66.7",
+    "@icr/polyseg-wasm": "^0.4.0",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -54,10 +55,10 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.63.4",
-    "@cornerstonejs/core": "^1.63.4",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.63.4",
-    "@cornerstonejs/tools": "^1.63.4",
+    "@cornerstonejs/adapters": "^1.66.7",
+    "@cornerstonejs/core": "^1.66.7",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.66.7",
+    "@cornerstonejs/tools": "^1.66.7",
    "@kitware/vtk.js": "29.7.0",
    "html2canvas": "^1.4.1",
    "lodash.debounce": "4.0.8",
@@ -109,6 +109,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
    // of the imageData in the OHIFCornerstoneViewport. This prop is used
    // to set the initial state of the viewport's first image to render
    initialImageIndex,
+    onReady,
  } = props;

  const viewportId = viewportOptions.viewportId;
@@ -184,6 +185,7 @@ const OHIFCornerstoneViewport = React.memo(props => {

      if (onElementEnabled) {
        onElementEnabled(evt);
+        onReady?.(evt);
      }
    },
    [viewportId, onElementEnabled, toolGroupService]
@@ -2,21 +2,25 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
-import { ViewportOverlay } from '@ohif/ui';
-import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
-import { InstanceMetadata } from 'platform/core/src/types';
-import { ServicesManager } from '@ohif/core';
 import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
+import { ViewportOverlay } from '@ohif/ui';
+import { ServicesManager } from '@ohif/core';
+import { InstanceMetadata } from '@ohif/core/src/types';
+import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
+import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';

 import './CustomizableViewportOverlay.css';

 const EPSILON = 1e-4;

+type ViewportData = StackViewportData | VolumeViewportData;
+
 interface OverlayItemProps {
-  element: any;
-  viewportData: any;
+  element: HTMLElement;
+  viewportData: ViewportData;
  imageSliceData: ImageSliceData;
  servicesManager: ServicesManager;
+  viewportId: string;
  instance: InstanceMetadata;
  customization: any;
  formatters: {
@@ -35,67 +39,11 @@ interface OverlayItemProps {
  scale?: number;
 }

-/**
- * Window Level / Center Overlay item
- */
-function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
-  const { windowWidth, windowCenter } = voi;
-  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
-    return null;
-  }
-
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: (customization && customization.color) || undefined }}
-    >
-      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 shrink-0 font-light">{windowWidth.toFixed(0)}</span>
-      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 shrink-0 font-light">{windowCenter.toFixed(0)}</span>
-    </div>
-  );
-}
-
-/**
- * Zoom Level Overlay item
- */
-function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: (customization && customization.color) || undefined }}
-    >
-      <span className="mr-1 shrink-0">Zoom:</span>
-      <span className="font-light">{scale.toFixed(2)}x</span>
-    </div>
-  );
-}
-
-/**
- * Instance Number Overlay Item
- */
-function InstanceNumberOverlayItem({
-  instanceNumber,
-  imageSliceData,
-  customization,
-}: OverlayItemProps) {
-  const { imageIndex, numberOfSlices } = imageSliceData;
-
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: (customization && customization.color) || undefined }}
-    >
-      <span className="mr-1 shrink-0">I:</span>
-      <span className="font-light">
-        {instanceNumber !== undefined && instanceNumber !== null
-          ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
-          : `${imageIndex + 1}/${numberOfSlices}`}
-      </span>
-    </div>
-  );
-}
+const OverlayItemComponents = {
+  'ohif.overlayItem.windowLevel': VOIOverlayItem,
+  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
+  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
+};

 /**
 * Customizable Viewport Overlay
@@ -106,12 +54,17 @@ function CustomizableViewportOverlay({
  imageSliceData,
  viewportId,
  servicesManager,
+}: {
+  element: HTMLElement;
+  viewportData: ViewportData;
+  imageSliceData: ImageSliceData;
+  viewportId: string;
+  servicesManager: ServicesManager;
 }) {
-  const { toolbarService, cornerstoneViewportService, customizationService } =
+  const { cornerstoneViewportService, customizationService, toolGroupService } =
    servicesManager.services;
  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
  const [scale, setScale] = useState(1);
-  const [activeTools, setActiveTools] = useState([]);
  const { imageIndex } = imageSliceData;

  const topLeftCustomization = customizationService.getModeCustomization(
@@ -127,27 +80,18 @@ function CustomizableViewportOverlay({
    'cornerstoneOverlayBottomRight'
  );

-  const instance = useMemo(() => {
-    if (viewportData != null) {
-      return _getViewportInstance(viewportData, imageIndex);
-    } else {
-      return null;
-    }
-  }, [viewportData, imageIndex]);
+  const instance = useMemo(
+    () => (viewportData ? getViewportInstance(viewportData, imageIndex) : null),
+    [viewportData, imageIndex]
+  );

-  const instanceNumber = useMemo(() => {
-    if (viewportData != null) {
-      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
-    }
-    return null;
-  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
-
-  /**
-   * Initial toolbar state
-   */
-  useEffect(() => {
-    setActiveTools(toolbarService.getActiveTools());
-  }, []);
+  const instanceNumber = useMemo(
+    () =>
+      viewportData
+        ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService)
+        : null,
+    [viewportData, viewportId, imageIndex, cornerstoneViewportService]
+  );

  /**
   * Updating the VOI when the viewport changes its voi
@@ -215,26 +159,9 @@ function CustomizableViewportOverlay({
    };
  }, [viewportId, viewportData, cornerstoneViewportService, element]);

-  /**
-   * Updating the active tools when the toolbar changes
-   */
-  // Todo: this should act on the toolGroups instead of the toolbar state
-  useEffect(() => {
-    const { unsubscribe } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => {
-        setActiveTools(toolbarService.getActiveTools());
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
-
  const _renderOverlayItem = useCallback(
    item => {
-      const overlayItemProps: OverlayItemProps = {
+      const overlayItemProps = {
        element,
        viewportData,
        imageSliceData,
@@ -242,24 +169,26 @@ function CustomizableViewportOverlay({
        servicesManager,
        customization: item,
        formatters: {
-          formatPN: formatPN,
+          formatPN,
          formatDate: formatDICOMDate,
          formatTime: formatDICOMTime,
-          formatNumberPrecision: formatNumberPrecision,
+          formatNumberPrecision,
        },
        instance,
-        // calculated
        voi,
        scale,
        instanceNumber,
      };

-      if (item.customizationType === 'ohif.overlayItem.windowLevel') {
-        return <VOIOverlayItem {...overlayItemProps} />;
-      } else if (item.customizationType === 'ohif.overlayItem.zoomLevel') {
-        return <ZoomOverlayItem {...overlayItemProps} />;
-      } else if (item.customizationType === 'ohif.overlayItem.instanceNumber') {
-        return <InstanceNumberOverlayItem {...overlayItemProps} />;
+      if (!item) {
+        return null;
+      }
+
+      const { customizationType } = item;
+      const OverlayItemComponent = OverlayItemComponents[customizationType];
+
+      if (OverlayItemComponent) {
+        return <OverlayItemComponent {...overlayItemProps} />;
      } else {
        const renderItem = customizationService.transform(item);

@@ -282,103 +211,106 @@ function CustomizableViewportOverlay({
    ]
  );

-  const getTopLeftContent = useCallback(() => {
-    const items = topLeftCustomization?.items || [
-      {
-        id: 'WindowLevel',
-        customizationType: 'ohif.overlayItem.windowLevel',
-      },
-    ];
-    return (
-      <>
-        {items.map((item, i) => (
-          <div key={`topLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
-        ))}
-      </>
-    );
-  }, [topLeftCustomization, _renderOverlayItem]);
+  const getContent = useCallback(
+    (customization, defaultItems, keyPrefix) => {
+      const items = customization?.items ?? defaultItems;

-  const getTopRightContent = useCallback(() => {
-    const items = topRightCustomization?.items || [
-      {
-        id: 'InstanceNmber',
-        customizationType: 'ohif.overlayItem.instanceNumber',
-      },
-    ];
-    return (
-      <>
-        {items.map((item, i) => (
-          <div key={`topRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
-        ))}
-      </>
-    );
-  }, [topRightCustomization, _renderOverlayItem]);
-
-  const getBottomLeftContent = useCallback(() => {
-    const items = bottomLeftCustomization?.items || [];
-    return (
-      <>
-        {items.map((item, i) => (
-          <div key={`bottomLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
-        ))}
-      </>
-    );
-  }, [bottomLeftCustomization, _renderOverlayItem]);
-
-  const getBottomRightContent = useCallback(() => {
-    const items = bottomRightCustomization?.items || [];
-    return (
-      <>
-        {items.map((item, i) => (
-          <div key={`bottomRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
-        ))}
-      </>
-    );
-  }, [bottomRightCustomization, _renderOverlayItem]);
+      return (
+        <>
+          {items.map((item, index) => (
+            <div key={`${keyPrefix}_${index}`}>
+              {item?.condition
+                ? item.condition()
+                  ? _renderOverlayItem(item)
+                  : null
+                : _renderOverlayItem(item)}
+            </div>
+          ))}
+        </>
+      );
+    },
+    [_renderOverlayItem]
+  );

  return (
    <ViewportOverlay
-      topLeft={getTopLeftContent()}
-      topRight={getTopRightContent()}
-      bottomLeft={getBottomLeftContent()}
-      bottomRight={getBottomRightContent()}
+      topLeft={
+        /**
+         * Inline default overlay items for a more standard expansion
+         */
+        getContent(
+          topLeftCustomization,
+          [
+            {
+              id: 'WindowLevel',
+              customizationType: 'ohif.overlayItem.windowLevel',
+            },
+            {
+              id: 'ZoomLevel',
+              customizationType: 'ohif.overlayItem.zoomLevel',
+              condition: () => {
+                const activeToolName = toolGroupService.getActiveToolForViewport(viewportId);
+                return activeToolName === 'Zoom';
+              },
+            },
+          ],
+          'topLeftOverlayItem'
+        )
+      }
+      topRight={getContent(
+        topRightCustomization,
+        [
+          {
+            id: 'InstanceNumber',
+            customizationType: 'ohif.overlayItem.instanceNumber',
+          },
+        ],
+        'topRightOverlayItem'
+      )}
+      bottomLeft={getContent(bottomLeftCustomization, [null], 'bottomLeftOverlayItem')}
+      bottomRight={getContent(bottomRightCustomization, [null], 'bottomRightOverlayItem')}
    />
  );
 }

-function _getViewportInstance(viewportData, imageIndex) {
+const getViewportInstance = (viewportData, imageIndex) => {
+  const { viewportType, data } = viewportData;
  let imageId = null;
-  if (viewportData.viewportType === Enums.ViewportType.STACK) {
-    imageId = viewportData.data.imageIds[imageIndex];
-  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
-    const volumes = viewportData.data;
-    if (volumes && volumes.length == 1) {
-      const volume = volumes[0];
-      imageId = volume.imageIds[imageIndex];
-    }
-  }
-  return imageId ? metaData.get('instance', imageId) || {} : {};
-}

-function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
+  switch (viewportType) {
+    case Enums.ViewportType.STACK:
+      imageId = data.imageIds[imageIndex];
+      break;
+    case Enums.ViewportType.ORTHOGRAPHIC:
+      if (data?.length === 1) {
+        imageId = data[0].imageIds[imageIndex];
+      }
+      break;
+    default:
+      break;
+  }
+
+  return imageId ? metaData.get('instance', imageId) || {} : {};
+};
+
+const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
  let instanceNumber;

-  if (viewportData.viewportType === Enums.ViewportType.STACK) {
-    instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
-
-    if (!instanceNumber && instanceNumber !== 0) {
-      return null;
-    }
-  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
-    instanceNumber = _getInstanceNumberFromVolume(
-      viewportData,
-      imageIndex,
-      viewportId,
-      cornerstoneViewportService
-    );
+  switch (viewportData.viewportType) {
+    case Enums.ViewportType.STACK:
+      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
+      break;
+    case Enums.ViewportType.ORTHOGRAPHIC:
+      instanceNumber = _getInstanceNumberFromVolume(
+        viewportData,
+        viewportId,
+        cornerstoneViewportService
+      );
+      break;
  }
-  return instanceNumber;
-}
+
+  return instanceNumber ?? null;
+};

 function _getInstanceNumberFromStack(viewportData, imageIndex) {
  const imageIds = viewportData.data.imageIds;
@@ -442,6 +374,68 @@ function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewp
  }
 }

+/**
+ * Window Level / Center Overlay item
+ */
+function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
+  const { windowWidth, windowCenter } = voi;
+  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+    return null;
+  }
+
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">W:</span>
+      <span className="ml-1 mr-2 shrink-0 font-light">{windowWidth.toFixed(0)}</span>
+      <span className="mr-1 shrink-0">L:</span>
+      <span className="ml-1 shrink-0 font-light">{windowCenter.toFixed(0)}</span>
+    </div>
+  );
+}
+
+/**
+ * Zoom Level Overlay item
+ */
+function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="font-light">{scale.toFixed(2)}x</span>
+    </div>
+  );
+}
+
+/**
+ * Instance Number Overlay Item
+ */
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization,
+}: OverlayItemProps) {
+  const { imageIndex, numberOfSlices } = imageSliceData;
+
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">I:</span>
+      <span className="font-light">
+        {instanceNumber !== undefined && instanceNumber !== null
+          ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
+          : `${imageIndex + 1}/${numberOfSlices}`}
+      </span>
+    </div>
+  );
+}
+
 CustomizableViewportOverlay.propTypes = {
  viewportData: PropTypes.object,
  imageIndex: PropTypes.number,
@@ -1,278 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { vec3 } from 'gl-matrix';
-import PropTypes from 'prop-types';
-import { metaData, Enums, utilities } from '@cornerstonejs/core';
-import { ViewportOverlay } from '@ohif/ui';
-import { ServicesManager } from '@ohif/core';
-
-const EPSILON = 1e-4;
-
-function CornerstoneViewportOverlay({
-  element,
-  viewportData,
-  imageSliceData,
-  viewportId,
-  servicesManager,
-}) {
-  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
-  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
-  const [scale, setScale] = useState(1);
-  const [activeTools, setActiveTools] = useState([]);
-
-  /**
-   * Initial toolbar state
-   */
-  useEffect(() => {
-    setActiveTools(toolbarService.getActiveTools());
-  }, []);
-
-  useEffect(() => {
-    let isMounted = true;
-    const { unsubscribe } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => {
-        if (!isMounted) {
-          return;
-        }
-
-        setActiveTools(toolbarService.getActiveTools());
-      }
-    );
-
-    return () => {
-      isMounted = false;
-      unsubscribe();
-    };
-  }, []);
-
-  /**
-   * Updating the VOI when the viewport changes its voi
-   */
-  useEffect(() => {
-    const updateVOI = eventDetail => {
-      const { range } = eventDetail.detail;
-
-      if (!range) {
-        return;
-      }
-
-      const { lower, upper } = range;
-      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);
-
-      setVOI({ windowCenter, windowWidth });
-    };
-
-    element.addEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
-
-    return () => {
-      element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
-    };
-  }, [viewportId, viewportData, voi, element]);
-
-  /**
-   * Updating the scale when the viewport changes its zoom
-   */
-  useEffect(() => {
-    const updateScale = eventDetail => {
-      const { previousCamera, camera } = eventDetail.detail;
-
-      if (
-        previousCamera.parallelScale !== camera.parallelScale ||
-        previousCamera.scale !== camera.scale
-      ) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-        if (!viewport) {
-          return;
-        }
-
-        const imageData = viewport.getImageData();
-
-        if (!imageData) {
-          return;
-        }
-
-        if (camera.scale) {
-          setScale(camera.scale);
-          return;
-        }
-
-        const { spacing } = imageData;
-        // convert parallel scale to scale
-        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
-        setScale(scale);
-      }
-    };
-
-    element.addEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
-
-    return () => {
-      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
-    };
-  }, [viewportId, viewportData]);
-
-  const getTopLeftContent = useCallback(() => {
-    const { windowWidth, windowCenter } = voi;
-
-    if (activeTools.includes('WindowLevel')) {
-      if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
-        return null;
-      }
-
-      return (
-        <div className="flex flex-row text-base">
-          <span className="mr-1">W:</span>
-          <span className="ml-1 mr-2 font-light">{windowWidth.toFixed(0)}</span>
-          <span className="mr-1">L:</span>
-          <span className="ml-1 font-light">{windowCenter.toFixed(0)}</span>
-        </div>
-      );
-    }
-
-    if (activeTools.includes('Zoom')) {
-      return (
-        <div className="flex flex-row text-base">
-          <span className="mr-1">Zoom:</span>
-          <span className="font-light">{scale.toFixed(2)}x</span>
-        </div>
-      );
-    }
-
-    return null;
-  }, [voi, scale, activeTools]);
-
-  const getTopRightContent = useCallback(() => {
-    const { imageIndex, numberOfSlices } = imageSliceData;
-    if (!viewportData) {
-      return;
-    }
-
-    let instanceNumber;
-
-    if (viewportData.viewportType === Enums.ViewportType.STACK) {
-      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
-
-      if (!instanceNumber) {
-        return null;
-      }
-    } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
-      instanceNumber = _getInstanceNumberFromVolume(
-        viewportData,
-        imageIndex,
-        viewportId,
-        cornerstoneViewportService
-      );
-    }
-
-    return (
-      <div className="flex flex-row text-base">
-        <span className="mr-1">I:</span>
-        <span className="font-light">
-          {instanceNumber !== undefined
-            ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
-            : `${imageIndex + 1}/${numberOfSlices}`}
-        </span>
-      </div>
-    );
-  }, [imageSliceData, viewportData, viewportId]);
-
-  if (!viewportData) {
-    return null;
-  }
-
-  const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
-
-  if (!ohifViewport) {
-    return null;
-  }
-
-  const backgroundColor = ohifViewport.getViewportOptions().background;
-
-  // Todo: probably this can be done in a better way in which we identify bright
-  // background
-  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
-
-  return (
-    <ViewportOverlay
-      topLeft={getTopLeftContent()}
-      topRight={getTopRightContent()}
-      color={isLight && 'text-[#0944B3]'}
-    />
-  );
-}
-
-function _getInstanceNumberFromStack(viewportData, imageIndex) {
-  const imageIds = viewportData.data.imageIds;
-  const imageId = imageIds[imageIndex];
-
-  if (!imageId) {
-    return;
-  }
-
-  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
-  const { instanceNumber } = generalImageModule;
-
-  const stackSize = imageIds.length;
-
-  if (stackSize <= 1) {
-    return;
-  }
-
-  return parseInt(instanceNumber);
-}
-
-// Since volume viewports can be in any view direction, they can render
-// a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
-// Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(
-  viewportData,
-  imageIndex,
-  viewportId,
-  cornerstoneViewportService
-) {
-  const volumes = viewportData.volumes;
-
-  // Todo: support fusion of acquisition plane which has instanceNumber
-  if (!volumes || volumes.length > 1) {
-    return;
-  }
-
-  const volume = volumes[0];
-  const { direction, imageIds } = volume;
-
-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-  if (!cornerstoneViewport) {
-    return;
-  }
-
-  const camera = cornerstoneViewport.getCamera();
-  const { viewPlaneNormal } = camera;
-  // checking if camera is looking at the acquisition plane (defined by the direction on the volume)
-
-  const scanAxisNormal = direction.slice(6, 9);
-
-  // check if viewPlaneNormal is parallel to scanAxisNormal
-  const cross = vec3.cross(vec3.create(), viewPlaneNormal, scanAxisNormal);
-  const isAcquisitionPlane = vec3.length(cross) < EPSILON;
-
-  if (isAcquisitionPlane) {
-    const imageId = imageIds[imageIndex];
-
-    if (!imageId) {
-      return {};
-    }
-
-    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
-    return parseInt(instanceNumber);
-  }
-}
-
-CornerstoneViewportOverlay.propTypes = {
-  viewportData: PropTypes.object,
-  imageIndex: PropTypes.number,
-  viewportId: PropTypes.string,
-  servicesManager: PropTypes.instanceOf(ServicesManager),
-};
-
-export default CornerstoneViewportOverlay;
@@ -21,6 +21,12 @@ import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import { CornerstoneServices } from './types';
+import toggleVOISliceSync from './utils/toggleVOISliceSync';
+
+const toggleSyncFunctions = {
+  imageSlice: toggleImageSliceSync,
+  voi: toggleVOISliceSync,
+};

 function commandsModule({
  servicesManager,
@@ -30,11 +36,11 @@ function commandsModule({
    viewportGridService,
    toolGroupService,
    cineService,
-    toolbarService,
    uiDialogService,
    cornerstoneViewportService,
    uiNotificationService,
    measurementService,
+    syncGroupService,
  } = servicesManager.services as CornerstoneServices;

  const { measurementServiceSource } = this;
@@ -227,30 +233,10 @@ function commandsModule({
    arrowTextCallback: ({ callback, data }) => {
      callInputDialog(uiDialogService, data, callback);
    },
-    cleanUpCrosshairs: () => {
-      // if the crosshairs tool is active, deactivate it and set window level active
-      // since we are going back to main non-mpr HP
-      const activeViewportToolGroup = toolGroupService.getToolGroup(null);
-
-      if (activeViewportToolGroup._toolInstances?.Crosshairs?.mode === Enums.ToolModes.Active) {
-        actions.toolbarServiceRecordInteraction({
-          interactionType: 'tool',
-          commands: [
-            {
-              commandOptions: {
-                toolName: 'WindowLevel',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-        });
-      }
-    },
    toggleCine: () => {
      const { viewports } = viewportGridService.getState();
      const { isCineEnabled } = cineService.getState();
      cineService.setIsCineEnabled(!isCineEnabled);
-      toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
    },
    setWindowLevel({ window, level, toolGroupId }) {
@@ -279,35 +265,40 @@ function commandsModule({
      });
      viewport.render();
    },
+    setToolEnabled: ({ toolName, toggle }) => {
+      const { viewports } = viewportGridService.getState();

-    // Just call the toolbar service record interaction - allows
-    // executing a toolbar command as a full toolbar command with side affects
-    // coming from the ToolbarService itself.
-    toolbarServiceRecordInteraction: props => {
-      toolbarService.recordInteraction(props);
-    },
-    // Enable or disable a toggleable command, without calling the activation
-    // Used to setup already active tools from hanging protocols
-    setToolbarToggled: props => {
-      toolbarService.setToggled(props.toolId, props.isActive ?? true);
-    },
-    setToolActive: ({ toolName, toolGroupId = null, toggledState }) => {
-      if (toolName === 'Crosshairs') {
-        const activeViewportToolGroup = toolGroupService.getToolGroup(null);
-
-        if (!activeViewportToolGroup._toolInstances.Crosshairs) {
-          uiNotificationService.show({
-            title: 'Crosshairs',
-            message:
-              'You need to be in a MPR view to use Crosshairs. Click on MPR button in the toolbar to activate it.',
-            type: 'info',
-            duration: 3000,
-          });
-
-          throw new Error('Crosshairs tool is not available in this viewport');
-        }
+      if (!viewports.size) {
+        return;
      }

+      const toolGroup = toolGroupService.getToolGroup(null);
+
+      if (!toolGroup) {
+        return;
+      }
+
+      const toolIsEnabled = toolGroup.getToolOptions(toolName).mode === Enums.ToolModes.Enabled;
+
+      // Toggle the tool's state only if the toggle is true
+      if (toggle) {
+        toolIsEnabled ? toolGroup.setToolDisabled(toolName) : toolGroup.setToolEnabled(toolName);
+      }
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    setToolActiveToolbar: ({ value, itemId, toolGroupIds = [] }) => {
+      // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
+      const toolName = itemId || value;
+
+      toolGroupIds = toolGroupIds.length ? toolGroupIds : toolGroupService.getToolGroupIds();
+
+      toolGroupIds.forEach(toolGroupId => {
+        actions.setToolActive({ toolName, toolGroupId });
+      });
+    },
+    setToolActive: ({ toolName, toolGroupId = null }) => {
      const { viewports } = viewportGridService.getState();

      if (!viewports.size) {
@@ -320,34 +311,13 @@ function commandsModule({
        return;
      }

-      if (!toolGroup.getToolInstance(toolName)) {
-        uiNotificationService.show({
-          title: `${toolName} tool`,
-          message: `The ${toolName} tool is not available in this viewport.`,
-          type: 'info',
-          duration: 3000,
-        });
-
-        throw new Error(`ToolGroup ${toolGroup.id} does not have this tool.`);
-      }
-
      const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();

      if (activeToolName) {
-        // Todo: this is a hack to prevent the crosshairs to stick around
-        // after another tool is selected. We should find a better way to do this
-        if (activeToolName === 'Crosshairs') {
-          toolGroup.setToolDisabled(activeToolName);
-        } else {
-          toolGroup.setToolPassive(activeToolName);
-        }
-      }
-
-      // If there is a toggle state, then simply set the enabled/disabled state without
-      // setting the tool active.
-      if (toggledState != null) {
-        toggledState ? toolGroup.setToolEnabled(toolName) : toolGroup.setToolDisabled(toolName);
-        return;
+        const activeToolOptions = toolGroup.getToolConfiguration(activeToolName);
+        activeToolOptions?.disableOnPassive
+          ? toolGroup.setToolDisabled(activeToolName)
+          : toolGroup.setToolPassive(activeToolName);
      }

      // Set the new toolName to be active
@@ -565,33 +535,59 @@ function commandsModule({
        (currentIndex + direction + viewportIds.length) % viewportIds.length;
      viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex] as string);
    },
+    /**
+     * If the syncId is given and a synchronizer with that ID already exists, it will
+     * toggle it on/off for the provided viewports. If not, it will attempt to create
+     * a new synchronizer using the given syncId and type for the specified viewports.
+     * If no viewports are provided, you may notice some default behavior.
+     * - 'voi' type, we will aim to synchronize all viewports with the same modality
+     * -'imageSlice' type, we will aim to synchronize all viewports with the same orientation.
+     *
+     * @param options
+     * @param options.viewports - The viewports to synchronize
+     * @param options.syncId - The synchronization group ID
+     * @param options.type - The type of synchronization to perform
+     */
+    toggleSynchronizer: ({ type, viewports, syncId }) => {
+      const synchronizer = syncGroupService.getSynchronizer(syncId);

-    toggleImageSliceSync: ({ toggledState }) => {
-      toggleImageSliceSync({
-        servicesManager,
-        toggledState,
-      });
+      if (synchronizer) {
+        synchronizer.isDisabled() ? synchronizer.setEnabled(true) : synchronizer.setEnabled(false);
+        return;
+      }
+
+      const fn = toggleSyncFunctions[type];
+
+      if (fn) {
+        fn({
+          servicesManager,
+          viewports,
+          syncId,
+        });
+      }
    },
-    setSourceViewportForReferenceLinesTool: ({ toggledState, viewportId }) => {
+    setSourceViewportForReferenceLinesTool: ({ viewportId }) => {
      if (!viewportId) {
        const { activeViewportId } = viewportGridService.getState();
-        viewportId = activeViewportId;
+        viewportId = activeViewportId ?? 'default';
      }

      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);

-      toolGroup.setToolConfiguration(
+      toolGroup?.setToolConfiguration(
        ReferenceLinesTool.toolName,
        {
          sourceViewportId: viewportId,
        },
        true // overwrite
      );
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
    },
    storePresentation: ({ viewportId }) => {
      cornerstoneViewportService.storePresentation({ viewportId });
    },
-
    attachProtocolViewportDataListener: ({ protocol, stageIndex }) => {
      const EVENT = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
      const command = protocol.callbacks.onViewportDataInitialized;
@@ -608,6 +604,26 @@ function commandsModule({
        }
      });
    },
+    resetCrosshairs: ({ viewportId }) => {
+      const crosshairInstances = [];
+
+      const getCrosshairInstances = toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        crosshairInstances.push(toolGroup.getToolInstance('Crosshairs'));
+      };
+
+      if (!viewportId) {
+        const toolGroupIds = toolGroupService.getToolGroupIds();
+        toolGroupIds.forEach(getCrosshairInstances);
+      } else {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+        getCrosshairInstances(toolGroup.id);
+      }
+
+      crosshairInstances.forEach(ins => {
+        ins.resetCrosshairs();
+      });
+    },
  };

  const definitions = {
@@ -615,7 +631,6 @@ function commandsModule({
    // context menu
    showCornerstoneContextMenu: {
      commandFn: actions.showCornerstoneContextMenu,
-      storeContexts: [],
      options: {
        menuCustomizationId: 'measurementsContextMenu',
        commands: [
@@ -631,8 +646,6 @@ function commandsModule({
    },
    getNearbyAnnotation: {
      commandFn: actions.getNearbyAnnotation,
-      storeContexts: [],
-      options: {},
    },
    deleteMeasurement: {
      commandFn: actions.deleteMeasurement,
@@ -643,16 +656,18 @@ function commandsModule({
    updateMeasurement: {
      commandFn: actions.updateMeasurement,
    },
-
    setWindowLevel: {
      commandFn: actions.setWindowLevel,
    },
-    toolbarServiceRecordInteraction: {
-      commandFn: actions.toolbarServiceRecordInteraction,
-    },
    setToolActive: {
      commandFn: actions.setToolActive,
    },
+    setToolActiveToolbar: {
+      commandFn: actions.setToolActiveToolbar,
+    },
+    setToolEnabled: {
+      commandFn: actions.setToolEnabled,
+    },
    rotateViewportCW: {
      commandFn: actions.rotateViewport,
      options: { rotation: 90 },
@@ -735,15 +750,15 @@ function commandsModule({
    storePresentation: {
      commandFn: actions.storePresentation,
    },
-    setToolbarToggled: {
-      commandFn: actions.setToolbarToggled,
-    },
-    cleanUpCrosshairs: {
-      commandFn: actions.cleanUpCrosshairs,
-    },
    attachProtocolViewportDataListener: {
      commandFn: actions.attachProtocolViewportDataListener,
    },
+    resetCrosshairs: {
+      commandFn: actions.resetCrosshairs,
+    },
+    toggleSynchronizer: {
+      commandFn: actions.toggleSynchronizer,
+    },
  };

  return {
@@ -1,38 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { CinePlayer, useCine } from '@ohif/ui';
 import { Enums, eventTarget } from '@cornerstonejs/core';
 import { useAppConfig } from '@state';

 function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
-  const {
-    toolbarService,
-    customizationService,
-    displaySetService,
-    viewportGridService,
-    cineService,
-  } = servicesManager.services;
-  const [{ isCineEnabled, cines }] = useCine();
+  const { customizationService, displaySetService, viewportGridService } = servicesManager.services;
+  const [{ isCineEnabled, cines }, api] = useCine();
  const [newStackFrameRate, setNewStackFrameRate] = useState(24);
  const [appConfig] = useAppConfig();
+  const isMountedRef = useRef(null);

  const { component: CinePlayerComponent = CinePlayer } =
    customizationService.get('cinePlayer') ?? {};

-  const handleCineClose = () => {
-    toolbarService.recordInteraction({
-      groupId: 'MoreTools',
-      interactionType: 'toggle',
-      commands: [
-        {
-          commandName: 'toggleCine',
-          commandOptions: {},
-          toolName: 'cine',
-          context: 'CORNERSTONE',
-        },
-      ],
-    });
-  };
-
  const cineHandler = () => {
    if (!cines || !cines[viewportId] || !enabledVPElement) {
      return;
@@ -45,11 +25,11 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
    const validFrameRate = Math.max(frameRate, 1);

    if (isPlaying) {
-      cineService.playClip(enabledVPElement, {
+      api.playClip(enabledVPElement, {
        framesPerSecond: validFrameRate,
      });
    } else {
-      cineService.stopClip(enabledVPElement);
+      api.stopClip(enabledVPElement);
    }
  };

@@ -70,34 +50,36 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
    });

    if (isPlaying) {
-      cineService.setIsCineEnabled(isPlaying);
+      api.setIsCineEnabled(isPlaying);
    }
-    cineService.setCine({ id: viewportId, isPlaying, frameRate });
+    api.setCine({ id: viewportId, isPlaying, frameRate });
    setNewStackFrameRate(frameRate);
-  }, [cineService, displaySetService, viewportId, viewportGridService, cines]);
+  }, [displaySetService, viewportId, viewportGridService, cines]);

  useEffect(() => {
+    isMountedRef.current = true;
+
    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);

    return () => {
-      cineService.setCine({ id: viewportId, isPlaying: false });
+      isMountedRef.current = false;
+      api.stopClip(enabledVPElement);
+      api.setCine({ id: viewportId, isPlaying: false });
      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
    };
  }, [enabledVPElement, newStackCineHandler]);

  useEffect(() => {
-    if (!cines || !cines[viewportId] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
      return;
    }

    cineHandler();

    return () => {
-      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
-        cineService.stopClip(enabledVPElement);
-      }
+      api.stopClip(enabledVPElement);
    };
-  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, enabledVPElement, cineHandler]);

  const cine = cines[viewportId];
  const isPlaying = (cine && cine.isPlaying) || false;
@@ -108,15 +90,22 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
        className="absolute left-1/2 bottom-3 -translate-x-1/2"
        frameRate={newStackFrameRate}
        isPlaying={isPlaying}
-        onClose={handleCineClose}
-        onPlayPauseChange={isPlaying =>
-          cineService.setCine({
+        onClose={() => {
+          // also stop the clip
+          api.setCine({
+            id: viewportId,
+            isPlaying: false,
+          });
+          api.setIsCineEnabled(false);
+        }}
+        onPlayPauseChange={isPlaying => {
+          api.setCine({
            id: viewportId,
            isPlaying,
-          })
-        }
+          });
+        }}
        onFrameRateChange={frameRate =>
-          cineService.setCine({
+          api.setCine({
            id: viewportId,
            frameRate,
          })
@@ -0,0 +1,251 @@
+import { Enums } from '@cornerstonejs/tools';
+
+const getToggledClassName = (isToggled: boolean) => {
+  return isToggled
+    ? '!text-primary-active'
+    : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
+};
+
+export default function getToolbarModule({ commandsManager, servicesManager }) {
+  const {
+    toolGroupService,
+    syncGroupService,
+    cornerstoneViewportService,
+    hangingProtocolService,
+    displaySetService,
+    viewportGridService,
+  } = servicesManager.services;
+
+  return [
+    // functions/helpers to be used by the toolbar buttons to decide if they should
+    // enabled or not
+    {
+      name: 'evaluate.cornerstoneTool',
+      evaluate: ({ viewportId, button }) => {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+        if (!toolGroup) {
+          return;
+        }
+
+        const toolName = getToolNameForButton(button);
+
+        if (!toolGroup || !toolGroup.hasTool(toolName)) {
+          return {
+            disabled: true,
+            className: '!text-common-bright ohif-disabled',
+          };
+        }
+
+        const isPrimaryActive = toolGroup.getActivePrimaryMouseButtonTool() === toolName;
+
+        return {
+          disabled: false,
+          className: isPrimaryActive
+            ? '!text-black bg-primary-light'
+            : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+          // Todo: isActive right now is used for nested buttons where the primary
+          // button needs to be fully rounded (vs partial rounded) when active
+          // otherwise it does not have any other use
+          isActive: isPrimaryActive,
+        };
+      },
+    },
+    {
+      name: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      evaluate: ({ viewportId, button, itemId }) => {
+        const { items } = button.props;
+
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+        if (!toolGroup) {
+          return {
+            primary: button.props.primary,
+            items,
+          };
+        }
+
+        const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();
+
+        // check if the active toolName is part of the items then we need
+        // to move it to the primary button
+        const activeToolIndex = items.findIndex(item => {
+          const toolName = getToolNameForButton(item);
+          return toolName === activeToolName;
+        });
+
+        // if there is an active tool in the items dropdown bound to the primary mouse/touch
+        // we should show that no matter what
+        if (activeToolIndex > -1) {
+          return {
+            primary: items[activeToolIndex],
+            items,
+          };
+        }
+
+        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: 'evaluate.action',
+      evaluate: ({ viewportId, button }) => {
+        return {
+          className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
+        };
+      },
+    },
+    {
+      name: 'evaluate.cornerstoneTool.toggle',
+      evaluate: ({ viewportId, button }) => {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+        if (!toolGroup) {
+          return;
+        }
+        const toolName = getToolNameForButton(button);
+
+        if (!toolGroup || !toolGroup.hasTool(toolName)) {
+          return {
+            disabled: true,
+            className: '!text-common-bright ohif-disabled',
+          };
+        }
+
+        const isOff = [Enums.ToolModes.Disabled, Enums.ToolModes.Passive].includes(
+          toolGroup.getToolOptions(toolName).mode
+        );
+
+        return {
+          className: getToggledClassName(!isOff),
+        };
+      },
+    },
+    {
+      name: 'evaluate.cornerstone.synchronizer',
+      evaluate: ({ viewportId, button }) => {
+        let synchronizers = syncGroupService.getSynchronizersForViewport(viewportId);
+
+        if (!synchronizers?.length) {
+          return {
+            className: getToggledClassName(false),
+          };
+        }
+
+        const synchronizerType = button?.commands?.[0]?.commandOptions?.type;
+
+        synchronizers = syncGroupService.getSynchronizersOfType(synchronizerType);
+
+        if (!synchronizers?.length) {
+          return {
+            className: getToggledClassName(false),
+          };
+        }
+
+        // Todo: we need a better way to find the synchronizers based on their
+        // type, but for now we just check the first one and see if it is
+        // enabled
+        const synchronizer = synchronizers[0];
+
+        const isEnabled = synchronizer?._enabled;
+
+        return {
+          className: getToggledClassName(isEnabled),
+        };
+      },
+    },
+    {
+      name: 'evaluate.viewportProperties.toggle',
+      evaluate: ({ viewportId, button }) => {
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+        if (!viewport || viewport.isDisabled) {
+          return;
+        }
+
+        const propId = button.id;
+
+        const properties = viewport.getProperties();
+        const camera = viewport.getCamera();
+
+        const prop = camera?.[propId] || properties?.[propId];
+
+        if (!prop) {
+          return {
+            disabled: false,
+            className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
+          };
+        }
+
+        const isToggled = prop;
+
+        return {
+          className: getToggledClassName(isToggled),
+        };
+      },
+    },
+    {
+      name: 'evaluate.mpr',
+      evaluate: ({ viewportId, button }) => {
+        const { protocol } = hangingProtocolService.getActiveProtocol();
+
+        const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+
+        if (!displaySetUIDs?.length) {
+          return;
+        }
+
+        const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
+
+        const areReconstructable = displaySets.every(displaySet => {
+          return displaySet.isReconstructable;
+        });
+
+        if (!areReconstructable) {
+          return {
+            disabled: true,
+            className: '!text-common-bright ohif-disabled',
+          };
+        }
+
+        const isMpr = protocol?.id === 'mpr';
+
+        return {
+          disabled: false,
+          className: getToggledClassName(isMpr),
+        };
+      },
+    },
+  ];
+}
+
+function getToolNameForButton(button) {
+  const { props } = button;
+
+  const commands = props?.commands || button.commands;
+  const commandsArray = Array.isArray(commands) ? commands : [commands];
+  const firstCommand = commandsArray[0];
+  if (typeof firstCommand === 'string') {
+    // likely not a cornerstone tool
+    return null;
+  }
+
+  if ('commandOptions' in firstCommand) {
+    return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
+  }
+
+  // use id as a fallback for toolName
+  return props?.id ?? button.id;
+}
@@ -22,11 +22,6 @@ export const mpr: Types.HangingProtocol.Protocol = {
      },
    ],
    // Turns off crosshairs when switching out of MPR mode
-    onProtocolExit: [
-      {
-        commandName: 'cleanUpCrosshairs',
-      },
-    ],
  },
  displaySetSelectors: {
    activeDisplaySet: {
@@ -13,6 +13,7 @@ import init from './init';
 import getCustomizationModule from './getCustomizationModule';
 import getCommandsModule from './commandsModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
+import getToolbarModule from './getToolbarModule';
 import ToolGroupService from './services/ToolGroupService';
 import SyncGroupService from './services/SyncGroupService';
 import SegmentationService from './services/SegmentationService';
@@ -26,7 +27,6 @@ import dicomLoaderService from './utils/dicomLoaderService';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';

 import { id } from './id';
-import * as csWADOImageLoader from './initWADOImageLoader.js';
 import { measurementMappingUtils } from './utils/measurementServiceMappings';
 import type { PublicViewportOptions } from './services/ViewportService/Viewport';
 import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
@@ -79,6 +79,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
    return init.call(this, props);
  },

+  getToolbarModule,
  getHangingProtocolModule,
  getViewportModule({ servicesManager, commandsManager }) {
    const ExtendedOHIFCornerstoneViewport = props => {
@@ -15,7 +15,6 @@ import {
  utilities as csUtilities,
  Enums as csEnums,
 } from '@cornerstonejs/core';
-import { Enums } from '@cornerstonejs/tools';
 import { cornerstoneStreamingImageVolumeLoader } from '@cornerstonejs/streaming-image-volume-loader';

 import initWADOImageLoader from './initWADOImageLoader';
@@ -41,7 +40,6 @@ export default async function init({
  servicesManager,
  commandsManager,
  extensionManager,
-  configuration,
  appConfig,
 }: Types.Extensions.ExtensionParams): Promise<void> {
  // Note: this should run first before initializing the cornerstone
@@ -94,13 +92,26 @@ export default async function init({
    cineService,
    cornerstoneViewportService,
    hangingProtocolService,
-    toolGroupService,
    toolbarService,
    viewportGridService,
    stateSyncService,
-    syncGroupService,
+    segmentationService,
  } = servicesManager.services as CornerstoneServices;

+  toolbarService.registerEventForToolbarUpdate(cornerstoneViewportService, [
+    cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
+  ]);
+
+  toolbarService.registerEventForToolbarUpdate(segmentationService, [
+    segmentationService.EVENTS.SEGMENTATION_ADDED,
+    segmentationService.EVENTS.SEGMENTATION_REMOVED,
+    segmentationService.EVENTS.SEGMENTATION_UPDATED,
+  ]);
+
+  toolbarService.registerEventForToolbarUpdate(eventTarget, [
+    cornerstoneTools.Enums.Events.TOOL_ACTIVATED,
+  ]);
+
  window.services = servicesManager.services;
  window.extensionManager = extensionManager;
  window.commandsManager = commandsManager;
@@ -225,47 +236,6 @@ export default async function init({
    commandsManager,
  });

-  /**
-   * When a viewport gets a new display set, this call will go through all the
-   * active tools in the toolbar, and call any commands registered in the
-   * toolbar service with a callback to re-enable on displaying the viewport.
-   */
-  const toolbarEventListener = evt => {
-    const { element } = evt.detail;
-    const activeTools = toolbarService.getActiveTools();
-
-    activeTools.forEach(tool => {
-      const toolData = toolbarService.getNestedButton(tool);
-      const commands = toolData?.listeners?.[evt.type];
-      commandsManager.run(commands, { element, evt });
-    });
-  };
-
-  /** Listens for active viewport events and fires the toolbar listeners */
-  const activeViewportEventListener = evt => {
-    const { viewportId } = evt;
-    const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-
-    const activeTools = toolbarService.getActiveTools();
-
-    activeTools.forEach(tool => {
-      if (!toolGroup?._toolInstances?.[tool]) {
-        return;
-      }
-
-      // check if tool is active on the new viewport
-      const toolEnabled = toolGroup._toolInstances[tool].mode === Enums.ToolModes.Enabled;
-
-      if (!toolEnabled) {
-        return;
-      }
-
-      const button = toolbarService.getNestedButton(tool);
-      const commands = button?.listeners?.[evt.type];
-      commandsManager.run(commands, { viewportId, evt });
-    });
-  };
-
  /**
   * Runs error handler for failed requests.
   * @param event
@@ -275,30 +245,6 @@ export default async function init({
    handler(detail.error);
  };

-  const resetCrosshairs = evt => {
-    const { element } = evt.detail;
-    const { viewportId, renderingEngineId } = cornerstone.getEnabledElement(element);
-
-    const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroupForViewport(
-      viewportId,
-      renderingEngineId
-    );
-
-    if (!toolGroup || !toolGroup._toolInstances?.['Crosshairs']) {
-      return;
-    }
-
-    const mode = toolGroup._toolInstances['Crosshairs'].mode;
-
-    if (mode === Enums.ToolModes.Active) {
-      toolGroup.setToolActive('Crosshairs');
-    } else if (mode === Enums.ToolModes.Passive) {
-      toolGroup.setToolPassive('Crosshairs');
-    } else if (mode === Enums.ToolModes.Enabled) {
-      toolGroup.setToolEnabled('Crosshairs');
-    }
-  };
-
  eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
    const { element } = evt.detail;
    cornerstoneTools.utilities.stackContextPrefetch.enable(element);
@@ -309,17 +255,21 @@ export default async function init({
  function elementEnabledHandler(evt) {
    const { element } = evt.detail;

-    element.addEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);
+    element.addEventListener(EVENTS.CAMERA_RESET, evt => {
+      const { element } = evt.detail;
+      const { viewportId } = getEnabledElement(element);
+      commandsManager.runCommand('resetCrosshairs', { viewportId });
+    });

-    eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);
+    // eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);

-    initViewTiming({ element, eventTarget });
+    initViewTiming({ element });
  }

  function elementDisabledHandler(evt) {
    const { element } = evt.detail;

-    element.removeEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);
+    // element.removeEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);

    // TODO - consider removing the callback when all elements are gone
    // eventTarget.removeEventListener(
@@ -332,10 +282,10 @@ export default async function init({

  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));

-  viewportGridService.subscribe(
-    viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
-    activeViewportEventListener
-  );
+  // viewportGridService.subscribe(
+  //   viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
+  //   activeViewportEventListener
+  // );
 }

 function CPUModal() {
@@ -962,7 +962,7 @@ class SegmentationService extends PubSubService {

    // Force use of a Uint8Array SharedArrayBuffer for the segmentation to save space and so
    // it is easily compressible in worker thread.
-    await volumeLoader.createAndCacheDerivedVolume(volumeId, {
+    await volumeLoader.createAndCacheDerivedSegmentationVolume(volumeId, {
      volumeId: segmentationId,
      targetBuffer: {
        type: 'Uint8Array',
@@ -1368,8 +1368,6 @@ class SegmentationService extends PubSubService {

  public setConfiguration = (configuration: SegmentationConfig): void => {
    const {
-      brushSize,
-      brushThresholdGate,
      fillAlpha,
      fillAlphaInactive,
      outlineWidthActive,
@@ -1461,7 +1459,6 @@ class SegmentationService extends PubSubService {
    segmentInfo.label = label;

    if (suppressEvents === false) {
-      // this._setSegmentationModified(segmentationId);
      this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
        segmentation,
      });
@@ -1,4 +1,5 @@
 import { synchronizers, SynchronizerManager, Synchronizer } from '@cornerstonejs/tools';
+import { getRenderingEngines } from '@cornerstonejs/core';

 import { pubSubServiceInterface, Types, ServicesManager } from '@ohif/core';

@@ -25,6 +26,7 @@ const POSITION = 'cameraposition';
 const VOI = 'voi';
 const ZOOMPAN = 'zoompan';
 const STACKIMAGE = 'stackimage';
+const IMAGE_SLICE = 'imageslice';

 const asSyncGroup = (syncGroup: string | SyncGroup): SyncGroup =>
  typeof syncGroup === 'string' ? { type: syncGroup } : syncGroup;
@@ -45,9 +47,14 @@ export default class SyncGroupService {
    [POSITION]: synchronizers.createCameraPositionSynchronizer,
    [VOI]: synchronizers.createVOISynchronizer,
    [ZOOMPAN]: synchronizers.createZoomPanSynchronizer,
+    // todo: remove stack image since it is legacy now and the image_slice
+    // handles both stack and volume viewports
    [STACKIMAGE]: synchronizers.createImageSliceSynchronizer,
+    [IMAGE_SLICE]: synchronizers.createImageSliceSynchronizer,
  };

+  synchronizersByType: { [key: string]: Synchronizer[] } = {};
+
  constructor(serviceManager: ServicesManager) {
    this.servicesManager = serviceManager;
    this.listeners = {};
@@ -57,14 +64,27 @@ export default class SyncGroupService {
  }

  private _createSynchronizer(type: string, id: string, options): Synchronizer | undefined {
+    // Initialize if not already done
+    this.synchronizersByType[type] = this.synchronizersByType[type] || [];
+
    const syncCreator = this.synchronizerCreators[type.toLowerCase()];
+
    if (syncCreator) {
-      return syncCreator(id, options);
+      const synchronizer = syncCreator(id, options);
+
+      if (synchronizer) {
+        this.synchronizersByType[type].push(synchronizer);
+        return synchronizer;
+      }
    } else {
-      console.warn('Unknown synchronizer type', type, id);
+      console.warn(`Unknown synchronizer type: ${type}, id: ${id}`);
    }
  }

+  public getSyncCreatorForType(type: string): SyncCreator {
+    return this.synchronizerCreators[type.toLowerCase()];
+  }
+
  /**
   * Creates a synchronizer type.
   * @param type is the type of the synchronizer to create
@@ -78,6 +98,15 @@ export default class SyncGroupService {
    return SynchronizerManager.getSynchronizer(id);
  }

+  /**
+   * Retrieves an array of synchronizers of a specific type.
+   * @param type - The type of synchronizers to retrieve.
+   * @returns An array of synchronizers of the specified type.
+   */
+  public getSynchronizersOfType(type: string): Synchronizer[] {
+    return this.synchronizersByType[type];
+  }
+
  protected _getOrCreateSynchronizer(
    type: string,
    id: string,
@@ -125,14 +154,17 @@ export default class SyncGroupService {
    SynchronizerManager.destroy();
  }

-  public getSynchronizersForViewport(
-    viewportId: string,
-    renderingEngineId: string
-  ): Synchronizer[] {
-    return SynchronizerManager.getAllSynchronizers().filter(
+  public getSynchronizersForViewport(viewportId: string): Synchronizer[] {
+    const renderingEngine =
+      getRenderingEngines().find(re => {
+        return re.getViewports().find(vp => vp.id === viewportId);
+      }) || getRenderingEngines()[0];
+
+    const synchronizers = SynchronizerManager.getAllSynchronizers();
+    return synchronizers.filter(
      s =>
-        s.hasSourceViewport(renderingEngineId, viewportId) ||
-        s.hasTargetViewport(renderingEngineId, viewportId)
+        s.hasSourceViewport(renderingEngine.id, viewportId) ||
+        s.hasTargetViewport(renderingEngine.id, viewportId)
    );
  }

@@ -189,19 +189,6 @@ export default class ToolGroupService {
    this.addToolsToToolGroup(toolGroupId, tools);
    return toolGroup;
  }
-
-  /**
-  private changeConfigurationIfNecessary(toolGroup, volumeUID) {
-    // handle specific assignment for volumeUID (e.g., fusion)
-    const toolInstances = toolGroup._toolInstances;
-    // Object.values(toolInstances).forEach(toolInstance => {
-    //   if (toolInstance.configuration) {
-    //     toolInstance.configuration.volumeUID = volumeUID;
-    //   }
-    // });
-  }
-  */
-
  /**
   * Get the tool's configuration based on the tool name and tool group id
   * @param toolGroupId - The id of the tool group that the tool instance belongs to.
@@ -234,7 +234,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
    }

    const { viewPlaneNormal, viewUp } = csViewport.getCamera();
-    const initialImageIndex = csViewport.getCurrentImageIdIndex();
+    const initialImageIndex = csViewport.getCurrentImageIdIndex() || 0;
    const zoom = csViewport.getZoom();
    const pan = csViewport.getPan();

@@ -347,10 +347,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi

    const { stateSyncService, syncGroupService } = this.servicesManager.services;

-    const synchronizers = syncGroupService.getSynchronizersForViewport(
-      viewportId,
-      this.renderingEngine.id
-    );
+    const synchronizers = syncGroupService.getSynchronizersForViewport(viewportId);

    const { positionPresentationStore, synchronizersStore, lutPresentationStore } =
      stateSyncService.getState();
@@ -189,7 +189,7 @@ const CornerstoneViewportDownloadForm = ({
    // add the viewport to the toolGroup
    toolGroup.addViewport(downloadViewportId, renderingEngineId);

-    Object.keys(toolGroup._toolInstances).forEach(toolName => {
+    Object.keys(toolGroup.getToolInstances()).forEach(toolName => {
      // make all tools Enabled so that they can not be interacted with
      // in the download viewport
      if (toggle && toolName !== 'Crosshairs') {
@@ -1,20 +1,35 @@
 const IMAGE_SLICE_SYNC_NAME = 'IMAGE_SLICE_SYNC';

 export default function toggleImageSliceSync({
-  toggledState,
  servicesManager,
  viewports: providedViewports,
+  syncId,
 }) {
-  if (!toggledState) {
-    return disableSync(IMAGE_SLICE_SYNC_NAME, servicesManager);
-  }
-
  const { syncGroupService, viewportGridService, displaySetService, cornerstoneViewportService } =
    servicesManager.services;

+  syncId ||= IMAGE_SLICE_SYNC_NAME;
+
  const viewports =
    providedViewports || getReconstructableStackViewports(viewportGridService, displaySetService);

+  // Todo: right now we don't have a proper way to define specific
+  // viewports to add to synchronizers, and right now it is global or not
+  // after we do that, we should do fine grained control of the synchronizers
+  const someViewportHasSync = viewports.some(viewport => {
+    const syncStates = syncGroupService.getSynchronizersForViewport(
+      viewport.viewportOptions.viewportId
+    );
+
+    const imageSync = syncStates.find(syncState => syncState.id === syncId);
+
+    return !!imageSync;
+  });
+
+  if (someViewportHasSync) {
+    return disableSync(syncId, servicesManager);
+  }
+
  // create synchronization group and add the viewports to it.
  viewports.forEach(gridViewport => {
    const { viewportId } = gridViewport.viewportOptions;
@@ -23,8 +38,8 @@ export default function toggleImageSliceSync({
      return;
    }
    syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
-      type: 'stackimage',
-      id: IMAGE_SLICE_SYNC_NAME,
+      type: 'imageSlice',
+      id: syncId,
      source: true,
      target: true,
    });
@@ -0,0 +1,94 @@
+const VOI_SYNC_NAME = 'VOI_SYNC';
+
+const getSyncId = modality => `${VOI_SYNC_NAME}_${modality}`;
+
+export default function toggleVOISliceSync({
+  servicesManager,
+  viewports: providedViewports,
+  syncId,
+}) {
+  const { syncGroupService, viewportGridService, displaySetService, cornerstoneViewportService } =
+    servicesManager.services;
+
+  const viewports =
+    providedViewports || groupViewportsByModality(viewportGridService, displaySetService);
+
+  // Todo: right now we don't have a proper way to define specific
+  // viewports to add to synchronizers, and right now it is global or not
+  // after we do that, we should do fine grained control of the synchronizers
+
+  // we can apply voi sync within each modality group
+  for (const [modality, modalityViewports] of Object.entries(viewports)) {
+    const syncIdToUse = syncId || getSyncId(modality);
+
+    const someViewportHasSync = modalityViewports.some(viewport => {
+      const syncStates = syncGroupService.getSynchronizersForViewport(
+        viewport.viewportOptions.viewportId
+      );
+
+      const imageSync = syncStates.find(syncState => syncState.id === syncIdToUse);
+
+      return !!imageSync;
+    });
+
+    if (someViewportHasSync) {
+      return disableSync(modalityViewports, syncIdToUse, servicesManager);
+    }
+
+    // create synchronization group and add the modalityViewports to it.
+    modalityViewports.forEach(gridViewport => {
+      const { viewportId } = gridViewport.viewportOptions;
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (!viewport) {
+        return;
+      }
+      syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
+        type: 'voi',
+        id: syncIdToUse,
+        source: true,
+        target: true,
+      });
+    });
+  }
+}
+
+function disableSync(modalityViewports, syncId, servicesManager) {
+  const { syncGroupService, cornerstoneViewportService } = servicesManager.services;
+
+  const viewports = modalityViewports;
+  viewports.forEach(gridViewport => {
+    const { viewportId } = gridViewport.viewportOptions;
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    syncGroupService.removeViewportFromSyncGroup(
+      viewport.id,
+      viewport.getRenderingEngine().id,
+      syncId
+    );
+  });
+}
+
+function groupViewportsByModality(viewportGridService, displaySetService) {
+  let { viewports } = viewportGridService.getState();
+
+  viewports = [...viewports.values()];
+
+  // group the viewports by modality
+  return viewports.reduce((acc, viewport) => {
+    const { displaySetInstanceUIDs } = viewport;
+    // Todo: add proper fusion support
+    const displaySetInstanceUID = displaySetInstanceUIDs[0];
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+    const modality = displaySet.Modality;
+    if (!acc[modality]) {
+      acc[modality] = [];
+    }
+
+    acc[modality].push(viewport);
+
+    return acc;
+  }, {});
+}
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+
+### Features
+
+* **worklist:** new investigational use text ([#3999](https://github.com/OHIF/Viewers/issues/3999)) ([45b68e8](https://github.com/OHIF/Viewers/commit/45b68e841dcb9e28a2ea991c37ee7ac4a8c5b71e))
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-default",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "Common/default features and functionality for basic image viewing",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -32,8 +32,8 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/i18n": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/i18n": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicomweb-client": "^0.10.4",
    "prop-types": "^15.6.2",
@@ -60,7 +60,6 @@ export default class ContextMenuController {
      return;
    }

-    console.log('Getting items from', menus);
    const items = ContextMenuItemsBuilder.getMenuItems(
      selectorProps || contextMenuProps,
      event,
@@ -70,8 +70,6 @@ export function findMenu(menus: Menu[], props?: Types.IProps, menuIdFilter?: str
    current = findIt.next();
  }

-  console.log('Menu chosen', menu?.id || 'NONE');
-
  return menu;
 }

@@ -5,6 +5,11 @@
 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 })
      .then(imageId => {
@@ -1,57 +1,53 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
+import { Tooltip } from '@ohif/ui';
 import classnames from 'classnames';
-import { useViewportGrid } from '@ohif/ui';
+import { useToolbar } from '@ohif/core';

-export default function Toolbar({
-  servicesManager,
-}: Types.Extensions.ExtensionParams): React.ReactElement {
-  const { toolbarService } = servicesManager.services;
+export function Toolbar({ servicesManager }) {
+  const { toolbarButtons, onInteraction } = useToolbar({
+    servicesManager,
+    buttonSection: 'primary',
+  });

-  const [viewportGrid, viewportGridService] = useViewportGrid();
-
-  const [toolbarButtons, setToolbarButtons] = useState([]);
-
-  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 = useCallback(
-    args => toolbarService.recordInteraction(args),
-    [toolbarService]
-  );
+  if (!toolbarButtons.length) {
+    return null;
+  }

  return (
    <>
      {toolbarButtons.map(toolDef => {
+        if (!toolDef) {
+          return null;
+        }
+
        const { id, Component, componentProps } = toolDef;
-        return (
-          // 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.
+        const { disabled } = componentProps;
+
+        const tool = (
+          <Component
+            key={id}
+            id={id}
+            onInteraction={onInteraction}
+            servicesManager={servicesManager}
+            {...componentProps}
+          />
+        );
+
+        return disabled ? (
+          <Tooltip
+            key={id}
+            position="bottom"
+            content={componentProps.label}
+            secondaryContent={'Not available on the current viewport'}
+          >
+            <div className={classnames('mr-1')}>{tool}</div>
+          </Tooltip>
+        ) : (
          <div
            key={id}
-            className={classnames('mr-1')}
+            className="mr-1"
          >
-            <Component
-              id={id}
-              {...componentProps}
-              onInteraction={onInteraction}
-              servicesManager={servicesManager}
-            />
+            {tool}
          </div>
        );
      })}
@@ -0,0 +1,35 @@
+import { ToolbarButton, ButtonGroup } from '@ohif/ui';
+import React, { useCallback } from 'react';
+
+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}
+          id={item.id}
+          size={size}
+          onClick={() => {
+            onInteraction({
+              groupId,
+              itemId: item.id,
+              commands: item.commands,
+            });
+          }}
+          // 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;
@@ -1,75 +0,0 @@
-import { ToolbarButton } from '@ohif/ui';
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-function ToolbarButtonWithServices({
-  id,
-  type,
-  commands,
-  onInteraction,
-  servicesManager,
-  ...props
-}) {
-  const { toolbarService } = servicesManager?.services || {};
-
-  const [buttonsState, setButtonState] = useState({
-    primaryToolId: '',
-    toggles: {},
-    groups: {},
-  });
-  const { primaryToolId } = buttonsState;
-
-  const isActive =
-    (type === 'tool' && id === primaryToolId) ||
-    (type === 'toggle' && buttonsState.toggles[id] === true);
-
-  useEffect(() => {
-    const { unsubscribe } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      state => {
-        setButtonState({ ...state });
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
-
-  return (
-    <ToolbarButton
-      commands={commands}
-      id={id}
-      type={type}
-      isActive={isActive}
-      onInteraction={onInteraction}
-      {...props}
-    />
-  );
-}
-
-ToolbarButtonWithServices.propTypes = {
-  id: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
-  commands: PropTypes.arrayOf(
-    PropTypes.shape({
-      commandName: PropTypes.string.isRequired,
-      context: PropTypes.string,
-    })
-  ),
-  onInteraction: PropTypes.func.isRequired,
-  servicesManager: PropTypes.shape({
-    services: PropTypes.shape({
-      toolbarService: PropTypes.shape({
-        subscribe: PropTypes.func.isRequired,
-        state: PropTypes.shape({
-          primaryToolId: PropTypes.string,
-          toggles: PropTypes.objectOf(PropTypes.bool),
-          groups: PropTypes.objectOf(PropTypes.any),
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-export default ToolbarButtonWithServices;
@@ -3,21 +3,20 @@ import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
 import { ServicesManager } from '@ohif/core';

-function ToolbarLayoutSelectorWithServices({ servicesManager, ...props }) {
-  const { toolbarService } = servicesManager.services;
+function ToolbarLayoutSelectorWithServices({ servicesManager, commands, ...props }) {
+  const { toolbarService, viewportGridService } = servicesManager.services;

-  const onSelection = useCallback(
-    props => {
-      toolbarService.recordInteraction({
-        interactionType: 'action',
-        commands: [
-          {
-            commandName: 'setViewportGridLayout',
-            commandOptions: { ...props },
-            context: 'DEFAULT',
-          },
-        ],
-      });
+  const onInteraction = useCallback(
+    args => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const refreshProps = {
+        viewportId,
+      };
+
+      if (props.onLayoutChange) {
+        props.onLayoutChange(args);
+      }
+      toolbarService.recordInteraction({ commands }, { ...args, refreshProps });
    },
    [toolbarService]
  );
@@ -25,12 +24,12 @@ function ToolbarLayoutSelectorWithServices({ servicesManager, ...props }) {
  return (
    <LayoutSelector
      {...props}
-      onSelection={onSelection}
+      onInteraction={onInteraction}
    />
  );
 }

-function LayoutSelector({ rows, columns, className, onSelection, ...rest }) {
+function LayoutSelector({ rows, columns, className, onInteraction, ...rest }) {
  const [isOpen, setIsOpen] = useState(false);

  const closeOnOutsideClick = () => {
@@ -62,7 +61,7 @@ function LayoutSelector({ rows, columns, className, onSelection, ...rest }) {
          <DropdownContent
            rows={rows}
            columns={columns}
-            onSelection={onSelection}
+            onSelection={onInteraction}
          />
        )
      }
@@ -1,11 +1,8 @@
-import { SplitButton, Icon, ToolbarButton } from '@ohif/ui';
-import React, { useEffect, useState } from 'react';
+import { SplitButton, ToolbarButton } from '@ohif/ui';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';

 function ToolbarSplitButtonWithServices({
-  isRadio,
-  isAction,
  groupId,
  primary,
  secondary,
@@ -16,123 +13,35 @@ 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) => ({
-      ...item,
-      index,
-      onClick: () => handleItemClick(item, index),
-    }));
-
-  const [buttonsState, setButtonState] = useState({
-    primaryToolId: '',
-    toggles: {},
-    groups: {},
-  });
-
-  const [state, setState] = 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 getSplitButtonItems = useCallback(
+    items =>
+      items.map((item, index) => ({
+        ...item,
+        index,
+        onClick: () => {
+          onInteraction({
+            groupId,
+            itemId: item.id,
+            commands: item.commands,
+          });
+        },
+      })),
+    []
+  );

  const PrimaryButtonComponent =
-    toolbarService?.getButtonComponentForUIType(state.primary.uiType) ?? ToolbarButton;
+    toolbarService?.getButtonComponentForUIType(primary.uiType) ?? ToolbarButton;

-  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 = ({ type, icon, label, t, id }) => {
-    const isActive = type === 'toggle' && toggles[id] === true;
-
-    return (
-      <div
-        className={classNames(
-          '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 && (
-          <span className="mr-4">
-            <Icon
-              name={icon}
-              className="h-5 w-5"
-            />
-          </span>
-        )}
-        <span className="mr-5">{t(label)}</span>
-      </div>
-    );
-  };
-
-  const listItemRenderer = renderer || DefaultListItemRenderer;
+  const listItemRenderer = renderer;

  return (
    <SplitButton
-      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 => (
        <PrimaryButtonComponent
@@ -146,11 +55,9 @@ function ToolbarSplitButtonWithServices({

 ToolbarSplitButtonWithServices.propTypes = {
  isRadio: PropTypes.bool,
-  isAction: PropTypes.bool,
  groupId: PropTypes.string,
  primary: PropTypes.shape({
    id: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
    uiType: PropTypes.string,
  }),
  secondary: PropTypes.shape({
@@ -158,15 +65,17 @@ ToolbarSplitButtonWithServices.propTypes = {
    icon: PropTypes.string.isRequired,
    label: PropTypes.string,
    tooltip: PropTypes.string.isRequired,
-    isActive: PropTypes.bool,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
  }),
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
-      type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
      icon: PropTypes.string,
      label: PropTypes.string,
      tooltip: PropTypes.string,
+      disabled: PropTypes.bool,
+      className: PropTypes.string,
    })
  ),
  renderer: PropTypes.func,
@@ -7,7 +7,7 @@ import { ErrorBoundary, UserPreferences, AboutModal, Header, useModal } from '@o
 import i18n from '@ohif/i18n';
 import { hotkeys } from '@ohif/core';
 import { useAppConfig } from '@state';
-import Toolbar from '../Toolbar/Toolbar';
+import { Toolbar } from '../Toolbar/Toolbar';

 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;

@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';

-import { SidePanel, ErrorBoundary, LoadingIndicatorProgress } from '@ohif/ui';
+import {
+  SidePanel,
+  ErrorBoundary,
+  LoadingIndicatorProgress,
+  InvestigationalUseDialog,
+} from '@ohif/ui';
 import { ServicesManager, HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';
@@ -43,22 +48,13 @@ function ViewerLayout({
  const getComponent = id => {
    const entry = extensionManager.getModuleEntry(id);

-    if (!entry) {
+    if (!entry || !entry.component) {
      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)`
+        `${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`
      );
    }

-    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`
-      );
-    }
-
-    return { entry, content };
+    return { entry, content: entry.component };
  };

  const getPanelData = id => {
@@ -71,6 +67,7 @@ function ViewerLayout({
      label: entry.label,
      name: entry.name,
      content,
+      contexts: entry.contexts,
    };
  };

@@ -152,6 +149,8 @@ function ViewerLayout({
          ) : null}
        </React.Fragment>
      </div>
+
+      <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
    </div>
  );
 }
@@ -18,6 +18,7 @@ export type HangingProtocolParams = {
  stageIndex?: number;
  activeStudyUID?: string;
  stageId?: string;
+  reset?: false;
 };

 export type UpdateViewportDisplaySetParams = {
@@ -107,41 +108,6 @@ const commandsModule = ({
      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
@@ -173,14 +139,12 @@ const commandsModule = ({
      stageIndex,
      reset = false,
    }: HangingProtocolParams): boolean => {
-      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, viewportGridStore, displaySetSelectorMap } =
          stateSyncReduce;
@@ -243,33 +207,9 @@ const commandsModule = ({
          `${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.',
@@ -639,56 +579,38 @@ const commandsModule = ({
    },
    clearMeasurements: {
      commandFn: actions.clearMeasurements,
-      storeContexts: [],
-      options: {},
    },
    displayNotification: {
      commandFn: actions.displayNotification,
-      storeContexts: [],
-      options: {},
    },
    setHangingProtocol: {
      commandFn: actions.setHangingProtocol,
-      storeContexts: [],
-      options: {},
    },
    toggleHangingProtocol: {
      commandFn: actions.toggleHangingProtocol,
-      storeContexts: [],
-      options: {},
    },
    navigateHistory: {
      commandFn: actions.navigateHistory,
-      storeContexts: [],
-      options: {},
    },
    nextStage: {
      commandFn: actions.deltaStage,
-      storeContexts: [],
      options: { direction: 1 },
    },
    previousStage: {
      commandFn: actions.deltaStage,
-      storeContexts: [],
      options: { direction: -1 },
    },
    setViewportGridLayout: {
      commandFn: actions.setViewportGridLayout,
-      storeContexts: [],
-      options: {},
    },
    toggleOneUp: {
      commandFn: actions.toggleOneUp,
-      storeContexts: [],
-      options: {},
    },
    openDICOMTagViewer: {
      commandFn: actions.openDICOMTagViewer,
    },
    updateViewportDisplaySet: {
      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: {},
    },
  };

@@ -93,8 +93,8 @@ export default function getCustomizationModule({ servicesManager, extensionManag
              instance && this.attribute
                ? instance[this.attribute]
                : this.contentF && typeof this.contentF === 'function'
-                ? this.contentF(props)
-                : null;
+                  ? this.contentF(props)
+                  : null;
            if (!value) {
              return null;
            }
@@ -1,39 +1,67 @@
 import ToolbarDivider from './Toolbar/ToolbarDivider';
 import ToolbarLayoutSelectorWithServices from './Toolbar/ToolbarLayoutSelector';
 import ToolbarSplitButtonWithServices from './Toolbar/ToolbarSplitButtonWithServices';
-import ToolbarButtonWithServices from './Toolbar/ToolbarButtonWithServices';
+import ToolbarButtonGroupWithServices from './Toolbar/ToolbarButtonGroupWithServices';
+import { ToolbarButton } from '@ohif/ui';
+
+const getClassName = isToggled => {
+  return {
+    className: isToggled
+      ? '!text-primary-active'
+      : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
+  };
+};

 export default function getToolbarModule({ commandsManager, servicesManager }) {
+  const { cineService } = servicesManager.services;
  return [
+    {
+      name: 'ohif.radioGroup',
+      defaultComponent: ToolbarButton,
+    },
    {
      name: 'ohif.divider',
      defaultComponent: ToolbarDivider,
-      clickHandler: () => {},
-    },
-    {
-      name: 'ohif.action',
-      defaultComponent: ToolbarButtonWithServices,
-      clickHandler: () => {},
-    },
-    {
-      name: 'ohif.radioGroup',
-      defaultComponent: ToolbarButtonWithServices,
-      clickHandler: () => {},
    },
    {
      name: 'ohif.splitButton',
      defaultComponent: ToolbarSplitButtonWithServices,
-      clickHandler: () => {},
    },
    {
      name: 'ohif.layoutSelector',
      defaultComponent: ToolbarLayoutSelectorWithServices,
-      clickHandler: (evt, clickedBtn, btnSectionName) => {},
    },
    {
-      name: 'ohif.toggle',
-      defaultComponent: ToolbarButtonWithServices,
-      clickHandler: () => {},
+      name: 'ohif.buttonGroup',
+      defaultComponent: 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: 'evaluate.cine',
+      evaluate: () => {
+        const isToggled = cineService.getState().isCineEnabled;
+        return getClassName(isToggled);
+      },
    },
  ];
 }
@@ -10,8 +10,13 @@ const metadataProvider = classes.MetadataProvider;
 * @param {Object} servicesManager
 * @param {Object} configuration
 */
-export default function init({ servicesManager, configuration = {} }): void {
-  const { stateSyncService } = servicesManager.services;
+export default function init({ servicesManager, configuration = {}, commandsManager }): void {
+  const { stateSyncService, toolbarService, cineService, viewportGridService } =
+    servicesManager.services;
+
+  toolbarService.registerEventForToolbarUpdate(cineService, [
+    cineService.EVENTS.CINE_STATE_CHANGED,
+  ]);
  // Add
  DicomMetadataStore.subscribe(DicomMetadataStore.EVENTS.INSTANCES_ADDED, handlePETImageMetadata);

@@ -24,6 +29,10 @@ export default function init({ servicesManager, configuration = {} }): void {
  // Used to recover manual changes to the layout of a stage.
  stateSyncService.register('viewportGridStore', { 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
@@ -38,7 +47,7 @@ export default function init({ servicesManager, configuration = {} }): void {
  });

  // 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 });

@@ -46,6 +55,45 @@ export default function init({ servicesManager, configuration = {} }): void {
  // changes numRows and numCols, the viewports can be remembers and then replaced
  // afterwards.
  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, StudyInstanceUID }) => {
@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-microscopy
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-dicom-microscopy
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-microscopy",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for DICOM microscopy",
  "author": "Bill Wallace, md-prog",
  "license": "MIT",
@@ -30,10 +30,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/i18n": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/i18n": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -11,16 +11,6 @@ import dcmjs from 'dcmjs';
 import cleanDenaturalizedDataset from './utils/cleanDenaturalizedDataset';
 import MicroscopyService from './services/MicroscopyService';

-function transformImageTypeUnnaturalized(entry) {
-  if (entry.vr === 'CS') {
-    return {
-      vr: 'US',
-      Value: entry.Value[0].split('\\'),
-    };
-  }
-  return entry;
-}
-
 class DicomMicroscopyViewport extends Component {
  state = {
    error: null as any,
@@ -250,7 +240,6 @@ class DicomMicroscopyViewport extends Component {

  componentDidMount() {
    const { displaySets, viewportOptions } = this.props;
-    const { viewportId } = viewportOptions;
    // Todo-rename: this is always getting the 0
    const displaySet = displaySets[0];
    this.installOpenLayersRenderer(this.container.current, displaySet).then(() => {
@@ -124,7 +124,7 @@ export default function getCommandsModule({
      }

      // overview
-      const { activeViewportId, viewports } = viewportGridService.getState();
+      const { activeViewportId } = viewportGridService.getState();
      microscopyService.toggleOverviewMap(activeViewportId);
    },
    toggleAnnotations: () => {
@@ -135,28 +135,18 @@ export default function getCommandsModule({
  const definitions = {
    deleteMeasurement: {
      commandFn: actions.deleteMeasurement,
-      storeContexts: [] as any[],
-      options: {},
    },
    setLabel: {
      commandFn: actions.setLabel,
-      storeContexts: [] as any[],
-      options: {},
    },
    setToolActive: {
      commandFn: actions.setToolActive,
-      storeContexts: [] as any[],
-      options: {},
    },
    toggleOverlays: {
      commandFn: actions.toggleOverlays,
-      storeContexts: [] as any[],
-      options: {},
    },
    toggleAnnotations: {
      commandFn: actions.toggleAnnotations,
-      storeContexts: [] as any[],
-      options: {},
    },
  };

@@ -2,6 +2,7 @@ import { id } from './id';
 import React, { Suspense, useMemo } from 'react';
 import getPanelModule from './getPanelModule';
 import getCommandsModule from './getCommandsModule';
+import { Types } from '@ohif/core';

 import { useViewportGrid } from '@ohif/ui';
 import getDicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler';
@@ -23,14 +24,14 @@ const MicroscopyViewport = props => {
 /**
 * You can remove any of the following modules if you don't need them.
 */
-export default {
+const extension: Types.Extensions.Extension = {
  /**
   * Only required property. Should be a unique value across all extensions.
   * You ID can be anything you want, but it should be unique.
   */
  id,

-  async preRegistration({ servicesManager, commandsManager, configuration = {}, appConfig }) {
+  async preRegistration({ servicesManager }) {
    servicesManager.registerService(MicroscopyService.REGISTRATION(servicesManager));
  },

@@ -90,6 +91,45 @@ export default {
    ];
  },

+  getToolbarModule({ servicesManager }) {
+    return [
+      {
+        name: 'evaluate.microscopyTool',
+        evaluate: ({ button }) => {
+          const { microscopyService } = servicesManager.services;
+
+          const activeInteractions = microscopyService.getActiveInteractions();
+
+          const isPrimaryActive = activeInteractions.find(interactions => {
+            const sameMouseButton = interactions[1].bindings.mouseButtons.includes('left');
+
+            if (!sameMouseButton) {
+              return false;
+            }
+
+            const notDraw = interactions[0] !== 'draw';
+
+            // there seems to be a custom logic for draw tool for some reason
+            return notDraw
+              ? interactions[0] === button.id
+              : interactions[1].geometryType === button.id;
+          });
+
+          return {
+            disabled: false,
+            className: isPrimaryActive
+              ? '!text-black bg-primary-light'
+              : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+            // Todo: isActive right now is used for nested buttons where the primary
+            // button needs to be fully rounded (vs partial rounded) when active
+            // otherwise it does not have any other use
+            isActive: isPrimaryActive,
+          };
+        },
+      },
+    ];
+  },
+
  /**
   * SopClassHandlerModule should provide a list of sop class handlers that will be
   * available in OHIF for Modes to consume and use to create displaySets from Series.
@@ -113,3 +153,5 @@ export default {

  getCommandsModule,
 };
+
+export default extension;
@@ -573,6 +573,10 @@ export default class MicroscopyService extends PubSubService {
    this.activeInteractions = interactions;
  }

+  getActiveInteractions() {
+    return this.activeInteractions;
+  }
+
  /**
   * Triggers the relabelling process for the given RoiAnnotation instance, by
   * publishing the RELABEL event to notify the subscribers
@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-pdf
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-dicom-pdf
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-pdf",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for PDF display",
  "author": "OHIF",
  "license": "MIT",
@@ -30,8 +30,8 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -41,18 +41,6 @@ const dicomPDFExtension = {

    return [{ name: 'dicom-pdf', component: ExtendedOHIFCornerstonePdfViewport }];
  },
-  // getCommandsModule({ servicesManager }) {
-  //   return {
-  //     definitions: {
-  //       setToolActive: {
-  //         commandFn: () => null,
-  //         storeContexts: [],
-  //         options: {},
-  //       },
-  //     },
-  //     defaultContext: 'ACTIVE_VIEWPORT::PDF',
-  // };
-  // },
  getSopClassHandlerModule,
 };

@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-video
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-dicom-video
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-video",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for video display",
  "author": "OHIF",
  "license": "MIT",
@@ -30,8 +30,8 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -42,19 +42,6 @@ const dicomVideoExtension = {

    return [{ name: 'dicom-video', component: ExtendedOHIFCornerstoneVideoViewport }];
  },
-  // getCommandsModule({ servicesManager }) {
-  //   return {
-  //     definitions: {
-  //       setToolActive: {
-  //         commandFn: ({ toolName, element }) => {
-  //         },
-  //         storeContexts: [],
-  //         options: {},
-  //       },
-  //     },
-  //     defaultContext: 'ACTIVE_VIEWPORT::VIDEO',
-  //   };
-  // },
  getSopClassHandlerModule,
 };

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+
+### Bug Fixes
+
+* **SR display:** and the token based navigation ([#3995](https://github.com/OHIF/Viewers/issues/3995)) ([feed230](https://github.com/OHIF/Viewers/commit/feed2304c124dc2facc7a7371ed9851548c223c5))
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-measurement-tracking
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-measurement-tracking",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "Tracking features and functionality for basic image viewing",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -32,11 +32,11 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@cornerstonejs/core": "^1.63.4",
-    "@cornerstonejs/tools": "^1.63.4",
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@cornerstonejs/core": "^1.66.7",
+    "@cornerstonejs/tools": "^1.66.7",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "classnames": "^2.3.2",
    "dcmjs": "^0.29.12",
    "lodash.debounce": "^4.17.21",
@@ -48,7 +48,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/ui": "3.8.0-beta.64",
    "@xstate/react": "^3.2.2",
    "xstate": "^4.10.0"
  }
@@ -5,6 +5,12 @@
 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 })
      .then(imageId => {
@@ -330,12 +330,12 @@ function _getStatusComponent(isTracked) {
            <div className="ml-4 flex">
              <span className="text-common-light text-base">
                {isTracked ? (
-                  <>
-                    {t('Series is tracked and can be viewed in the measurement panel')}
-                  </>
+                  <>{t('Series is tracked and can be viewed in the measurement panel')}</>
                ) : (
                  <>
-                    {t('Measurements for untracked series will not be shown in the measurements panel')}
+                    {t(
+                      'Measurements for untracked series will not be shown in the measurements panel'
+                    )}
                  </>
                )}
              </span>
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-test
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-test
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-test",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension used inside e2e testing",
  "author": "OHIF",
  "license": "MIT",
@@ -30,8 +30,8 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "0.29.11",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/extension-tmtv
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/extension-tmtv
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-tmtv",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF extension for Total Metabolic Tumor Volume",
  "author": "OHIF",
  "license": "MIT",
@@ -30,8 +30,8 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/ui": "3.8.0-beta.56",
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/ui": "3.8.0-beta.64",
    "dcmjs": "^0.29.12",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -109,23 +109,6 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
      throw new Error('No ptDisplaySet found');
    }

-    const toolGroupIds = toolGroupService.getToolGroupIds();
-
-    // Todo: we don't have a proper way to perform a toggle command and update the
-    // state for the toolbar, so here, we manually toggle the toolbar
-
-    // Todo: Crosshairs have bugs for the camera reset currently, so we need to
-    // force turn it off before we update the metadata
-    toolGroupIds.forEach(toolGroupId => {
-      commandsManager.runCommand('toggleCrosshairs', {
-        toolGroupId,
-        toggledState: false,
-      });
-    });
-
-    toolbarService.state.toggles['Crosshairs'] = false;
-    toolbarService._broadcastEvent(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED);
-
    // metadata should be dcmjs naturalized
    DicomMetadataStore.updateMetadataForSeries(
      ptDisplaySet.StudyInstanceUID,
@@ -135,6 +118,12 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {

    // update the displaySets
    displaySetService.setDisplaySetMetadataInvalidated(ptDisplaySet.displaySetInstanceUID);
+
+    // Crosshair position depends on the metadata values such as the positioning interaction
+    // between series, so when the metadata is updated, the crosshairs need to be reset.
+    setTimeout(() => {
+      commandsManager.runCommand('resetCrosshairs');
+    }, 0);
  }
  return (
    <div className="invisible-scrollbar overflow-y-auto overflow-x-hidden">
@@ -530,83 +530,51 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
  const definitions = {
    setEndSliceForROIThresholdTool: {
      commandFn: actions.setEndSliceForROIThresholdTool,
-      storeContexts: [],
-      options: {},
    },
    setStartSliceForROIThresholdTool: {
      commandFn: actions.setStartSliceForROIThresholdTool,
-      storeContexts: [],
-      options: {},
    },
    getMatchingPTDisplaySet: {
      commandFn: actions.getMatchingPTDisplaySet,
-      storeContexts: [],
-      options: {},
    },
    getPTMetadata: {
      commandFn: actions.getPTMetadata,
-      storeContexts: [],
-      options: {},
    },
    createNewLabelmapFromPT: {
      commandFn: actions.createNewLabelmapFromPT,
-      storeContexts: [],
-      options: {},
    },
    setSegmentationActiveForToolGroups: {
      commandFn: actions.setSegmentationActiveForToolGroups,
-      storeContexts: [],
-      options: {},
    },
    thresholdSegmentationByRectangleROITool: {
      commandFn: actions.thresholdSegmentationByRectangleROITool,
-      storeContexts: [],
-      options: {},
    },
    getTotalLesionGlycolysis: {
      commandFn: actions.getTotalLesionGlycolysis,
-      storeContexts: [],
-      options: {},
    },
    calculateSuvPeak: {
      commandFn: actions.calculateSuvPeak,
-      storeContexts: [],
-      options: {},
    },
    getLesionStats: {
      commandFn: actions.getLesionStats,
-      storeContexts: [],
-      options: {},
    },
    calculateTMTV: {
      commandFn: actions.calculateTMTV,
-      storeContexts: [],
-      options: {},
    },
    exportTMTVReportCSV: {
      commandFn: actions.exportTMTVReportCSV,
-      storeContexts: [],
-      options: {},
    },
    createTMTVRTReport: {
      commandFn: actions.createTMTVRTReport,
-      storeContexts: [],
-      options: {},
    },
    getSegmentationCSVReport: {
      commandFn: actions.getSegmentationCSVReport,
-      storeContexts: [],
-      options: {},
    },
    exportRTReportForAnnotations: {
      commandFn: actions.exportRTReportForAnnotations,
-      storeContexts: [],
-      options: {},
    },
    setFusionPTColormap: {
      commandFn: actions.setFusionPTColormap,
-      storeContexts: [],
-      options: {},
    },
  };

@@ -14,7 +14,7 @@ const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
 * @param {Object} configuration
 * @param {Object|Array} configuration.csToolsConfig
 */
-export default function init({ servicesManager, extensionManager }) {
+export default function init({ servicesManager }) {
  const { measurementService, displaySetService, cornerstoneViewportService } =
    servicesManager.services;

@@ -38,6 +38,5 @@ export default function init({ servicesManager, extensionManager }) {
    RectangleROIStartEndThreshold.toAnnotation,
    RectangleROIStartEndThreshold.toMeasurement
  );
-
  colormaps.forEach(registerColormap);
 }
@@ -1,5 +1,5 @@
 {
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "packages": ["extensions/*", "platform/*", "modes/*"],
  "npmClient": "yarn"
 }
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/mode-basic-dev-mode
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/mode-basic-dev-mode
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/mode-basic-dev-mode",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "Basic OHIF Viewer Using Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -31,12 +31,12 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/extension-dicom-pdf": "3.8.0-beta.56",
-    "@ohif/extension-dicom-video": "3.8.0-beta.56"
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/extension-dicom-pdf": "3.8.0-beta.64",
+    "@ohif/extension-dicom-video": "3.8.0-beta.64"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -89,39 +89,8 @@ function modeFactory({ modeConfiguration }) {
        // disabled
      };

-      const toolGroupId = 'default';
-      toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+      toolGroupService.createToolGroupAndAddTools('default', tools);

-      let unsubscribe;
-
-      const activateTool = () => {
-        toolbarService.recordInteraction({
-          groupId: 'WindowLevel',
-          interactionType: 'tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'WindowLevel',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-        });
-
-        // We don't need to reset the active tool whenever a viewport is getting
-        // added to the toolGroup.
-        unsubscribe();
-      };
-
-      // Since we only have one viewport for the basic cs3d mode and it has
-      // only one hanging protocol, we can just use the first viewport
-      ({ unsubscribe } = toolGroupService.subscribe(
-        toolGroupService.EVENTS.VIEWPORT_ADDED,
-        activateTool
-      ));
-
-      toolbarService.init(extensionManager);
      toolbarService.addButtons(toolbarButtons);
      toolbarService.createButtonSection('primary', [
        'MeasurementTools',
@@ -133,8 +102,15 @@ function modeFactory({ modeConfiguration }) {
      ]);
    },
    onModeExit: ({ servicesManager }) => {
-      const { toolGroupService, measurementService, toolbarService } = servicesManager.services;
-
+      const {
+        toolGroupService,
+        measurementService,
+        toolbarService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+      uiDialogService.dismissAll();
+      uiModalService.hide();
      toolGroupService.destroy();
    },
    validationTags: {
@@ -145,7 +121,10 @@ function modeFactory({ modeConfiguration }) {
      const modalities_list = modalities.split('\\');

      // Slide Microscopy modality not supported by basic mode yet
-      return !modalities_list.includes('SM');
+      return {
+        valid: !modalities_list.includes('SM'),
+        description: 'The mode does not support the following modalities: SM',
+      };
    },
    routes: [
      {
@@ -1,47 +1,16 @@
-// TODO: torn, can either bake this here; or have to create a whole new button type
-// Only ways that you can pass in a custom React component for render :l
 import {
-  // ExpandableToolbarButton,
-  // ListMenu,
  WindowLevelMenuItem,
 } from '@ohif/ui';
-import { defaults } from '@ohif/core';
+import { defaults, ToolbarService } from '@ohif/core';
+import type { Button } from '@ohif/core/types';

 const { windowLevelPresets } = defaults;
-/**
- *
- * @param {*} type - 'tool' | 'action' | 'toggle'
- * @param {*} id
- * @param {*} icon
- * @param {*} label
- */
-function _createButton(type, id, icon, label, commands, tooltip) {
-  return {
-    id,
-    icon,
-    label,
-    type,
-    commands,
-    tooltip,
-  };
-}

-const _createActionButton = _createButton.bind(null, 'action');
-const _createToggleButton = _createButton.bind(null, 'toggle');
-const _createToolButton = _createButton.bind(null, 'tool');
-
-/**
- *
- * @param {*} preset - preset number (from above import)
- * @param {*} title
- * @param {*} subtitle
- */
 function _createWwwcPreset(preset, title, subtitle) {
  return {
    id: preset.toString(),
    title,
    subtitle,
-    type: 'action',
    commands: [
      {
        commandName: 'setWindowLevel',
@@ -54,147 +23,91 @@ function _createWwwcPreset(preset, title, subtitle) {
  };
 }

-const toolbarButtons = [
-  // Measurement
+function _createSetToolActiveCommands(toolName, toolGroupIds = ['default', 'mpr', ]) {
+  return toolGroupIds.map(toolGroupId => ({
+    commandName: 'setToolActive',
+    commandOptions: {
+      toolGroupId,
+      toolName,
+    },
+    context: 'CORNERSTONE',
+  }));
+}
+
+const toolbarButtons: Button[] = [
  {
    id: 'MeasurementTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'MeasurementTools',
-      isRadio: true, // ?
-      // Switch?
-      primary: _createToolButton(
-        'Length',
-        'tool-length',
-        'Length',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'Length',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Length'
-      ),
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: ToolbarService.createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: _createSetToolActiveCommands('Length'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
-        label: '',
-        isActive: true,
        tooltip: 'More Measure Tools',
      },
      items: [
-        _createToolButton(
-          'Length',
-          'tool-length',
-          'Length',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Length',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Length Tool'
-        ),
-        _createToolButton(
-          'Bidirectional',
-          'tool-bidirectional',
-          'Bidirectional',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Bidirectional',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Bidirectional Tool'
-        ),
-        _createToolButton(
-          'EllipticalROI',
-          'tool-elipse',
-          'Ellipse',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'EllipticalROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Ellipse Tool'
-        ),
-        _createToolButton(
-          'CircleROI',
-          'tool-circle',
-          'Circle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'CircleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Circle Tool'
-        ),
+        ToolbarService.createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: _createSetToolActiveCommands('Bidirectional'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: _createSetToolActiveCommands('EllipticalROI'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: _createSetToolActiveCommands('CircleROI'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
      ],
    },
  },
-  // Zoom..
  {
    id: 'Zoom',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'tool',
      icon: 'tool-zoom',
      label: 'Zoom',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'Zoom',
-          },
-          context: 'CORNERSTONE',
-        },
-      ],
+      commands: _createSetToolActiveCommands('Zoom'),
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
-  // Window Level + Presets...
  {
    id: 'WindowLevel',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'WindowLevel',
-      primary: _createToolButton(
-        'WindowLevel',
-        'tool-window-level',
-        'Window Level',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Window Level'
-      ),
+      primary: ToolbarService.createButton({
+        id: 'WindowLevel',
+        icon: 'tool-window-level',
+        label: 'Window Level',
+        tooltip: 'Window Level',
+        commands: _createSetToolActiveCommands('WindowLevel'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
-        label: 'W/L Manual',
-        isActive: true,
        tooltip: 'W/L Presets',
      },
-      isAction: true, // ?
      renderer: WindowLevelMenuItem,
      items: [
        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
@@ -205,157 +118,141 @@ const toolbarButtons = [
      ],
    },
  },
-  // Pan...
  {
    id: 'Pan',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'tool',
      icon: 'tool-move',
      label: 'Pan',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'Pan',
-          },
-          context: 'CORNERSTONE',
-        },
-      ],
+      commands: _createSetToolActiveCommands('Pan'),
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
  {
    id: 'Capture',
-    type: 'ohif.action',
+    uiType: 'ohif.radioGroup',
    props: {
      icon: 'tool-capture',
      label: 'Capture',
-      type: 'action',
      commands: [
        {
          commandName: 'showDownloadViewportModal',
-          commandOptions: {},
          context: 'CORNERSTONE',
        },
      ],
+      evaluate: 'evaluate.action',
+    },
+  },
+   {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 3,
+      evaluate: 'evaluate.action',
+      commands: [
+        {
+          commandName: 'setViewportGridLayout',
+        },
+      ],
    },
  },
  {
-    id: 'Layout',
-    type: 'ohif.layoutSelector',
-  },
-  // More...
-  {
-    id: 'MoreTools',
-    type: 'ohif.splitButton',
-    props: {
-      isRadio: true, // ?
-      groupId: 'MoreTools',
-      primary: _createActionButton(
-        'Reset',
-        'tool-reset',
-        'Reset View',
-        [
+  id: 'MoreTools',
+  uiType: 'ohif.splitButton',
+  props: {
+    groupId: 'MoreTools',
+    evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+    primary: ToolbarService.createButton({
+      id: 'Reset',
+      icon: 'tool-reset',
+      label: 'Reset View',
+      tooltip: 'Reset View',
+      commands: [
+        {
+          commandName: 'resetViewport',
+          context: 'CORNERSTONE',
+        },
+      ],
+      evaluate: 'evaluate.action',
+    }),
+    secondary: {
+      icon: 'chevron-down',
+      tooltip: 'More Tools',
+    },
+    items: [
+      ToolbarService.createButton({
+      id: 'Reset',
+      icon: 'tool-reset',
+      label: 'Reset View',
+      tooltip: 'Reset View',
+      commands: [
+        {
+          commandName: 'resetViewport',
+          context: 'CORNERSTONE',
+        },
+      ],
+      evaluate: 'evaluate.action',
+    }),
+      ToolbarService.createButton({
+        id: 'RotateRight',
+        icon: 'tool-rotate-right',
+        label: 'Rotate Right',
+        tooltip: 'Rotate Right +90',
+        commands: [
          {
-            commandName: 'resetViewport',
-            commandOptions: {},
+            commandName: 'rotateViewportCW',
            context: 'CORNERSTONE',
          },
        ],
-        'Reset'
-      ),
-      secondary: {
-        icon: 'chevron-down',
-        label: '',
-        isActive: true,
-        tooltip: 'More Tools',
-      },
-      items: [
-        _createActionButton(
-          'Reset',
-          'tool-reset',
-          'Reset View',
-          [
-            {
-              commandName: 'resetViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Reset'
-        ),
-        _createActionButton(
-          'rotate-right',
-          'tool-rotate-right',
-          'Rotate Right',
-          [
-            {
-              commandName: 'rotateViewportCW',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rotate +90'
-        ),
-        _createActionButton(
-          'flip-horizontal',
-          'tool-flip-horizontal',
-          'Flip Horizontally',
-          [
-            {
-              commandName: 'flipViewportHorizontal',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Flip Horizontal'
-        ),
-        _createToolButton(
-          'StackScroll',
-          'tool-stack-scroll',
-          'Stack Scroll',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'StackScroll',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Stack Scroll'
-        ),
-        _createActionButton(
-          'invert',
-          'tool-invert',
-          'Invert',
-          [
-            {
-              commandName: 'invertViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Invert Colors'
-        ),
-        _createToolButton(
-          'CalibrationLine',
-          'tool-calibration',
-          'Calibration',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'CalibrationLine',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Calibration Line'
-        ),
-      ],
-    },
+        evaluate: 'evaluate.action',
+      }),
+      ToolbarService.createButton({
+        id: 'FlipHorizontal',
+        icon: 'tool-flip-horizontal',
+        label: 'Flip Horizontally',
+        tooltip: 'Flip Horizontally',
+        commands: [
+          {
+            commandName: 'flipViewportHorizontal',
+            context: 'CORNERSTONE',
+          },
+        ],
+        evaluate: 'evaluate.action',
+      }),
+      ToolbarService.createButton({
+        id: 'StackScroll',
+        icon: 'tool-stack-scroll',
+        label: 'Stack Scroll',
+        tooltip: 'Stack Scroll',
+        commands: _createSetToolActiveCommands('StackScroll'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      ToolbarService.createButton({
+        id: 'Invert',
+        icon: 'tool-invert',
+        label: 'Invert Colors',
+        tooltip: 'Invert Colors',
+        commands: [
+          {
+            commandName: 'invertViewport',
+            context: 'CORNERSTONE',
+          },
+        ],
+        evaluate: 'evaluate.action',
+      }),
+      ToolbarService.createButton({
+        id: 'CalibrationLine',
+        icon: 'tool-calibration',
+        label: 'Calibration Line',
+        tooltip: 'Calibration Line',
+        commands: _createSetToolActiveCommands('CalibrationLine'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+
+    ],
  },
+},
 ];

 export default toolbarButtons;
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/mode-test
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/mode-test
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/mode-test",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "Basic mode for testing",
  "author": "OHIF",
  "license": "MIT",
@@ -34,14 +34,14 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/extension-dicom-pdf": "3.8.0-beta.56",
-    "@ohif/extension-dicom-video": "3.8.0-beta.56",
-    "@ohif/extension-measurement-tracking": "3.8.0-beta.56",
-    "@ohif/extension-test": "3.8.0-beta.56"
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/extension-dicom-pdf": "3.8.0-beta.64",
+    "@ohif/extension-dicom-video": "3.8.0-beta.64",
+    "@ohif/extension-measurement-tracking": "3.8.0-beta.64",
+    "@ohif/extension-test": "3.8.0-beta.64"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -3,16 +3,12 @@ import toolbarButtons from './toolbarButtons';
 import { id } from './id';
 import initToolGroups from './initToolGroups';
 import moreTools from './moreTools';
-import moreToolsMpr from './moreToolsMpr';
 import i18n from 'i18next';

 // Allow this mode by excluding non-imaging modalities such as SR, SEG
 // Also, SM is not a simple imaging modalities, so exclude it.
 const NON_IMAGE_MODALITIES = ['SM', 'ECG', 'SR', 'SEG'];

-const DEFAULT_TOOL_GROUP_ID = 'default';
-const MPR_TOOL_GROUP_ID = 'mpr';
-
 const ohif = {
  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
@@ -82,50 +78,8 @@ function modeFactory() {
        '@ohif/extension-test.customizationModule.custom-context-menu',
      ]);

-      let unsubscribe;
-      toolbarService.setDefaultTool({
-        groupId: 'WindowLevel',
-        itemId: 'WindowLevel',
-        interactionType: 'tool',
-        commands: [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-      });
-
-      const activateTool = () => {
-        toolbarService.recordInteraction(toolbarService.getDefaultTool());
-
-        // We don't need to reset the active tool whenever a viewport is getting
-        // added to the toolGroup.
-        unsubscribe();
-      };
-
-      // Since we only have one viewport for the basic cs3d mode and it has
-      // only one hanging protocol, we can just use the first viewport
-      ({ unsubscribe } = toolGroupService.subscribe(
-        toolGroupService.EVENTS.VIEWPORT_ADDED,
-        activateTool
-      ));
-
-      toolbarService.init(extensionManager);
-      toolbarService.addButtons([...toolbarButtons, ...moreTools, ...moreToolsMpr]);
-      toolbarService.createButtonSection(DEFAULT_TOOL_GROUP_ID, [
-        'MeasurementTools',
-        'Zoom',
-        'WindowLevel',
-        'Pan',
-        'Capture',
-        'Layout',
-        'MPR',
-        'MoreTools',
-      ]);
-      toolbarService.createButtonSection(MPR_TOOL_GROUP_ID, [
+      toolbarService.addButtons([...toolbarButtons, ...moreTools]);
+      toolbarService.createButtonSection('primary', [
        'MeasurementTools',
        'Zoom',
        'WindowLevel',
@@ -134,7 +88,7 @@ function modeFactory() {
        'Layout',
        'MPR',
        'Crosshairs',
-        'MoreToolsMpr',
+        'MoreTools',
      ]);
    },
    onModeExit: ({ servicesManager }) => {
@@ -143,8 +97,12 @@ function modeFactory() {
        syncGroupService,
        segmentationService,
        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
      } = servicesManager.services;

+      uiDialogService.dismissAll();
+      uiModalService.hide();
      toolGroupService.destroy();
      syncGroupService.destroy();
      segmentationService.destroy();
@@ -159,8 +117,12 @@ function modeFactory() {
      const modalities_list = modalities.split('\\');

      // Exclude non-image modalities
-      return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
-        .length;
+      return {
+        valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
+          .length,
+        description:
+          'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG',
+      };
    },
    routes: [
      {
@@ -1,228 +1,183 @@
 import type { RunCommand } from '@ohif/core/types';
 import { EVENTS } from '@cornerstonejs/core';
-import { ToolbarService } from '@ohif/core';
+import { ToolbarService, ViewportGridService } from '@ohif/core';
+import { setToolActiveToolbar } from './toolbarButtons';
+const { createButton } = ToolbarService;

-const ReferenceLinesCommands: RunCommand = [
+const ReferenceLinesListeners: RunCommand = [
  {
    commandName: 'setSourceViewportForReferenceLinesTool',
    context: 'CORNERSTONE',
  },
-  {
-    commandName: 'setToolActive',
-    commandOptions: {
-      toolName: 'ReferenceLines',
-    },
-    context: 'CORNERSTONE',
-  },
 ];

 const moreTools = [
  {
    id: 'MoreTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
-      isRadio: true, // ?
      groupId: 'MoreTools',
-      primary: ToolbarService._createActionButton(
-        'Reset',
-        'tool-reset',
-        'Reset View',
-        [
-          {
-            commandName: 'resetViewport',
-          },
-        ],
-        'Reset'
-      ),
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        tooltip: 'Reset View',
+        label: 'Reset',
+        commands: 'resetViewport',
+        evaluate: 'evaluate.action',
+      }),
      secondary: {
        icon: 'chevron-down',
        label: '',
-        isActive: true,
        tooltip: 'More Tools',
      },
      items: [
-        ToolbarService._createActionButton(
-          'Reset',
-          'tool-reset',
-          'Reset View',
-          [
-            {
-              commandName: 'resetViewport',
+        createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: 'resetViewport',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'rotate-right',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate +90',
+          commands: 'rotateViewportCW',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'flipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontal',
+          tooltip: 'Flip Horizontally',
+          commands: 'flipViewportHorizontal',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'ImageSliceSync',
+          icon: 'link',
+          label: 'Image Slice Sync',
+          tooltip: 'Enable position synchronization on stack viewports',
+          commands: {
+            commandName: 'toggleSynchronizer',
+            commandOptions: {
+              type: 'imageSlice',
            },
-          ],
-          'Reset'
-        ),
-        ToolbarService._createActionButton(
-          'rotate-right',
-          'tool-rotate-right',
-          'Rotate Right',
-          [
-            {
-              commandName: 'rotateViewportCW',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rotate +90'
-        ),
-        ToolbarService._createActionButton(
-          'flip-horizontal',
-          'tool-flip-horizontal',
-          'Flip Horizontally',
-          [
-            {
-              commandName: 'flipViewportHorizontal',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Flip Horizontally'
-        ),
-        ToolbarService._createToggleButton(
-          'ImageSliceSync',
-          'link',
-          'Image Slice Sync',
-          [
-            {
+          },
+          listeners: {
+            [EVENTS.STACK_VIEWPORT_NEW_STACK]: {
              commandName: 'toggleImageSliceSync',
+              commandOptions: { toggledState: true },
            },
-          ],
-          'Enable position synchronization on stack viewports',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: {
-                commandName: 'toggleImageSliceSync',
-                commandOptions: { toggledState: true },
-              },
+          },
+          evaluate: 'evaluate.cornerstone.synchronizer',
+        }),
+        createButton({
+          id: 'ReferenceLines',
+          icon: 'tool-referenceLines',
+          label: 'Reference Lines',
+          tooltip: 'Show Reference Lines',
+          commands: {
+            commandName: 'setToolEnabled',
+            commandOptions: {
+              toolName: 'ReferenceLines',
+              toggle: true,
            },
-          }
-        ),
-        ToolbarService._createToggleButton(
-          'ReferenceLines',
-          'tool-referenceLines', // change this with the new icon
-          'Reference Lines',
-          ReferenceLinesCommands,
-          'Show Reference Lines',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: ReferenceLinesCommands,
-              [EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesCommands,
+          },
+          listeners: {
+            [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+            [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'ImageOverlay',
+          icon: 'toggle-dicom-overlay',
+          label: 'Image Overlay',
+          tooltip: 'Toggle Image Overlay',
+          commands: {
+            commandName: 'setToolEnabled',
+            commandOptions: {
+              toolName: 'ImageOverlayViewer',
+              toggle: true,
            },
-          }
-        ),
-        ToolbarService._createToolButton(
-          'StackScroll',
-          'tool-stack-scroll',
-          'Stack Scroll',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'StackScroll',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Stack Scroll'
-        ),
-        ToolbarService._createActionButton(
-          'invert',
-          'tool-invert',
-          'Invert',
-          [
-            {
-              commandName: 'invertViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Invert Colors'
-        ),
-        ToolbarService._createToolButton(
-          'Probe',
-          'tool-probe',
-          'Probe',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'DragProbe',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Probe'
-        ),
-        ToolbarService._createToggleButton(
-          'cine',
-          'tool-cine',
-          'Cine',
-          [
-            {
-              commandName: 'toggleCine',
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Cine'
-        ),
-        ToolbarService._createToolButton(
-          'Angle',
-          'tool-angle',
-          'Angle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Angle',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Angle'
-        ),
-        ToolbarService._createToolButton(
-          'Magnify',
-          'tool-magnify',
-          'Magnify',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Magnify',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Magnify'
-        ),
-        ToolbarService._createToolButton(
-          'Rectangle',
-          'tool-rectangle',
-          'Rectangle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'RectangleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rectangle'
-        ),
-        ToolbarService._createActionButton(
-          'TagBrowser',
-          'list-bullets',
-          'Dicom Tag Browser',
-          [
-            {
-              commandName: 'openDICOMTagViewer',
-              commandOptions: {},
-              context: 'DEFAULT',
-            },
-          ],
-          'Dicom Tag Browser'
-        ),
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'invert',
+          icon: 'tool-invert',
+          label: 'Invert',
+          tooltip: 'Invert Colors',
+          commands: 'invertViewport',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'Probe',
+          icon: 'tool-probe',
+          label: 'Probe',
+          tooltip: 'Probe',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Cine',
+          icon: 'tool-cine',
+          label: 'Cine',
+          tooltip: 'Cine',
+          commands: 'toggleCine',
+          evaluate: 'evaluate.cine',
+        }),
+        createButton({
+          id: 'Angle',
+          icon: 'tool-angle',
+          label: 'Angle',
+          tooltip: 'Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Magnify',
+          icon: 'tool-magnify',
+          label: 'Magnify',
+          tooltip: 'Magnify',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'RectangleROI',
+          icon: 'tool-rectangle',
+          label: 'Rectangle',
+          tooltip: 'Rectangle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CalibrationLine',
+          icon: 'tool-calibration',
+          label: 'Calibration',
+          tooltip: 'Calibration Line',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'TagBrowser',
+          icon: 'list-bullets',
+          label: 'Dicom Tag Browser',
+          tooltip: 'Dicom Tag Browser',
+          commands: 'openDICOMTagViewer',
+        }),
      ],
    },
  },
@@ -1,142 +0,0 @@
-import { ToolbarService } from '@ohif/core';
-
-const moreToolsMpr = [
-  {
-    id: 'MoreToolsMpr',
-    type: 'ohif.splitButton',
-    props: {
-      isRadio: true, // ?
-      groupId: 'MoreTools',
-      primary: ToolbarService._createActionButton(
-        'Reset',
-        'tool-reset',
-        'Reset View',
-        [
-          {
-            commandName: 'resetViewport',
-          },
-        ],
-        'Reset'
-      ),
-      secondary: {
-        icon: 'chevron-down',
-        label: '',
-        isActive: true,
-        tooltip: 'More Tools',
-      },
-      items: [
-        ToolbarService._createActionButton(
-          'Reset',
-          'tool-reset',
-          'Reset View',
-          [
-            {
-              commandName: 'resetViewport',
-            },
-          ],
-          'Reset'
-        ),
-        ToolbarService._createToolButton(
-          'StackScroll',
-          'tool-stack-scroll',
-          'Stack Scroll',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'StackScroll',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Stack Scroll'
-        ),
-        ToolbarService._createActionButton(
-          'invert',
-          'tool-invert',
-          'Invert',
-          [
-            {
-              commandName: 'invertViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Invert Colors'
-        ),
-        ToolbarService._createToolButton(
-          'Probe',
-          'tool-probe',
-          'Probe',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'DragProbe',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Probe'
-        ),
-        ToolbarService._createToggleButton(
-          'cine',
-          'tool-cine',
-          'Cine',
-          [
-            {
-              commandName: 'toggleCine',
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Cine'
-        ),
-        ToolbarService._createToolButton(
-          'Angle',
-          'tool-angle',
-          'Angle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Angle',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Angle'
-        ),
-        ToolbarService._createToolButton(
-          'Rectangle',
-          'tool-rectangle',
-          'Rectangle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'RectangleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rectangle'
-        ),
-        ToolbarService._createActionButton(
-          'TagBrowser',
-          'list-bullets',
-          'Dicom Tag Browser',
-          [
-            {
-              commandName: 'openDICOMTagViewer',
-              commandOptions: {},
-              context: 'DEFAULT',
-            },
-          ],
-          'Dicom Tag Browser'
-        ),
-      ],
-    },
-  },
-];
-
-export default moreToolsMpr;
@@ -1,14 +1,14 @@
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l
 import {
-  // ExpandableToolbarButton,
  // ListMenu,
  WindowLevelMenuItem,
 } from '@ohif/ui';
-import { ToolbarService, defaults } from '@ohif/core';
+import { defaults, ToolbarService } from '@ohif/core';
 import type { Button } from '@ohif/core/types';

 const { windowLevelPresets } = defaults;
+const { createButton } = ToolbarService;

 /**
 *
@@ -21,7 +21,6 @@ function _createWwwcPreset(preset, title, subtitle) {
    id: preset.toString(),
    title,
    subtitle,
-    type: 'action',
    commands: [
      {
        commandName: 'setWindowLevel',
@@ -34,212 +33,106 @@ function _createWwwcPreset(preset, title, subtitle) {
  };
 }

+export const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup'],
+  },
+};
+
 const toolbarButtons: Button[] = [
-  // Measurement
  {
    id: 'MeasurementTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'MeasurementTools',
-      isRadio: true, // ?
-      // Switch?
-      primary: ToolbarService._createToolButton(
-        'Length',
-        'tool-length',
-        'Length',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'Length',
-            },
-            context: 'CORNERSTONE',
-          },
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'SRLength',
-              toolGroupId: 'SRToolGroup',
-            },
-            // we can use the setToolActive command for this from Cornerstone commandsModule
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Length'
-      ),
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
-        label: '',
-        isActive: true,
        tooltip: 'More Measure Tools',
      },
      items: [
-        ToolbarService._createToolButton(
-          'Length',
-          'tool-length',
-          'Length',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Length',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRLength',
-                toolGroupId: 'SRToolGroup',
-              },
-              // we can use the setToolActive command for this from Cornerstone commandsModule
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Length Tool'
-        ),
-        ToolbarService._createToolButton(
-          'Bidirectional',
-          'tool-bidirectional',
-          'Bidirectional',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Bidirectional',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRBidirectional',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Bidirectional Tool'
-        ),
-        ToolbarService._createToolButton(
-          'ArrowAnnotate',
-          'tool-annotate',
-          'Annotation',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'ArrowAnnotate',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRArrowAnnotate',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Arrow Annotate'
-        ),
-        ToolbarService._createToolButton(
-          'EllipticalROI',
-          'tool-elipse',
-          'Ellipse',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'EllipticalROI',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SREllipticalROI',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Ellipse Tool'
-        ),
-        ToolbarService._createToolButton(
-          'CircleROI',
-          'tool-circle',
-          'Circle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'CircleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRCircleROI',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Circle Tool'
-        ),
+        createButton({
+          id: 'Length',
+          icon: 'tool-length',
+          label: 'Length',
+          tooltip: 'Length Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Annotation',
+          tooltip: 'Arrow Annotate',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
      ],
    },
  },
-  // Zoom..
  {
    id: 'Zoom',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'tool',
      icon: 'tool-zoom',
      label: 'Zoom',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'Zoom',
-          },
-          context: 'CORNERSTONE',
-        },
-      ],
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
  // Window Level + Presets...
  {
    id: 'WindowLevel',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'WindowLevel',
-      primary: ToolbarService._createToolButton(
-        'WindowLevel',
-        'tool-window-level',
-        'Window Level',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Window Level'
-      ),
+      primary: createButton({
+        id: 'WindowLevel',
+        icon: 'tool-window-level',
+        label: 'Window Level',
+        tooltip: 'Window Level',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
        label: 'W/L Manual',
-        isActive: true,
        tooltip: 'W/L Presets',
      },
-      isAction: true, // ?
      renderer: WindowLevelMenuItem,
      items: [
        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
@@ -253,137 +146,47 @@ const toolbarButtons: Button[] = [
  // Pan...
  {
    id: 'Pan',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
      type: 'tool',
      icon: 'tool-move',
      label: 'Pan',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'Pan',
-          },
-          context: 'CORNERSTONE',
-        },
-      ],
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
  {
    id: 'Capture',
-    type: 'ohif.action',
+    uiType: 'ohif.radioGroup',
    props: {
      icon: 'tool-capture',
      label: 'Capture',
-      type: 'action',
      commands: [
        {
          commandName: 'showDownloadViewportModal',
-          commandOptions: {},
-          context: 'CORNERSTONE',
        },
      ],
+      evaluate: 'evaluate.action',
    },
  },
  {
    id: 'Layout',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.layoutSelector',
    props: {
-      groupId: 'LayoutTools',
-      isRadio: false,
-      primary: {
-        id: 'Layout',
-        type: 'action',
-        uiType: 'ohif.layoutSelector',
-        icon: 'tool-layout',
-        label: 'Grid Layout',
-        props: {
-          rows: 4,
-          columns: 4,
-          commands: [
-            {
-              commandName: 'setLayout',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-        },
-      },
-      secondary: {
-        icon: 'chevron-down',
-        label: '',
-        isActive: true,
-        tooltip: 'Hanging Protocols',
-      },
-      items: [
+      rows: 3,
+      columns: 3,
+      evaluate: 'evaluate.action',
+      commands: [
        {
-          id: '2x2',
-          type: 'action',
-          label: '2x2',
-          commands: [
-            {
-              commandName: 'setHangingProtocol',
-              commandOptions: {
-                protocolId: '@ohif/mnGrid',
-                stageId: '2x2',
-              },
-              context: 'DEFAULT',
-            },
-          ],
-        },
-        {
-          id: '3x1',
-          type: 'action',
-          label: '3x1',
-          commands: [
-            {
-              commandName: 'setHangingProtocol',
-              commandOptions: {
-                protocolId: '@ohif/mnGrid',
-                stageId: '3x1',
-              },
-              context: 'DEFAULT',
-            },
-          ],
-        },
-        {
-          id: '2x1',
-          type: 'action',
-          label: '2x1',
-          commands: [
-            {
-              commandName: 'setHangingProtocol',
-              commandOptions: {
-                protocolId: '@ohif/mnGrid',
-                stageId: '2x1',
-              },
-              context: 'DEFAULT',
-            },
-          ],
-        },
-        {
-          id: '1x1',
-          type: 'action',
-          label: '1x1',
-          commands: [
-            {
-              commandName: 'setHangingProtocol',
-              commandOptions: {
-                protocolId: '@ohif/mnGrid',
-                stageId: '1x1',
-              },
-              context: 'DEFAULT',
-            },
-          ],
+          commandName: 'setViewportGridLayout',
        },
      ],
    },
  },
  {
    id: 'MPR',
-    type: 'ohif.action',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'toggle',
      icon: 'icon-mpr',
      label: 'MPR',
      commands: [
@@ -394,24 +197,23 @@ const toolbarButtons: Button[] = [
          },
        },
      ],
+      evaluate: 'evaluate.mpr',
    },
  },
  {
    id: 'Crosshairs',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
      type: 'tool',
      icon: 'tool-crosshair',
      label: 'Crosshairs',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolGroupId: 'mpr',
-            toolName: 'Crosshairs',
-          },
+      commands: {
+        commandName: 'setToolActiveToolbar',
+        commandOptions: {
+          toolGroupIds: ['mpr'],
        },
-      ],
+      },
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
 ];
@@ -3,6 +3,79 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/mode-longitudinal
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/mode-longitudinal
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/mode-longitudinal
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+
+### Bug Fixes
+
+* **cli:** mode creation template ([#3876](https://github.com/OHIF/Viewers/issues/3876)) ([#3981](https://github.com/OHIF/Viewers/issues/3981)) ([e485d68](https://github.com/OHIF/Viewers/commit/e485d68fd4619ce7187113cbe59e47f9523dbcc8))
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/mode-longitudinal
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/mode-longitudinal
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/mode-longitudinal
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/mode-longitudinal",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "Longitudinal Workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -34,15 +34,15 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-rt": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-seg": "3.8.0-beta.56",
-    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.56",
-    "@ohif/extension-default": "3.8.0-beta.56",
-    "@ohif/extension-dicom-pdf": "3.8.0-beta.56",
-    "@ohif/extension-dicom-video": "3.8.0-beta.56",
-    "@ohif/extension-measurement-tracking": "3.8.0-beta.56"
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-rt": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-seg": "3.8.0-beta.64",
+    "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.64",
+    "@ohif/extension-default": "3.8.0-beta.64",
+    "@ohif/extension-dicom-pdf": "3.8.0-beta.64",
+    "@ohif/extension-dicom-video": "3.8.0-beta.64",
+    "@ohif/extension-measurement-tracking": "3.8.0-beta.64"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -1,18 +1,14 @@
 import { hotkeys } from '@ohif/core';
-import toolbarButtons from './toolbarButtons';
+import i18n from 'i18next';
 import { id } from './id';
 import initToolGroups from './initToolGroups';
+import toolbarButtons from './toolbarButtons';
 import moreTools from './moreTools';
-import moreToolsMpr from './moreToolsMpr';
-import i18n from 'i18next';

 // Allow this mode by excluding non-imaging modalities such as SR, SEG
 // Also, SM is not a simple imaging modalities, so exclude it.
 const NON_IMAGE_MODALITIES = ['SM', 'ECG', 'SR', 'SEG', 'RTSTRUCT'];

-const DEFAULT_TOOL_GROUP_ID = 'default';
-const MPR_TOOL_GROUP_ID = 'mpr';
-
 const ohif = {
  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
@@ -75,63 +71,16 @@ function modeFactory({ modeConfiguration }) {
     * Lifecycle hooks
     */
    onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
-      const {
-        measurementService,
-        toolbarService,
-        toolGroupService,
-        panelService,
-        customizationService,
-      } = servicesManager.services;
+      const { measurementService, toolbarService, toolGroupService, customizationService } =
+        servicesManager.services;

      measurementService.clearMeasurements();

      // Init Default and SR ToolGroups
      initToolGroups(extensionManager, toolGroupService, commandsManager);

-      let unsubscribe;
-      toolbarService.setDefaultTool({
-        groupId: 'WindowLevel',
-        itemId: 'WindowLevel',
-        interactionType: 'tool',
-        commands: [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-      });
-
-      const activateTool = () => {
-        toolbarService.recordInteraction(toolbarService.getDefaultTool());
-
-        // We don't need to reset the active tool whenever a viewport is getting
-        // added to the toolGroup.
-        unsubscribe();
-      };
-
-      // Since we only have one viewport for the basic cs3d mode and it has
-      // only one hanging protocol, we can just use the first viewport
-      ({ unsubscribe } = toolGroupService.subscribe(
-        toolGroupService.EVENTS.VIEWPORT_ADDED,
-        activateTool
-      ));
-
-      toolbarService.init(extensionManager);
-      toolbarService.addButtons([...toolbarButtons, ...moreTools, ...moreToolsMpr]);
-      toolbarService.createButtonSection(DEFAULT_TOOL_GROUP_ID, [
-        'MeasurementTools',
-        'Zoom',
-        'WindowLevel',
-        'Pan',
-        'Capture',
-        'Layout',
-        'MPR',
-        'MoreTools',
-      ]);
-      toolbarService.createButtonSection(MPR_TOOL_GROUP_ID, [
+      toolbarService.addButtons([...toolbarButtons, ...moreTools]);
+      toolbarService.createButtonSection('primary', [
        'MeasurementTools',
        'Zoom',
        'WindowLevel',
@@ -140,7 +89,7 @@ function modeFactory({ modeConfiguration }) {
        'Layout',
        'MPR',
        'Crosshairs',
-        'MoreToolsMpr',
+        'MoreTools',
      ]);

      customizationService.addModeCustomizations([
@@ -176,14 +125,17 @@ function modeFactory({ modeConfiguration }) {
      const {
        toolGroupService,
        syncGroupService,
-        toolbarService,
        segmentationService,
        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
      } = servicesManager.services;

      _activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe());
      _activatePanelTriggersSubscriptions = [];

+      uiDialogService.dismissAll();
+      uiModalService.hide();
      toolGroupService.destroy();
      syncGroupService.destroy();
      segmentationService.destroy();
@@ -198,8 +150,12 @@ function modeFactory({ modeConfiguration }) {
      const modalities_list = modalities.split('\\');

      // Exclude non-image modalities
-      return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
-        .length;
+      return {
+        valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
+          .length,
+        description:
+          'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG, RTSTRUCT',
+      };
    },
    routes: [
      {
@@ -272,4 +228,4 @@ const mode = {
 };

 export default mode;
-export { initToolGroups, toolbarButtons };
+export { initToolGroups, moreTools, toolbarButtons };
@@ -54,15 +54,13 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
      { toolName: toolNames.CalibrationLine },
    ],
    // enabled
-    enabled: [{ toolName: toolNames.ImageOverlayViewer }],
-    // disabled
-    disabled: [{ toolName: toolNames.ReferenceLines }],
+    enabled: [{ toolName: toolNames.ImageOverlayViewer }, { toolName: toolNames.ReferenceLines }],
  };

  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }

-function initSRToolGroup(extensionManager, toolGroupService, commandsManager) {
+function initSRToolGroup(extensionManager, toolGroupService) {
  const SRUtilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone-dicom-sr.utilityModule.tools'
  );
@@ -186,6 +184,7 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
        toolName: toolNames.Crosshairs,
        configuration: {
          viewportIndicators: false,
+          disableOnPassive: true,
          autoPan: {
            enabled: false,
            panSize: 10,
@@ -230,7 +229,7 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {

 function initToolGroups(extensionManager, toolGroupService, commandsManager) {
  initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
-  initSRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initSRToolGroup(extensionManager, toolGroupService);
  initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
  initVolume3DToolGroup(extensionManager, toolGroupService);
 }
@@ -1,295 +1,183 @@
 import type { RunCommand } from '@ohif/core/types';
 import { EVENTS } from '@cornerstonejs/core';
-import { ToolbarService } from '@ohif/core';
+import { ToolbarService, ViewportGridService } from '@ohif/core';
+import { setToolActiveToolbar } from './toolbarButtons';
+const { createButton } = ToolbarService;

-const ReferenceLinesCommands: RunCommand = [
+const ReferenceLinesListeners: RunCommand = [
  {
    commandName: 'setSourceViewportForReferenceLinesTool',
    context: 'CORNERSTONE',
  },
-  {
-    commandName: 'setToolActive',
-    commandOptions: {
-      toolName: 'ReferenceLines',
-    },
-    context: 'CORNERSTONE',
-  },
 ];

 const moreTools = [
  {
    id: 'MoreTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
-      isRadio: true, // ?
      groupId: 'MoreTools',
-      primary: ToolbarService._createActionButton(
-        'Reset',
-        'tool-reset',
-        'Reset View',
-        [
-          {
-            commandName: 'resetViewport',
-            commandOptions: {},
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Reset'
-      ),
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        tooltip: 'Reset View',
+        label: 'Reset',
+        commands: 'resetViewport',
+        evaluate: 'evaluate.action',
+      }),
      secondary: {
        icon: 'chevron-down',
        label: '',
-        isActive: true,
        tooltip: 'More Tools',
      },
      items: [
-        ToolbarService._createActionButton(
-          'Reset',
-          'tool-reset',
-          'Reset View',
-          [
-            {
-              commandName: 'resetViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
+        createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: 'resetViewport',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'rotate-right',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate +90',
+          commands: 'rotateViewportCW',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'flipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontal',
+          tooltip: 'Flip Horizontally',
+          commands: 'flipViewportHorizontal',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'ImageSliceSync',
+          icon: 'link',
+          label: 'Image Slice Sync',
+          tooltip: 'Enable position synchronization on stack viewports',
+          commands: {
+            commandName: 'toggleSynchronizer',
+            commandOptions: {
+              type: 'imageSlice',
            },
-          ],
-          'Reset'
-        ),
-        ToolbarService._createActionButton(
-          'rotate-right',
-          'tool-rotate-right',
-          'Rotate Right',
-          [
-            {
-              commandName: 'rotateViewportCW',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rotate +90'
-        ),
-        ToolbarService._createActionButton(
-          'flip-horizontal',
-          'tool-flip-horizontal',
-          'Flip Horizontally',
-          [
-            {
-              commandName: 'flipViewportHorizontal',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Flip Horizontal'
-        ),
-        ToolbarService._createToggleButton(
-          'ImageSliceSync',
-          'link',
-          'Image Slice Sync',
-          [
-            {
+          },
+          listeners: {
+            [EVENTS.STACK_VIEWPORT_NEW_STACK]: {
              commandName: 'toggleImageSliceSync',
+              commandOptions: { toggledState: true },
            },
-          ],
-          'Enable position synchronization on stack viewports',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: {
-                commandName: 'toggleImageSliceSync',
-                commandOptions: { toggledState: true },
-              },
+          },
+          evaluate: 'evaluate.cornerstone.synchronizer',
+        }),
+        createButton({
+          id: 'ReferenceLines',
+          icon: 'tool-referenceLines',
+          label: 'Reference Lines',
+          tooltip: 'Show Reference Lines',
+          commands: {
+            commandName: 'setToolEnabled',
+            commandOptions: {
+              toolName: 'ReferenceLines',
+              toggle: true, // Toggle the tool on/off upon click
            },
-          }
-        ),
-        ToolbarService._createToggleButton(
-          'ReferenceLines',
-          'tool-referenceLines', // change this with the new icon
-          'Reference Lines',
-          ReferenceLinesCommands,
-          'Show Reference Lines',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: ReferenceLinesCommands,
-              [EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesCommands,
+          },
+          listeners: {
+            [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+            [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'ImageOverlay',
+          icon: 'toggle-dicom-overlay',
+          label: 'Image Overlay',
+          tooltip: 'Toggle Image Overlay',
+          commands: {
+            commandName: 'setToolEnabled',
+            commandOptions: {
+              toolName: 'ImageOverlayViewer',
+              toggle: true, // Toggle the tool on/off upon click
            },
-          }
-        ),
-        ToolbarService._createToggleButton(
-          'ImageOverlayViewer',
-          'toggle-dicom-overlay',
-          'Image Overlay',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'ImageOverlayViewer',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Image Overlay',
-          { isActive: true }
-        ),
-        ToolbarService._createToolButton(
-          'StackScroll',
-          'tool-stack-scroll',
-          'Stack Scroll',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'StackScroll',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Stack Scroll'
-        ),
-        ToolbarService._createActionButton(
-          'invert',
-          'tool-invert',
-          'Invert',
-          [
-            {
-              commandName: 'invertViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Invert Colors'
-        ),
-        ToolbarService._createToolButton(
-          'Probe',
-          'tool-probe',
-          'Probe',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'DragProbe',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Probe'
-        ),
-        ToolbarService._createToggleButton(
-          'cine',
-          'tool-cine',
-          'Cine',
-          [
-            {
-              commandName: 'toggleCine',
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Cine'
-        ),
-        ToolbarService._createToolButton(
-          'Angle',
-          'tool-angle',
-          'Angle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Angle',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Angle'
-        ),
-
-        // Next two tools can be added once icons are added
-        // ToolbarService._createToolButton(
-        //   'Cobb Angle',
-        //   'tool-cobb-angle',
-        //   'Cobb Angle',
-        //   [
-        //     {
-        //       commandName: 'setToolActive',
-        //       commandOptions: {
-        //         toolName: 'CobbAngle',
-        //       },
-        //       context: 'CORNERSTONE',
-        //     },
-        //   ],
-        //   'Cobb Angle'
-        // ),
-        // ToolbarService._createToolButton(
-        //   'Planar Freehand ROI',
-        //   'tool-freehand',
-        //   'PlanarFreehandROI',
-        //   [
-        //     {
-        //       commandName: 'setToolActive',
-        //       commandOptions: {
-        //         toolName: 'PlanarFreehandROI',
-        //       },
-        //       context: 'CORNERSTONE',
-        //     },
-        //   ],
-        //   'Planar Freehand ROI'
-        // ),
-        ToolbarService._createToolButton(
-          'Magnify',
-          'tool-magnify',
-          'Magnify',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Magnify',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Magnify'
-        ),
-        ToolbarService._createToolButton(
-          'Rectangle',
-          'tool-rectangle',
-          'Rectangle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'RectangleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rectangle'
-        ),
-        ToolbarService._createToolButton(
-          'CalibrationLine',
-          'tool-calibration',
-          'Calibration',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'CalibrationLine',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Calibration Line'
-        ),
-        ToolbarService._createActionButton(
-          'TagBrowser',
-          'list-bullets',
-          'Dicom Tag Browser',
-          [
-            {
-              commandName: 'openDICOMTagViewer',
-              commandOptions: {},
-              context: 'DEFAULT',
-            },
-          ],
-          'Dicom Tag Browser'
-        ),
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'invert',
+          icon: 'tool-invert',
+          label: 'Invert',
+          tooltip: 'Invert Colors',
+          commands: 'invertViewport',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'Probe',
+          icon: 'tool-probe',
+          label: 'Probe',
+          tooltip: 'Probe',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Cine',
+          icon: 'tool-cine',
+          label: 'Cine',
+          tooltip: 'Cine',
+          commands: 'toggleCine',
+          evaluate: 'evaluate.cine',
+        }),
+        createButton({
+          id: 'Angle',
+          icon: 'tool-angle',
+          label: 'Angle',
+          tooltip: 'Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Magnify',
+          icon: 'tool-magnify',
+          label: 'Magnify',
+          tooltip: 'Magnify',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'RectangleROI',
+          icon: 'tool-rectangle',
+          label: 'Rectangle',
+          tooltip: 'Rectangle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CalibrationLine',
+          icon: 'tool-calibration',
+          label: 'Calibration',
+          tooltip: 'Calibration Line',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'TagBrowser',
+          icon: 'list-bullets',
+          label: 'Dicom Tag Browser',
+          tooltip: 'Dicom Tag Browser',
+          commands: 'openDICOMTagViewer',
+        }),
      ],
    },
  },
@@ -1,242 +0,0 @@
-import type { RunCommand } from '@ohif/core/types';
-import { EVENTS } from '@cornerstonejs/core';
-import { ToolbarService } from '@ohif/core';
-
-const ReferenceLinesCommands: RunCommand = [
-  {
-    commandName: 'setSourceViewportForReferenceLinesTool',
-    context: 'CORNERSTONE',
-  },
-  {
-    commandName: 'setToolActive',
-    commandOptions: {
-      toolName: 'ReferenceLines',
-    },
-    context: 'CORNERSTONE',
-  },
-];
-
-const moreToolsMpr = [
-  {
-    id: 'MoreToolsMpr',
-    type: 'ohif.splitButton',
-    props: {
-      isRadio: true, // ?
-      groupId: 'MoreTools',
-      primary: ToolbarService._createActionButton(
-        'Reset',
-        'tool-reset',
-        'Reset View',
-        [
-          {
-            commandName: 'resetViewport',
-            commandOptions: {},
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Reset'
-      ),
-      secondary: {
-        icon: 'chevron-down',
-        label: '',
-        isActive: true,
-        tooltip: 'More Tools',
-      },
-      items: [
-        ToolbarService._createActionButton(
-          'Reset',
-          'tool-reset',
-          'Reset View',
-          [
-            {
-              commandName: 'resetViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Reset'
-        ),
-        ToolbarService._createToggleButton(
-          'ImageSliceSync',
-          'link',
-          'Image Slice Sync',
-          [
-            {
-              commandName: 'toggleImageSliceSync',
-            },
-          ],
-          'Enable position synchronization on stack viewports',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: {
-                commandName: 'toggleImageSliceSync',
-                commandOptions: { toggledState: true },
-              },
-            },
-          }
-        ),
-        ToolbarService._createToggleButton(
-          'ReferenceLines',
-          'tool-referenceLines', // change this with the new icon
-          'Reference Lines',
-          ReferenceLinesCommands,
-          'Show Reference Lines',
-          {
-            listeners: {
-              [EVENTS.STACK_VIEWPORT_NEW_STACK]: ReferenceLinesCommands,
-              [EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesCommands,
-            },
-          }
-        ),
-        ToolbarService._createToggleButton(
-          'ImageOverlayViewer',
-          'toggle-dicom-overlay',
-          'Image Overlay',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'ImageOverlayViewer',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Image Overlay',
-          { isActive: true }
-        ),
-        ToolbarService._createToolButton(
-          'StackScroll',
-          'tool-stack-scroll',
-          'Stack Scroll',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'StackScroll',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Stack Scroll'
-        ),
-        ToolbarService._createActionButton(
-          'invert',
-          'tool-invert',
-          'Invert',
-          [
-            {
-              commandName: 'invertViewport',
-              commandOptions: {},
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Invert Colors'
-        ),
-        ToolbarService._createToolButton(
-          'Probe',
-          'tool-probe',
-          'Probe',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'DragProbe',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Probe'
-        ),
-        ToolbarService._createToggleButton(
-          'cine',
-          'tool-cine',
-          'Cine',
-          [
-            {
-              commandName: 'toggleCine',
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Cine'
-        ),
-        ToolbarService._createToolButton(
-          'Angle',
-          'tool-angle',
-          'Angle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Angle',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Angle'
-        ),
-
-        // Next two tools can be added once icons are added
-        // ToolbarService._createToolButton(
-        //   'Cobb Angle',
-        //   'tool-cobb-angle',
-        //   'Cobb Angle',
-        //   [
-        //     {
-        //       commandName: 'setToolActive',
-        //       commandOptions: {
-        //         toolName: 'CobbAngle',
-        //       },
-        //       context: 'CORNERSTONE',
-        //     },
-        //   ],
-        //   'Cobb Angle'
-        // ),
-        // ToolbarService._createToolButton(
-        //   'Planar Freehand ROI',
-        //   'tool-freehand',
-        //   'PlanarFreehandROI',
-        //   [
-        //     {
-        //       commandName: 'setToolActive',
-        //       commandOptions: {
-        //         toolName: 'PlanarFreehandROI',
-        //       },
-        //       context: 'CORNERSTONE',
-        //     },
-        //   ],
-        //   'Planar Freehand ROI'
-        // ),
-        ToolbarService._createToolButton(
-          'Rectangle',
-          'tool-rectangle',
-          'Rectangle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'RectangleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Rectangle'
-        ),
-        ToolbarService._createActionButton(
-          'TagBrowser',
-          'list-bullets',
-          'Dicom Tag Browser',
-          [
-            {
-              commandName: 'openDICOMTagViewer',
-              commandOptions: {},
-              context: 'DEFAULT',
-            },
-          ],
-          'Dicom Tag Browser'
-        ),
-      ],
-    },
-  },
-];
-
-export default moreToolsMpr;
@@ -1,7 +1,6 @@
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l
 import {
-  // ExpandableToolbarButton,
  // ListMenu,
  WindowLevelMenuItem,
 } from '@ohif/ui';
@@ -9,6 +8,7 @@ import { defaults, ToolbarService } from '@ohif/core';
 import type { Button } from '@ohif/core/types';

 const { windowLevelPresets } = defaults;
+const { createButton } = ToolbarService;

 /**
 *
@@ -21,7 +21,6 @@ function _createWwwcPreset(preset, title, subtitle) {
    id: preset.toString(),
    title,
    subtitle,
-    type: 'action',
    commands: [
      {
        commandName: 'setWindowLevel',
@@ -34,224 +33,106 @@ function _createWwwcPreset(preset, title, subtitle) {
  };
 }

-const toolGroupIds = ['default', 'mpr', 'SRToolGroup'];
-
-/**
- * Creates an array of 'setToolActive' commands for the given toolName - one for
- * each toolGroupId specified in toolGroupIds.
- * @param {string} toolName
- * @returns {Array} an array of 'setToolActive' commands
- */
-function _createSetToolActiveCommands(toolName) {
-  const temp = toolGroupIds.map(toolGroupId => ({
-    commandName: 'setToolActive',
-    commandOptions: {
-      toolGroupId,
-      toolName,
-    },
-    context: 'CORNERSTONE',
-  }));
-  return temp;
-}
+export const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup'],
+  },
+};

 const toolbarButtons: Button[] = [
-  // Measurement
  {
    id: 'MeasurementTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'MeasurementTools',
-      isRadio: true, // ?
-      // Switch?
-      primary: ToolbarService._createToolButton(
-        'Length',
-        'tool-length',
-        'Length',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'Length',
-            },
-            context: 'CORNERSTONE',
-          },
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'SRLength',
-              toolGroupId: 'SRToolGroup',
-            },
-            // we can use the setToolActive command for this from Cornerstone commandsModule
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Length'
-      ),
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
-        label: '',
-        isActive: true,
        tooltip: 'More Measure Tools',
      },
      items: [
-        ToolbarService._createToolButton(
-          'Length',
-          'tool-length',
-          'Length',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Length',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRLength',
-                toolGroupId: 'SRToolGroup',
-              },
-              // we can use the setToolActive command for this from Cornerstone commandsModule
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Length Tool'
-        ),
-        ToolbarService._createToolButton(
-          'Bidirectional',
-          'tool-bidirectional',
-          'Bidirectional',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'Bidirectional',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRBidirectional',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Bidirectional Tool'
-        ),
-        ToolbarService._createToolButton(
-          'ArrowAnnotate',
-          'tool-annotate',
-          'Annotation',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'ArrowAnnotate',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRArrowAnnotate',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Arrow Annotate'
-        ),
-        ToolbarService._createToolButton(
-          'EllipticalROI',
-          'tool-elipse',
-          'Ellipse',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'EllipticalROI',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SREllipticalROI',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Ellipse Tool'
-        ),
-        ToolbarService._createToolButton(
-          'CircleROI',
-          'tool-circle',
-          'Circle',
-          [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'CircleROI',
-              },
-              context: 'CORNERSTONE',
-            },
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'SRCircleROI',
-                toolGroupId: 'SRToolGroup',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-          'Circle Tool'
-        ),
+        createButton({
+          id: 'Length',
+          icon: 'tool-length',
+          label: 'Length',
+          tooltip: 'Length Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Annotation',
+          tooltip: 'Arrow Annotate',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
      ],
    },
  },
-  // Zoom..
  {
    id: 'Zoom',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'tool',
      icon: 'tool-zoom',
      label: 'Zoom',
-      commands: _createSetToolActiveCommands('Zoom'),
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
  // Window Level + Presets...
  {
    id: 'WindowLevel',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'WindowLevel',
-      primary: ToolbarService._createToolButton(
-        'WindowLevel',
-        'tool-window-level',
-        'Window Level',
-        [
-          {
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel',
-            },
-            context: 'CORNERSTONE',
-          },
-        ],
-        'Window Level'
-      ),
+      primary: createButton({
+        id: 'WindowLevel',
+        icon: 'tool-window-level',
+        label: 'Window Level',
+        tooltip: 'Window Level',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
      secondary: {
        icon: 'chevron-down',
        label: 'W/L Manual',
-        isActive: true,
        tooltip: 'W/L Presets',
      },
-      isAction: true, // ?
      renderer: WindowLevelMenuItem,
      items: [
        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
@@ -265,43 +146,47 @@ const toolbarButtons: Button[] = [
  // Pan...
  {
    id: 'Pan',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
      type: 'tool',
      icon: 'tool-move',
      label: 'Pan',
-      commands: _createSetToolActiveCommands('Pan'),
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
  {
    id: 'Capture',
-    type: 'ohif.action',
+    uiType: 'ohif.radioGroup',
    props: {
      icon: 'tool-capture',
      label: 'Capture',
-      type: 'action',
      commands: [
        {
          commandName: 'showDownloadViewportModal',
-          commandOptions: {},
-          context: 'CORNERSTONE',
+        },
+      ],
+      evaluate: 'evaluate.action',
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 3,
+      evaluate: 'evaluate.action',
+      commands: [
+        {
+          commandName: 'setViewportGridLayout',
        },
      ],
    },
  },
-  {
-    id: 'Layout',
-    type: 'ohif.layoutSelector',
-    props: {
-      rows: 3,
-      columns: 3,
-    },
-  },
  {
    id: 'MPR',
-    type: 'ohif.action',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'toggle',
      icon: 'icon-mpr',
      label: 'MPR',
      commands: [
@@ -310,31 +195,27 @@ const toolbarButtons: Button[] = [
          commandOptions: {
            protocolId: 'mpr',
          },
-          context: 'DEFAULT',
        },
      ],
+      evaluate: 'evaluate.mpr',
    },
  },
  {
    id: 'Crosshairs',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
      type: 'tool',
      icon: 'tool-crosshair',
      label: 'Crosshairs',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'Crosshairs',
-            toolGroupId: 'mpr',
-          },
-          context: 'CORNERSTONE',
+      commands: {
+        commandName: 'setToolActiveToolbar',
+        commandOptions: {
+          toolGroupIds: ['mpr'],
        },
-      ],
+      },
+      evaluate: 'evaluate.cornerstoneTool',
    },
  },
-  // More...
 ];

 export default toolbarButtons;
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/mode-microscopy
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/mode-microscopy
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/mode-microscopy",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF mode for DICOM microscopy",
  "author": "OHIF",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56",
-    "@ohif/extension-dicom-microscopy": "3.8.0-beta.56"
+    "@ohif/core": "3.8.0-beta.64",
+    "@ohif/extension-dicom-microscopy": "3.8.0-beta.64"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -50,14 +50,15 @@ function modeFactory({ modeConfiguration }) {
    onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
      const { toolbarService } = servicesManager.services;

-      toolbarService.init(extensionManager);
      toolbarService.addButtons(toolbarButtons);
      toolbarService.createButtonSection('primary', ['MeasurementTools', 'dragPan']);
    },

    onModeExit: ({ servicesManager }) => {
-      const { toolbarService } = servicesManager.services;
+      const { toolbarService, uiDialogService, uiModalService } = servicesManager.services;

+      uiDialogService.dismissAll();
+      uiModalService.hide();
      toolbarService.reset();
    },

@@ -69,8 +70,10 @@ function modeFactory({ modeConfiguration }) {
    isValidMode: ({ modalities }) => {
      const modalities_list = modalities.split('\\');

-      // Slide Microscopy and ECG modality not supported by basic mode yet
-      return modalities_list.includes('SM');
+      return {
+        valid: modalities_list.includes('SM'),
+        description: 'Microscopy mode only supports the SM modality',
+      };
    },

    routes: [
@@ -1,182 +1,148 @@
-// TODO: torn, can either bake this here; or have to create a whole new button type
-/**
- *
- * @param {*} type - 'tool' | 'action' | 'toggle'
- * @param {*} id
- * @param {*} icon
- * @param {*} label
- */
-function _createButton(type, id, icon, label, commands, tooltip) {
-  return {
-    id,
-    icon,
-    label,
-    type,
-    commands,
-    tooltip,
-  };
-}
-
-const _createActionButton = _createButton.bind(null, 'action');
-const _createToggleButton = _createButton.bind(null, 'toggle');
-const _createToolButton = _createButton.bind(null, 'tool');
+import { ToolbarService } from '@ohif/core';

 const toolbarButtons = [
-  // Measurement
  {
    id: 'MeasurementTools',
-    type: 'ohif.splitButton',
+    uiType: 'ohif.splitButton',
    props: {
      groupId: 'MeasurementTools',
-      isRadio: true, // ?
-      // Switch?
-      primary: _createToolButton(
-        'line',
-        'tool-length',
-        'Line',
-        [
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimary',
+      primary: ToolbarService.createButton({
+        id: 'line',
+        icon: 'tool-length',
+        label: 'Line',
+        tooltip: 'Line',
+        commands: [
          {
            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'line',
-            },
+            commandOptions: { toolName: 'line' },
            context: 'MICROSCOPY',
          },
        ],
-        'Line'
-      ),
+        evaluate: 'evaluate.microscopyTool',
+      }),
      secondary: {
        icon: 'chevron-down',
-        label: '',
-        isActive: true,
        tooltip: 'More Measure Tools',
      },
      items: [
-        _createToolButton(
-          'line',
-          'tool-length',
-          'Line',
-          [
+        ToolbarService.createButton({
+          id: 'line',
+          icon: 'tool-length',
+          label: 'Line',
+          tooltip: 'Line',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'line',
-              },
+              commandOptions: { toolName: 'line' },
              context: 'MICROSCOPY',
            },
          ],
-          'Line Tool'
-        ),
-        _createToolButton(
-          'point',
-          'tool-point',
-          'Point',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'point',
+          icon: 'tool-point',
+          label: 'Point',
+          tooltip: 'Point Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'point',
-              },
+              commandOptions: { toolName: 'point' },
              context: 'MICROSCOPY',
            },
          ],
-          'Point Tool'
-        ),
-        _createToolButton(
-          'polygon',
-          'tool-polygon',
-          'Polygon',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        // Point Tool was previously defined
+        ToolbarService.createButton({
+          id: 'polygon',
+          icon: 'tool-polygon',
+          label: 'Polygon',
+          tooltip: 'Polygon Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'polygon',
-              },
+              commandOptions: { toolName: 'polygon' },
              context: 'MICROSCOPY',
            },
          ],
-          'Polygon Tool'
-        ),
-        _createToolButton(
-          'circle',
-          'tool-circle',
-          'Circle',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'circle',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'circle',
-              },
+              commandOptions: { toolName: 'circle' },
              context: 'MICROSCOPY',
            },
          ],
-          'Circle Tool'
-        ),
-        _createToolButton(
-          'box',
-          'tool-rectangle',
-          'Box',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'box',
+          icon: 'tool-rectangle',
+          label: 'Box',
+          tooltip: 'Box Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'box',
-              },
+              commandOptions: { toolName: 'box' },
              context: 'MICROSCOPY',
            },
          ],
-          'Box Tool'
-        ),
-        _createToolButton(
-          'freehandpolygon',
-          'tool-freehand-polygon',
-          'Freehand Polygon',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'freehandpolygon',
+          icon: 'tool-freehand-polygon',
+          label: 'Freehand Polygon',
+          tooltip: 'Freehand Polygon Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'freehandpolygon',
-              },
+              commandOptions: { toolName: 'freehandpolygon' },
              context: 'MICROSCOPY',
            },
          ],
-          'Freehand Polygon Tool'
-        ),
-        _createToolButton(
-          'freehandline',
-          'tool-freehand-line',
-          'Freehand Line',
-          [
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'freehandline',
+          icon: 'tool-freehand-line',
+          label: 'Freehand Line',
+          tooltip: 'Freehand Line Tool',
+          commands: [
            {
              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'freehandline',
-              },
+              commandOptions: { toolName: 'freehandline' },
              context: 'MICROSCOPY',
            },
          ],
-          'Freehand Line Tool'
-        ),
+          evaluate: 'evaluate.microscopyTool',
+        }),
      ],
    },
  },
-  // Pan...
  {
    id: 'dragPan',
-    type: 'ohif.radioGroup',
+    uiType: 'ohif.radioGroup',
    props: {
-      type: 'tool',
      icon: 'tool-move',
      label: 'Pan',
      commands: [
        {
          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'dragPan',
-          },
+          commandOptions: { toolName: 'dragPan' },
          context: 'MICROSCOPY',
        },
      ],
+      evaluate: 'evaluate.microscopyTool',
    },
  },
 ];
@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.8.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.63...v3.8.0-beta.64) (2024-03-27)
+
+
+### Features
+
+* **toolbar:** new Toolbar to enable reactive state synchronization ([#3983](https://github.com/OHIF/Viewers/issues/3983)) ([566b25a](https://github.com/OHIF/Viewers/commit/566b25a54425399096864bd263193646556011a5))
+
+
+
+
+
+# [3.8.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.62...v3.8.0-beta.63) (2024-03-25)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
+# [3.8.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.61...v3.8.0-beta.62) (2024-03-19)
+
+
+### Features
+
+* **worklist:** New worklist buttons and tooltips ([#3989](https://github.com/OHIF/Viewers/issues/3989)) ([9bcd1ae](https://github.com/OHIF/Viewers/commit/9bcd1ae6f51d61786cc1e99624f396b56a47cd69))
+
+
+
+
+
+# [3.8.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.60...v3.8.0-beta.61) (2024-03-18)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
+# [3.8.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.59...v3.8.0-beta.60) (2024-03-15)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
+# [3.8.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.58...v3.8.0-beta.59) (2024-03-08)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
+# [3.8.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.57...v3.8.0-beta.58) (2024-03-05)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
+# [3.8.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.56...v3.8.0-beta.57) (2024-02-28)
+
+**Note:** Version bump only for package @ohif/mode-segmentation
+
+
+
+
+
 # [3.8.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.55...v3.8.0-beta.56) (2024-02-22)

 **Note:** Version bump only for package @ohif/mode-segmentation
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/mode-segmentation",
-  "version": "3.8.0-beta.56",
+  "version": "3.8.0-beta.64",
  "description": "OHIF segmentation mode which enables labelmap segmentation read/edit/export",
  "author": "@ohif",
  "license": "MIT",
@@ -35,7 +35,7 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.8.0-beta.56"
+    "@ohif/core": "3.8.0-beta.64"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -1,6 +1,7 @@
 import { hotkeys } from '@ohif/core';
 import { id } from './id';
 import toolbarButtons from './toolbarButtons';
+import segmentationButtons from './segmentationButtons';
 import initToolGroups from './initToolGroups';

 const ohif = {
@@ -57,47 +58,19 @@ function modeFactory({ modeConfiguration }) {
      // Init Default and SR ToolGroups
      initToolGroups(extensionManager, toolGroupService, commandsManager);

-      let unsubscribe;
-
-      const activateTool = () => {
-        toolbarService.recordInteraction({
-          groupId: 'WindowLevel',
-          interactionType: 'tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: {
-                toolName: 'WindowLevel',
-              },
-              context: 'CORNERSTONE',
-            },
-          ],
-        });
-
-        // We don't need to reset the active tool whenever a viewport is getting
-        // added to the toolGroup.
-        unsubscribe();
-      };
-
-      // Since we only have one viewport for the basic cs3d mode and it has
-      // only one hanging protocol, we can just use the first viewport
-      ({ unsubscribe } = toolGroupService.subscribe(
-        toolGroupService.EVENTS.VIEWPORT_ADDED,
-        activateTool
-      ));
-
-      toolbarService.init(extensionManager);
      toolbarService.addButtons(toolbarButtons);
+      toolbarService.addButtons(segmentationButtons);
+
      toolbarService.createButtonSection('primary', [
-        'Zoom',
-        'WindowLevel',
        'Pan',
        'Capture',
        'Layout',
        'MPR',
        'Crosshairs',
+        'Zoom',
        'MoreTools',
      ]);
+      toolbarService.createButtonSection('segmentationToolbox', ['BrushTools', 'Shapes']);
    },
    onModeExit: ({ servicesManager }) => {
      const {
@@ -106,8 +79,12 @@ function modeFactory({ modeConfiguration }) {
        toolbarService,
        segmentationService,
        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
      } = servicesManager.services;

+      uiDialogService.dismissAll();
+      uiModalService.hide();
      toolGroupService.destroy();
      syncGroupService.destroy();
      segmentationService.destroy();
@@ -127,11 +104,10 @@ function modeFactory({ modeConfiguration }) {
      // Don't show the mode if the selected studies have only one modality
      // that is not supported by the mode
      const modalitiesArray = modalities.split('\\');
-      if (modalitiesArray.length === 1) {
-        return !['SM', 'US', 'MG', 'OT', 'DOC', 'CR'].includes(modalitiesArray[0]);
+      return {
+        valid: modalitiesArray.length === 1 ? !['SM', 'US', 'MG', 'OT', 'DOC', 'CR'].includes(modalitiesArray[0]) : true,
+        description: 'The mode does not support studies that ONLY include the following modalities: SM, US, MG, OT, DOC, CR',
      }
-
-      return true;
    },
    /**
     * Mode Routes are used to define the mode's behavior. A list of Mode Route
@@ -41,11 +41,7 @@ function createTools(utilityModule) {
        parentTool: 'Brush',
        configuration: {
          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
-          strategySpecificConfiguration: {
-            THRESHOLD: {
-              threshold: [-500, 500],
-            },
-          },
+          dynamicRadius: 3,
        },
      },
      {
@@ -53,11 +49,7 @@ function createTools(utilityModule) {
        parentTool: 'Brush',
        configuration: {
          activeStrategy: 'THRESHOLD_INSIDE_SPHERE',
-          strategySpecificConfiguration: {
-            THRESHOLD: {
-              threshold: [-500, 500],
-            },
-          },
+          dynamicRadius: 3,
        },
      },
      { toolName: toolNames.CircleScissors },
Author	SHA1	Message	Date
ohif-bot	6f610b09e1	chore(version): Update package versions [skip ci]	2024-03-27 20:12:57 +00:00
ohif-bot	a2e320f9f8	chore(version): version.json [skip ci]	2024-03-27 20:12:47 +00:00
Alireza	566b25a544	feat(toolbar): new Toolbar to enable reactive state synchronization (#3983 )	2024-03-27 16:01:32 -04:00
ohif-bot	79d5c36bda	chore(version): Update package versions [skip ci]	2024-03-25 15:44:13 +00:00
ohif-bot	f47a94317d	chore(version): version.json [skip ci]	2024-03-25 15:44:04 +00:00
Ibrahim	45b68e841d	feat(worklist): new investigational use text (#3999 )	2024-03-25 11:33:24 -04:00
ohif-bot	d70aae3233	chore(version): Update package versions [skip ci]	2024-03-19 00:37:56 +00:00
ohif-bot	345b137bec	chore(version): version.json [skip ci]	2024-03-19 00:37:48 +00:00
Ibrahim	9bcd1ae6f5	feat(worklist): New worklist buttons and tooltips (#3989 )	2024-03-18 20:27:12 -04:00
ohif-bot	6b79dff5c1	chore(version): Update package versions [skip ci]	2024-03-18 18:38:23 +00:00
ohif-bot	88859f75d5	chore(version): version.json [skip ci]	2024-03-18 18:38:16 +00:00
Alireza	feed2304c1	fix(SR display): and the token based navigation (#3995 )	2024-03-18 14:27:17 -04:00
ohif-bot	08815909c7	chore(version): Update package versions [skip ci]	2024-03-15 13:52:45 +00:00
ohif-bot	ed2234a67c	chore(version): version.json [skip ci]	2024-03-15 13:52:34 +00:00
Pedro H. Köhler	f7fe91c5f6	feat(delete measurement): icon for measurement table (#3775 )	2024-03-15 09:35:29 -04:00
ohif-bot	21ec6860f2	chore(version): Update package versions [skip ci]	2024-03-08 13:38:48 +00:00
ohif-bot	ac474b7f8f	chore(version): version.json [skip ci]	2024-03-08 13:38:41 +00:00
EricB	e485d68fd4	fix(cli): mode creation template (#3876 ) (#3981 )	2024-03-08 08:27:37 -05:00
ohif-bot	5089229ff9	chore(version): Update package versions [skip ci]	2024-03-05 16:15:56 +00:00
ohif-bot	df09176d63	chore(version): version.json [skip ci]	2024-03-05 16:15:48 +00:00
EricB	bb603bd1f8	docs: Typo (#3975 )	2024-03-05 11:04:28 -05:00
ohif-bot	82a4a7d377	chore(version): Update package versions [skip ci]	2024-02-28 17:25:27 +00:00
ohif-bot	c27fa9c802	chore(version): version.json [skip ci]	2024-02-28 17:25:19 +00:00
EricB	4cdfdae814	fix(docs): Minor typos in hpModule.md (#3962 )	2024-02-28 12:13:46 -05:00