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/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -118,7 +118,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
   const {
     MeasurementService,
     DisplaySetService,
-    ToolBarService,
+    toolbarService,
     ToolGroupService,
     SyncGroupService,
     CornerstoneViewportService,
@@ -355,7 +355,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
       ></div>
       <CornerstoneOverlays
         viewportIndex={viewportIndex}
-        ToolBarService={ToolBarService}
+        toolbarService={toolbarService}
         element={elementRef.current}
         scrollbarHeight={scrollbarHeight}
         servicesManager={servicesManager}

extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Enums, Types, utilities } from '@cornerstonejs/core';
 import { utilities as csToolsUtils } from '@cornerstonejs/tools';
 import { ImageScrollbar } from '@ohif/ui';
+import { ServicesManger } from '@ohif/core';
 
 function CornerstoneImageScrollbar({
   viewportData,
@@ -13,7 +14,10 @@ function CornerstoneImageScrollbar({
   scrollbarHeight,
   servicesManager,
 }) {
-  const { CineService, CornerstoneViewportService } = servicesManager.services;
+  const {
+    cineService,
+    CornerstoneViewportService,
+  } = (servicesManager as ServicesManger).services;
 
   const onImageScrollbarChange = (imageIndex, viewportIndex) => {
     const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
@@ -25,12 +29,12 @@ function CornerstoneImageScrollbar({
       viewportId
     );
 
-    const { isCineEnabled } = CineService.getState();
+    const { isCineEnabled } = cineService.getState();
 
     if (isCineEnabled) {
       // on image scrollbar change, stop the CINE if it is playing
-      CineService.stopClip(element);
-      CineService.setCine({ id: viewportIndex, isPlaying: false });
+      cineService.stopClip(element);
+      cineService.setCine({ id: viewportIndex, isPlaying: false });
     }
 
     csToolsUtils.jumpToSlice(viewport.element, {
@@ -144,6 +148,7 @@ CornerstoneImageScrollbar.propTypes = {
   scrollbarHeight: PropTypes.string,
   imageSliceData: PropTypes.object.isRequired,
   setImageSliceData: PropTypes.func.isRequired,
+  servicesManager: PropTypes.object.isRequired,
 };
 
 export default CornerstoneImageScrollbar;

extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx

@@ -3,6 +3,7 @@ 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;
 
@@ -15,7 +16,7 @@ function CornerstoneViewportOverlay({
 }) {
   const {
     CornerstoneViewportService,
-    ToolBarService,
+    toolbarService,
   } = servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
@@ -25,19 +26,19 @@ function CornerstoneViewportOverlay({
    * Initial toolbar state
    */
   useEffect(() => {
-    setActiveTools(ToolBarService.getActiveTools());
+    setActiveTools(toolbarService.getActiveTools());
   }, []);
 
   useEffect(() => {
     let isMounted = true;
-    const { unsubscribe } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
       () => {
         if (!isMounted) {
           return;
         }
 
-        setActiveTools(ToolBarService.getActiveTools());
+        setActiveTools(toolbarService.getActiveTools());
       }
     );
 
@@ -287,6 +288,7 @@ CornerstoneViewportOverlay.propTypes = {
   viewportData: PropTypes.object,
   imageIndex: PropTypes.number,
   viewportIndex: PropTypes.number,
+  servicesManager: ServicesManager,
 };
 
 export default CornerstoneViewportOverlay;

extensions/cornerstone/src/commandsModule.ts

@@ -10,6 +10,7 @@ import {
   utilities as cstUtils,
   ReferenceLinesTool,
 } from '@cornerstonejs/tools';
+import { ServicesManager } from '@ohif/core';
 
 import { getEnabledElement as OHIFgetEnabledElement } from './state';
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
@@ -22,13 +23,13 @@ const commandsModule = ({ servicesManager }) => {
   const {
     ViewportGridService,
     ToolGroupService,
-    CineService,
-    ToolBarService,
+    cineService,
+    toolbarService,
     UIDialogService,
     CornerstoneViewportService,
     HangingProtocolService,
     UINotificationService,
-  } = servicesManager.services;
+  } = (servicesManager as ServicesManager).services;
 
   function _getActiveViewportEnabledElement() {
     const { activeViewportIndex } = ViewportGridService.getState();
@@ -92,11 +93,11 @@ const commandsModule = ({ servicesManager }) => {
     },
     toggleCine: () => {
       const { viewports } = ViewportGridService.getState();
-      const { isCineEnabled } = CineService.getState();
-      CineService.setIsCineEnabled(!isCineEnabled);
-      ToolBarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
+      const { isCineEnabled } = cineService.getState();
+      cineService.setIsCineEnabled(!isCineEnabled);
+      toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
       viewports.forEach((_, index) =>
-        CineService.setCine({ id: index, isPlaying: false })
+        cineService.setCine({ id: index, isPlaying: false })
       );
     },
     setWindowLevel({ window, level, toolGroupId }) {

extensions/cornerstone/src/index.tsx

@@ -87,12 +87,12 @@ const cornerstoneExtension = {
       // const onNewImageHandler = jumpData => {
       //   commandsManager.runCommand('jumpToImage', jumpData);
       // };
-      const { ToolBarService } = servicesManager.services;
+      const { ToolbarService } = servicesManager.services;
 
       return (
         <OHIFCornerstoneViewport
           {...props}
-          ToolBarService={ToolBarService}
+          ToolbarService={ToolbarService}
           servicesManager={servicesManager}
           commandsManager={commandsManager}
         />

extensions/cornerstone/src/init.tsx

@@ -68,7 +68,7 @@ export default async function init({
     UIDialogService,
     UIModalService,
     UINotificationService,
-    CineService,
+    cineService,
     CornerstoneViewportService,
     HangingProtocolService,
     ToolGroupService,
@@ -137,7 +137,7 @@ export default async function init({
     CornerstoneViewportService
   );
 
-  initCineService(CineService);
+  initCineService(cineService);
 
   const _getDefaultPosition = event => ({
     x: (event && event.currentPoints.client[0]) || 0,

extensions/cornerstone/src/initCineService.ts

@@ -1,6 +1,6 @@
 import { utilities } from '@cornerstonejs/tools';
 
-function initCineService(CineService) {
+function initCineService(cineService) {
   const playClip = (element, playClipOptions) => {
     return utilities.cine.playClip(element, playClipOptions);
   };
@@ -9,7 +9,7 @@ function initCineService(CineService) {
     return utilities.cine.stopClip(element);
   };
 
-  CineService.setServiceImplementation({ playClip, stopClip });
+  cineService.setServiceImplementation({ playClip, stopClip });
 }
 
 export default initCineService;

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -760,7 +760,8 @@ class CornerstoneViewportService implements IViewportService {
 
 export default function ExtendedCornerstoneViewportService(serviceManager) {
   return {
-    name: 'CornerstoneViewportService',
+    name: 'cornerstoneViewportService',
+    altName: 'CornerstoneViewportService',
     create: ({ configuration = {} }) => {
       return new CornerstoneViewportService(serviceManager);
     },

extensions/cornerstone/src/utils/mpr/toggleMPRHangingProtocol.ts

@@ -42,7 +42,7 @@ export default function toggleMPRHangingProtocol({
     UINotificationService,
     HangingProtocolService,
     ViewportGridService,
-    ToolBarService,
+    toolbarService,
   } = servicesManager.services;
 
   // TODO Introduce a service to persist the state of the current hanging protocol/app.
@@ -185,7 +185,7 @@ export default function toggleMPRHangingProtocol({
     }
   });
 
-  ToolBarService.recordInteraction({
+  toolbarService.recordInteraction({
     groupId: 'WindowLevel',
     itemId: 'WindowLevel',
     interactionType: 'tool',