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',

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',

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button } from '@ohif/ui';
-import { DicomMetadataStore } from '@ohif/core';
+import { DicomMetadataStore, ServicesManager } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
 const DEFAULT_MEATADATA = {
@@ -27,9 +27,9 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
   const {
     DisplaySetService,
     ToolGroupService,
-    ToolBarService,
+    toolbarService,
     HangingProtocolService,
-  } = servicesManager.services;
+  } = (servicesManager as ServicesManager).services;
   const [metadata, setMetadata] = useState(DEFAULT_MEATADATA);
   const [ptDisplaySet, setPtDisplaySet] = useState(null);
 
@@ -126,9 +126,9 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
       });
     });
 
-    ToolBarService.state.toggles['Crosshairs'] = false;
-    ToolBarService._broadcastEvent(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED
+    toolbarService.state.toggles['Crosshairs'] = false;
+    toolbarService._broadcastEvent(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED
     );
 
     // metadata should be dcmjs naturalized