feat(typings): Enhance typing support with withAppTypes and custom services throughout OHIF

extensions/cornerstone/src/commandsModule.ts

@@ -20,7 +20,6 @@ import { callLabelAutocompleteDialog, showLabelAnnotationPopup } from './utils/c
 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 = {
@@ -44,7 +43,7 @@ function commandsModule({
     colorbarService,
     hangingProtocolService,
     syncGroupService,
-  } = servicesManager.services as CornerstoneServices;
+  } = servicesManager.services;
 
   const { measurementServiceSource } = this;
 

extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx

@@ -3,8 +3,17 @@ import { CinePlayer, useCine } from '@ohif/ui';
 import { Enums, eventTarget, cache } from '@cornerstonejs/core';
 import { Enums as StreamingEnums } from '@cornerstonejs/streaming-image-volume-loader';
 import { useAppConfig } from '@state';
+import { ServicesManager } from '@ohif/core';
 
-function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportId,
+  servicesManager,
+}: {
+  enabledVPElement: HTMLElement;
+  viewportId: string;
+  servicesManager: ServicesManager;
+}) {
   const { customizationService, displaySetService, viewportGridService } = servicesManager.services;
   const [{ isCineEnabled, cines }, cineService] = useCine();
   const [newStackFrameRate, setNewStackFrameRate] = useState(24);

extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { WindowLevelActionMenu } from './WindowLevelActionMenu';
+import { ServicesManager } from '@ohif/core';
 
 export function getWindowLevelActionMenu({
   viewportId,
@@ -9,6 +10,8 @@ export function getWindowLevelActionMenu({
   commandsManager,
   verticalDirection,
   horizontalDirection,
+}: {
+  servicesManager: ServicesManager;
 }): ReactNode {
   const { customizationService } = servicesManager.services;
 

extensions/cornerstone/src/getToolbarModule.tsx

@@ -1,12 +1,19 @@
 import { Enums } from '@cornerstonejs/tools';
+import { CommandsManager, ServicesManager } from '@ohif/core';
 
 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 }) {
+export default function getToolbarModule({
+  commandsManager,
+  servicesManager,
+}: {
+  commandsManager: CommandsManager;
+  servicesManager: ServicesManager;
+}) {
   const {
     toolGroupService,
     toolbarService,

extensions/cornerstone/src/index.tsx

@@ -61,7 +61,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
    */
   id,
 
-  onModeEnter: ({ servicesManager }): void => {
+  onModeEnter: ({ servicesManager }: { servicesManager: ServicesManager }): void => {
     const { cornerstoneViewportService, toolbarService, segmentationService } =
       servicesManager.services;
     toolbarService.registerEventForToolbarUpdate(cornerstoneViewportService, [
@@ -79,7 +79,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
     ]);
   },
 
-  onModeExit: ({ servicesManager }): void => {
+  onModeExit: ({ servicesManager }: { servicesManager: ServicesManager }): void => {
     const { cineService } = servicesManager.services;
     // Empty out the image load and retrieval pools to prevent memory leaks
     // on the mode exits

extensions/cornerstone/src/init.tsx

@@ -30,12 +30,9 @@ import nthLoader from './utils/nthLoader';
 import interleaveTopToBottom from './utils/interleaveTopToBottom';
 import initContextMenu from './initContextMenu';
 import initDoubleClick from './initDoubleClick';
-import { CornerstoneServices } from './types';
 import initViewTiming from './utils/initViewTiming';
 import { colormaps } from './utils/colormaps';
 
-import { debounce } from 'lodash';
-
 const { registerColormap } = csUtilities.colormap;
 
 // TODO: Cypress tests are currently grabbing this from the window?

extensions/cornerstone/src/initCineService.ts

@@ -1,5 +1,6 @@
 import { cache } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/tools';
+import { ServicesManager } from '@ohif/core';
 
 function _getVolumesFromViewport(viewport) {
   return viewport ? viewport.getActors().map(actor => cache.getVolume(actor.uid)) : [];
@@ -19,7 +20,7 @@ function _getVolumeFromViewport(viewport) {
  * @param srcViewportIndex Source viewport index
  * @returns array with viewport information.
  */
-function _getSyncedViewports(servicesManager, srcViewportId) {
+function _getSyncedViewports(servicesManager: ServicesManager, srcViewportId) {
   const { viewportGridService, cornerstoneViewportService } = servicesManager.services;
 
   const { viewports: viewportsStates } = viewportGridService.getState();
@@ -48,7 +49,7 @@ function _getSyncedViewports(servicesManager, srcViewportId) {
     .map(({ viewportId }) => ({ viewportId }));
 }
 
-function initCineService(servicesManager) {
+function initCineService(servicesManager: ServicesManager) {
   const { cineService } = servicesManager.services;
 
   const getSyncedViewports = viewportId => {

extensions/cornerstone/src/initMeasurementService.js → extensions/cornerstone/src/initMeasurementService.ts

@@ -1,6 +1,6 @@
 import { eventTarget } from '@cornerstonejs/core';
 import { Enums, annotation } from '@cornerstonejs/tools';
-import { DicomMetadataStore } from '@ohif/core';
+import { DicomMetadataStore, ServicesManager } from '@ohif/core';
 import { toolNames } from './initCornerstoneTools';
 import { onCompletedCalibrationLine } from './tools/CalibrationLineTool';
 
@@ -178,7 +178,7 @@ const initMeasurementService = (
   return csTools3DVer1MeasurementSource;
 };
 
-const connectToolsToMeasurementService = servicesManager => {
+const connectToolsToMeasurementService = (servicesManager: ServicesManager) => {
   const {
     measurementService,
     displaySetService,

extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts

@@ -1,7 +1,7 @@
 import { ToolGroupManager, Enums, Types } from '@cornerstonejs/tools';
 import { eventTarget } from '@cornerstonejs/core';
 
-import { Types as OhifTypes, pubSubServiceInterface } from '@ohif/core';
+import { Types as OhifTypes, ServicesManager, pubSubServiceInterface } from '@ohif/core';
 import getActiveViewportEnabledElement from '../../utils/getActiveViewportEnabledElement';
 
 const EVENTS = {
@@ -33,14 +33,17 @@ export default class ToolGroupService {
   };
 
   serviceManager: any;
+  cornerstoneViewportService: any;
+  viewportGridService: any;
+  uiNotificationService: any;
   private toolGroupIds: Set<string> = new Set();
   /**
    * Service-specific
    */
   listeners: { [key: string]: Function[] };
   EVENTS: { [key: string]: string };
 
-  constructor(serviceManager) {
+  constructor(serviceManager: ServicesManager) {
     const { cornerstoneViewportService, viewportGridService, uiNotificationService } =
       serviceManager.services;
     this.cornerstoneViewportService = cornerstoneViewportService;

extensions/cornerstone/src/types/CornerstoneServices.ts

@@ -5,14 +5,18 @@ import SegmentationService from '../services/SegmentationService';
 import CornerstoneCacheService from '../services/CornerstoneCacheService';
 import CornerstoneViewportService from '../services/ViewportService/CornerstoneViewportService';
 import ViewportActionCornersService from '../services/ViewportActionCornersService/ViewportActionCornersService';
+import ColorbarService from '../services/ColorbarService';
 
-interface CornerstoneServices extends Types.Services {
-  cornerstoneViewportService: CornerstoneViewportService;
-  toolGroupService: ToolGroupService;
-  syncGroupService: SyncGroupService;
-  segmentationService: SegmentationService;
-  cornerstoneCacheService: CornerstoneCacheService;
-  viewportActionCornersService: ViewportActionCornersService;
+declare global {
+  interface CornerstoneServices extends Types.Services {
+    cornerstoneViewportService: CornerstoneViewportService;
+    toolGroupService: ToolGroupService;
+    syncGroupService: SyncGroupService;
+    segmentationService: SegmentationService;
+    cornerstoneCacheService: CornerstoneCacheService;
+    viewportActionCornersService: ViewportActionCornersService;
+    colorbarService: ColorbarService;
+  }
 }
 
 export default CornerstoneServices;

platform/core/src/services/ServicesManager.ts

@@ -1,10 +1,9 @@
 import log from './../log.js';
-import Services from '../types/Services';
 import CommandsManager from '../classes/CommandsManager';
 import ExtensionManager from '../extensions/ExtensionManager';
 
 export default class ServicesManager {
-  public services: Services = {};
+  public services: Services & CornerstoneServices = {};
   public registeredServiceNames: string[] = [];
   private _commandsManager: CommandsManager;
   private _extensionManager: ExtensionManager;
@@ -84,3 +83,10 @@ export default class ServicesManager {
     });
   }
 }
+
+// declare global for ServicesManager
+declare global {
+  interface Window {
+    ServicesManager: ServicesManager;
+  }
+}