fix: Create typed services and allow lower case access to agree with naming conventions (#3141)

* fix: Add typed services

* fix: Typed services - PR changes

* remaining of the cineService and toolbarService renaming

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/default/src/Toolbar/Toolbar.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 
 export default function Toolbar({ servicesManager }) {
-  const { ToolBarService } = servicesManager.services;
+  const { toolbarService } = servicesManager.services;
   const [toolbarButtons, setToolbarButtons] = useState([]);
   const [buttonState, setButtonState] = useState({
     primaryToolId: '',
@@ -12,20 +12,20 @@ export default function Toolbar({ servicesManager }) {
 
   // Could track buttons and state separately...?
   useEffect(() => {
-    const { unsubscribe: unsub1 } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => setToolbarButtons(ToolBarService.getButtonSection('primary'))
+    const { unsubscribe: unsub1 } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_MODIFIED,
+      () => setToolbarButtons(toolbarService.getButtonSection('primary'))
     );
-    const { unsubscribe: unsub2 } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => setButtonState({ ...ToolBarService.state })
+    const { unsubscribe: unsub2 } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => setButtonState({ ...toolbarService.state })
     );
 
     return () => {
       unsub1();
       unsub2();
     };
-  }, [ToolBarService]);
+  }, [toolbarService]);
 
   return (
     <>
@@ -55,7 +55,7 @@ export default function Toolbar({ servicesManager }) {
               {...componentProps}
               bState={buttonState}
               isActive={isActive}
-              onInteraction={args => ToolBarService.recordInteraction(args)}
+              onInteraction={args => toolbarService.recordInteraction(args)}
               servicesManager={servicesManager}
             />
           </div>

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -6,6 +6,8 @@ import {
   useViewportGrid,
 } from '@ohif/ui';
 
+import { ServicesManager } from '@ohif/core';
+
 function LayoutSelector({
   rows,
   columns,
@@ -17,7 +19,10 @@ function LayoutSelector({
   const [disableSelector, setDisableSelector] = useState(false);
   const [viewportGridState, viewportGridService] = useViewportGrid();
 
-  const { HangingProtocolService, ToolBarService } = servicesManager.services;
+  const {
+    HangingProtocolService,
+    toolbarService,
+  } = (servicesManager as ServicesManager).services;
 
   const closeOnOutsideClick = () => {
     if (isOpen) {
@@ -61,7 +66,7 @@ function LayoutSelector({
     // TODO Here the layout change will amount to a change of hanging protocol as specified by the extension for this layout selector tool
     // followed by the change of the grid itself.
     if (HangingProtocolService.getActiveProtocol().protocol.id === 'mpr') {
-      ToolBarService.recordInteraction({
+      toolbarService.recordInteraction({
         groupId: 'MPR',
         itemId: 'MPR',
         interactionType: 'toggle',
@@ -104,6 +109,7 @@ LayoutSelector.propTypes = {
   rows: PropTypes.number,
   columns: PropTypes.number,
   onLayoutChange: PropTypes.func,
+  servicesManager: PropTypes.instanceOf(ServicesManager),
 };
 
 LayoutSelector.defaultProps = {

extensions/default/src/getToolbarModule.tsx

@@ -4,8 +4,6 @@ import ToolbarLayoutSelector from './Toolbar/ToolbarLayoutSelector.tsx';
 import ToolbarSplitButton from './Toolbar/ToolbarSplitButton.tsx';
 
 export default function getToolbarModule({ commandsManager, servicesManager }) {
-  const toolbarService = servicesManager.services.ToolBarService;
-
   return [
     {
       name: 'ohif.divider',