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

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -18,7 +18,6 @@ import { setEnabledElement } from '../state';
 import './OHIFCornerstoneViewport.css';
 import CornerstoneOverlays from './Overlays/CornerstoneOverlays';
 import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
-import CornerstoneServices from '../types/CornerstoneServices';
 import CinePlayer from '../components/CinePlayer';
 import { Types } from '@ohif/core';
 
@@ -100,7 +99,7 @@ function areEqual(prevProps, nextProps) {
 
 // Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
 // Then we don't need to worry about the re-renders if the props change.
-const OHIFCornerstoneViewport = React.memo(props => {
+const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
   const {
     displaySets,
     dataSource,
@@ -108,11 +107,13 @@ const OHIFCornerstoneViewport = React.memo(props => {
     displaySetOptions,
     servicesManager,
     onElementEnabled,
+    // eslint-disable-next-line react/prop-types
     onElementDisabled,
     isJumpToMeasurementDisabled,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
+    // eslint-disable-next-line react/prop-types
     initialImageIndex,
     // if the viewport is part of a hanging protocol layout
     // we should not really rely on the old synchronizers and
@@ -120,6 +121,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
     // is not part of the hanging protocol layout. HPs should
     // define their own synchronizers. Since the synchronizers are
     // viewportId dependent and
+    // eslint-disable-next-line react/prop-types
     isHangingProtocolLayout,
   } = props;
 
@@ -152,7 +154,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
     viewportGridService,
     stateSyncService,
     viewportActionCornersService,
-  } = servicesManager.services as CornerstoneServices;
+  } = servicesManager.services;
 
   const [viewportDialogState] = useViewportDialog();
   // useCallback for scroll bar height calculation

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

@@ -5,7 +5,7 @@ import CustomizableViewportOverlay from './CustomizableViewportOverlay';
 import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';
 
-function CornerstoneOverlays(props) {
+function CornerstoneOverlays(props: withAppTypes) {
   const { viewportId, element, scrollbarHeight, servicesManager } = props;
   const { cornerstoneViewportService } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = useState({

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/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';
@@ -19,7 +18,7 @@ interface OverlayItemProps {
   element: HTMLElement;
   viewportData: ViewportData;
   imageSliceData: ImageSliceData;
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   viewportId: string;
   instance: InstanceMetadata;
   customization: any;
@@ -59,7 +58,7 @@ function CustomizableViewportOverlay({
   viewportData: ViewportData;
   imageSliceData: ImageSliceData;
   viewportId: string;
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
 }) {
   const { cornerstoneViewportService, customizationService, toolGroupService } =
     servicesManager.services;

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

@@ -3,7 +3,6 @@ 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,8 +12,8 @@ function CornerstoneImageScrollbar({
   setImageSliceData,
   scrollbarHeight,
   servicesManager,
-}) {
-  const { cineService, cornerstoneViewportService } = (servicesManager as ServicesManger).services;
+}: withAppTypes) {
+  const { cineService, cornerstoneViewportService } = servicesManager.services;
 
   const onImageScrollbarChange = (imageIndex, viewportId) => {
     const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

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

@@ -22,7 +22,7 @@ function ViewportOrientationMarkers({
   viewportId,
   servicesManager,
   orientationMarkers = ['top', 'left'],
-}) {
+}: withAppTypes) {
   // Rotation is in degrees
   const [rotation, setRotation] = useState(0);
   const [flipHorizontal, setFlipHorizontal] = useState(false);

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/ActiveViewportWindowLevel/ActiveViewportWindowLevel.tsx

@@ -1,14 +1,9 @@
 import React, { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { ServicesManager } from '@ohif/core';
 import { useViewportGrid } from '@ohif/ui';
 import ViewportWindowLevel from '../ViewportWindowLevel/ViewportWindowLevel';
 
-const ActiveViewportWindowLevel = ({
-  servicesManager,
-}: {
-  servicesManager: ServicesManager;
-}): ReactElement => {
+const ActiveViewportWindowLevel = ({ servicesManager }: withAppTypes): ReactElement => {
   const [viewportGrid] = useViewportGrid();
   const { activeViewportId } = viewportGrid;
 
@@ -25,7 +20,7 @@ const ActiveViewportWindowLevel = ({
 };
 
 ActiveViewportWindowLevel.propTypes = {
-  servicesManager: PropTypes.instanceOf(ServicesManager),
+  servicesManager: PropTypes.object.isRequired,
 };
 
 export default ActiveViewportWindowLevel;

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

@@ -4,7 +4,14 @@ import { Enums, eventTarget, cache } from '@cornerstonejs/core';
 import { Enums as StreamingEnums } from '@cornerstonejs/streaming-image-volume-loader';
 import { useAppConfig } from '@state';
 
-function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportId,
+  servicesManager,
+}: withAppTypes<{
+  enabledVPElement: HTMLElement;
+  viewportId: string;
+}>) {
   const { customizationService, displaySetService, viewportGridService } = servicesManager.services;
   const [{ isCineEnabled, cines }, cineService] = useCine();
   const [newStackFrameRate, setNewStackFrameRate] = useState(24);

extensions/cornerstone/src/components/ViewportWindowLevel/ViewportWindowLevel.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useCallback, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { ServicesManager } from '@ohif/core';
 import { PanelSection, WindowLevel } from '@ohif/ui';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import { Enums, eventTarget, cache as cs3DCache, utilities as csUtils } from '@cornerstonejs/core';
@@ -12,10 +11,9 @@ const { Events } = Enums;
 const ViewportWindowLevel = ({
   servicesManager,
   viewportId,
-}: {
-  servicesManager: ServicesManager;
+}: withAppTypes<{
   viewportId: string;
-}): ReactElement => {
+}>): ReactElement => {
   const { cornerstoneViewportService } = servicesManager.services;
   const [windowLevels, setWindowLevels] = useState([]);
   const [cachedHistograms, setCachedHistograms] = useState({});
@@ -380,7 +378,7 @@ const ViewportWindowLevel = ({
 };
 
 ViewportWindowLevel.propTypes = {
-  servicesManager: PropTypes.instanceOf(ServicesManager),
+  servicesManager: PropTypes.object.isRequired,
   viewportId: PropTypes.string.isRequired,
 };
 

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

@@ -8,10 +8,10 @@ export function setViewportColorbar(
   viewportId,
   displaySets,
   commandsManager,
-  serviceManager,
+  servicesManager: AppTypes.ServicesManager,
   colorbarOptions
 ) {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
@@ -59,10 +59,10 @@ export function Colorbar({
   viewportId,
   displaySets,
   commandsManager,
-  serviceManager,
+  servicesManager,
   colorbarProperties,
-}: ColorbarProps): ReactElement {
-  const { colorbarService } = serviceManager.services;
+}: withAppTypes<ColorbarProps>): ReactElement {
+  const { colorbarService } = servicesManager.services;
   const {
     width: colorbarWidth,
     colorbarTickPosition,
@@ -73,7 +73,7 @@ export function Colorbar({
   const [showColorbar, setShowColorbar] = useState(colorbarService.hasColorbar(viewportId));
 
   const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, serviceManager, {
+    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
       viewportId,
       colormaps,
       ticks: {

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

@@ -8,9 +8,9 @@ export function Colormap({
   viewportId,
   displaySets,
   commandsManager,
-  serviceManager,
+  servicesManager,
 }: ColormapProps): ReactElement {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
 
   const [activeDisplaySet, setActiveDisplaySet] = useState(displaySets[0]);
 

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

@@ -2,11 +2,11 @@ import React, { ReactElement, useState, useEffect, useCallback } from 'react';
 import { VolumeLightingProps } from '../../types/ViewportPresets';
 
 export function VolumeLighting({
-  serviceManager,
+  servicesManager,
   commandsManager,
   viewportId,
 }: VolumeLightingProps): ReactElement {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const [ambient, setAmbient] = useState(null);
   const [diffuse, setDiffuse] = useState(null);
   const [specular, setSpecular] = useState(null);

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

@@ -9,21 +9,21 @@ export function VolumeRenderingOptions({
   viewportId,
   commandsManager,
   volumeRenderingQualityRange,
-  serviceManager,
+  servicesManager,
 }: VolumeRenderingOptionsProps): ReactElement {
   return (
     <AllInOneMenu.ItemPanel>
       <VolumeRenderingQuality
         viewportId={viewportId}
         commandsManager={commandsManager}
-        serviceManager={serviceManager}
+        servicesManager={servicesManager}
         volumeRenderingQualityRange={volumeRenderingQualityRange}
       />
 
       <VolumeShift
         viewportId={viewportId}
         commandsManager={commandsManager}
-        serviceManager={serviceManager}
+        servicesManager={servicesManager}
       />
       <div className="all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start">
         <div className="text-aqua-pale text-[13px]">LIGHTING</div>
@@ -32,14 +32,14 @@ export function VolumeRenderingOptions({
       <div className="all-in-one-menu-item flex w-full justify-center">
         <VolumeShade
           commandsManager={commandsManager}
-          serviceManager={serviceManager}
+          servicesManager={servicesManager}
           viewportId={viewportId}
         />
       </div>
       <VolumeLighting
         viewportId={viewportId}
         commandsManager={commandsManager}
-        serviceManager={serviceManager}
+        servicesManager={servicesManager}
       />
     </AllInOneMenu.ItemPanel>
   );

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

@@ -5,11 +5,11 @@ import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
 
 export function VolumeRenderingPresets({
   viewportId,
-  serviceManager,
+  servicesManager,
   commandsManager,
   volumeRenderingPresets,
 }: VolumeRenderingPresetsProps): ReactElement {
-  const { uiModalService } = serviceManager.services;
+  const { uiModalService } = servicesManager.services;
 
   const onClickPresets = () => {
     uiModalService.show({

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

@@ -4,10 +4,10 @@ import { VolumeRenderingQualityProps } from '../../types/ViewportPresets';
 export function VolumeRenderingQuality({
   volumeRenderingQualityRange,
   commandsManager,
-  serviceManager,
+  servicesManager,
   viewportId,
 }: VolumeRenderingQualityProps): ReactElement {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const { min, max, step } = volumeRenderingQualityRange;
   const [quality, setQuality] = useState(null);
 

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

@@ -5,9 +5,9 @@ import { VolumeShadeProps } from '../../types/ViewportPresets';
 export function VolumeShade({
   commandsManager,
   viewportId,
-  serviceManager,
+  servicesManager,
 }: VolumeShadeProps): ReactElement {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const [shade, setShade] = useState(true);
   const [key, setKey] = useState(0);
 

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

@@ -4,9 +4,9 @@ import { VolumeShiftProps } from '../../types/ViewportPresets';
 export function VolumeShift({
   viewportId,
   commandsManager,
-  serviceManager,
+  servicesManager,
 }: VolumeShiftProps): ReactElement {
-  const { cornerstoneViewportService } = serviceManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const [minShift, setMinShift] = useState<number | null>(null);
   const [maxShift, setMaxShift] = useState<number | null>(null);
   const [shift, setShift] = useState<number | null>(

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

@@ -2,7 +2,6 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { AllInOneMenu, useViewportGrid } from '@ohif/ui';
-import { CommandsManager, ServicesManager } from '@ohif/core';
 import { Colormap } from './Colormap';
 import { Colorbar } from './Colorbar';
 import { setViewportColorbar } from './Colorbar';
@@ -22,8 +21,6 @@ export type WindowLevelActionMenuProps = {
   presets: Array<Record<string, Array<WindowLevelPreset>>>;
   verticalDirection: AllInOneMenu.VerticalDirection;
   horizontalDirection: AllInOneMenu.HorizontalDirection;
-  commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
   colorbarProperties: ColorbarProperties;
   displaySets: Array<any>;
   volumeRenderingPresets: Array<ViewportPreset>;
@@ -37,12 +34,12 @@ export function WindowLevelActionMenu({
   verticalDirection,
   horizontalDirection,
   commandsManager,
-  serviceManager,
+  servicesManager,
   colorbarProperties,
   displaySets,
   volumeRenderingPresets,
   volumeRenderingQualityRange,
-}: WindowLevelActionMenuProps): ReactElement {
+}: withAppTypes<WindowLevelActionMenuProps>): ReactElement {
   const {
     colormaps,
     colorbarContainerPosition,
@@ -50,7 +47,7 @@ export function WindowLevelActionMenu({
     colorbarTickPosition,
     width: colorbarWidth,
   } = colorbarProperties;
-  const { colorbarService, cornerstoneViewportService } = serviceManager.services;
+  const { colorbarService, cornerstoneViewportService } = servicesManager.services;
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
   const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
   const backgroundColor = viewportInfo.getViewportOptions().background;
@@ -68,7 +65,7 @@ export function WindowLevelActionMenu({
   const [is3DVolume, setIs3DVolume] = useState(false);
 
   const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, serviceManager, {
+    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
       colormaps,
       ticks: {
         position: colorbarTickPosition,
@@ -138,7 +135,7 @@ export function WindowLevelActionMenu({
             viewportId={viewportId}
             displaySets={displaySets.filter(ds => !nonImageModalities.includes(ds.Modality))}
             commandsManager={commandsManager}
-            serviceManager={serviceManager}
+            servicesManager={servicesManager}
             colorbarProperties={colorbarProperties}
           />
         )}
@@ -154,7 +151,7 @@ export function WindowLevelActionMenu({
               viewportId={viewportId}
               displaySets={displaySets.filter(ds => !nonImageModalities.includes(ds.Modality))}
               commandsManager={commandsManager}
-              serviceManager={serviceManager}
+              servicesManager={servicesManager}
             />
           </AllInOneMenu.SubMenu>
         )}
@@ -175,7 +172,7 @@ export function WindowLevelActionMenu({
 
         {volumeRenderingPresets && is3DVolume && (
           <VolumeRenderingPresets
-            serviceManager={serviceManager}
+            servicesManager={servicesManager}
             viewportId={viewportId}
             commandsManager={commandsManager}
             volumeRenderingPresets={volumeRenderingPresets}
@@ -188,7 +185,7 @@ export function WindowLevelActionMenu({
               viewportId={viewportId}
               commandsManager={commandsManager}
               volumeRenderingQualityRange={volumeRenderingQualityRange}
-              serviceManager={serviceManager}
+              servicesManager={servicesManager}
             />
           </AllInOneMenu.SubMenu>
         )}

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

@@ -9,7 +9,7 @@ export function getWindowLevelActionMenu({
   commandsManager,
   verticalDirection,
   horizontalDirection,
-}): ReactNode {
+}: withAppTypes): ReactNode {
   const { customizationService } = servicesManager.services;
 
   const { presets } = customizationService.get('cornerstone.windowLevelPresets');
@@ -32,7 +32,7 @@ export function getWindowLevelActionMenu({
       verticalDirection={verticalDirection}
       horizontalDirection={horizontalDirection}
       commandsManager={commandsManager}
-      serviceManager={servicesManager}
+      servicesManager={servicesManager}
       colorbarProperties={colorbarProperties}
       displaySets={displaySets}
       volumeRenderingPresets={volumeRenderingPresets}

extensions/cornerstone/src/getToolbarModule.tsx

@@ -6,7 +6,7 @@ const getToggledClassName = (isToggled: boolean) => {
     : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
 };
 
-export default function getToolbarModule({ commandsManager, servicesManager }) {
+export default function getToolbarModule({ commandsManager, servicesManager }: withAppTypes) {
   const {
     toolGroupService,
     toolbarService,

extensions/cornerstone/src/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@cornerstonejs/core';
 import * as csStreamingImageVolumeLoader from '@cornerstonejs/streaming-image-volume-loader';
 import { Enums as cs3DToolsEnums } from '@cornerstonejs/tools';
-import { ServicesManager, Types } from '@ohif/core';
+import { Types } from '@ohif/core';
 
 import init from './init';
 import getCustomizationModule from './getCustomizationModule';
@@ -61,7 +61,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
    */
   id,
 
-  onModeEnter: ({ servicesManager }): void => {
+  onModeEnter: ({ servicesManager }: withAppTypes): void => {
     const { cornerstoneViewportService, toolbarService, segmentationService } =
       servicesManager.services;
     toolbarService.registerEventForToolbarUpdate(cornerstoneViewportService, [
@@ -79,7 +79,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
     ]);
   },
 
-  onModeExit: ({ servicesManager }): void => {
+  onModeExit: ({ servicesManager }: withAppTypes): void => {
     const { cineService } = servicesManager.services;
     // Empty out the image load and retrieval pools to prevent memory leaks
     // on the mode exits
@@ -132,7 +132,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
       // const onNewImageHandler = jumpData => {
       //   commandsManager.runCommand('jumpToImage', jumpData);
       // };
-      const { toolbarService } = (servicesManager as ServicesManager).services;
+      const { toolbarService } = servicesManager.services;
 
       return (
         <OHIFCornerstoneViewport

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?
@@ -101,7 +98,7 @@ export default async function init({
     hangingProtocolService,
     viewportGridService,
     stateSyncService,
-  } = servicesManager.services as CornerstoneServices;
+  } = servicesManager.services;
 
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;

extensions/cornerstone/src/initCineService.ts

@@ -19,7 +19,7 @@ function _getVolumeFromViewport(viewport) {
  * @param srcViewportIndex Source viewport index
  * @returns array with viewport information.
  */
-function _getSyncedViewports(servicesManager, srcViewportId) {
+function _getSyncedViewports(servicesManager: AppTypes.ServicesManager, srcViewportId) {
   const { viewportGridService, cornerstoneViewportService } = servicesManager.services;
 
   const { viewports: viewportsStates } = viewportGridService.getState();
@@ -48,7 +48,7 @@ function _getSyncedViewports(servicesManager, srcViewportId) {
     .map(({ viewportId }) => ({ viewportId }));
 }
 
-function initCineService(servicesManager) {
+function initCineService(servicesManager: AppTypes.ServicesManager) {
   const { cineService } = servicesManager.services;
 
   const getSyncedViewports = viewportId => {

extensions/cornerstone/src/initMeasurementService.ts

@@ -178,7 +178,7 @@ const initMeasurementService = (
   return csTools3DVer1MeasurementSource;
 };
 
-const connectToolsToMeasurementService = servicesManager => {
+const connectToolsToMeasurementService = (servicesManager: AppTypes.ServicesManager) => {
   const {
     measurementService,
     displaySetService,

extensions/cornerstone/src/services/CornerstoneCacheService/CornerstoneCacheService.ts

@@ -1,4 +1,4 @@
-import { ServicesManager, Types } from '@ohif/core';
+import { Types } from '@ohif/core';
 import { cache as cs3DCache, Enums, volumeLoader, utilities as utils } from '@cornerstonejs/core';
 
 import getCornerstoneViewportType from '../../utils/getCornerstoneViewportType';
@@ -17,9 +17,9 @@ class CornerstoneCacheService {
 
   stackImageIds: Map<string, string[]> = new Map();
   volumeImageIds: Map<string, string[]> = new Map();
-  readonly servicesManager: ServicesManager;
+  readonly servicesManager: AppTypes.ServicesManager;
 
-  constructor(servicesManager: ServicesManager) {
+  constructor(servicesManager: AppTypes.ServicesManager) {
     this.servicesManager = servicesManager;
   }
 

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -1,4 +1,4 @@
-import { Types as OhifTypes, ServicesManager, PubSubService } from '@ohif/core';
+import { Types as OhifTypes, PubSubService } from '@ohif/core';
 import {
   cache,
   Enums as csEnums,
@@ -60,7 +60,7 @@ class SegmentationService extends PubSubService {
   };
 
   segmentations: Record<string, Segmentation>;
-  readonly servicesManager: ServicesManager;
+  readonly servicesManager: AppTypes.ServicesManager;
   highlightIntervalId = null;
   readonly EVENTS = EVENTS;
 

extensions/cornerstone/src/services/SyncGroupService/SyncGroupService.ts

@@ -1,7 +1,7 @@
 import { synchronizers, SynchronizerManager, Synchronizer } from '@cornerstonejs/tools';
 import { getRenderingEngines, utilities } from '@cornerstonejs/core';
 
-import { pubSubServiceInterface, Types, ServicesManager } from '@ohif/core';
+import { pubSubServiceInterface, Types } from '@ohif/core';
 
 const EVENTS = {
   TOOL_GROUP_CREATED: 'event::cornerstone::syncgroupservice:toolgroupcreated',
@@ -40,7 +40,7 @@ export default class SyncGroupService {
     },
   };
 
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   listeners: { [key: string]: (...args: any[]) => void } = {};
   EVENTS: { [key: string]: string };
   synchronizerCreators: Record<string, SyncCreator> = {
@@ -55,8 +55,8 @@ export default class SyncGroupService {
 
   synchronizersByType: { [key: string]: Synchronizer[] } = {};
 
-  constructor(serviceManager: ServicesManager) {
-    this.servicesManager = serviceManager;
+  constructor(servicesManager: AppTypes.ServicesManager) {
+    this.servicesManager = servicesManager;
     this.listeners = {};
     this.EVENTS = EVENTS;
     //

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

@@ -32,7 +32,10 @@ export default class ToolGroupService {
     },
   };
 
-  serviceManager: any;
+  servicesManager: AppTypes.ServicesManager;
+  cornerstoneViewportService: any;
+  viewportGridService: any;
+  uiNotificationService: any;
   private toolGroupIds: Set<string> = new Set();
   /**
    * Service-specific
@@ -40,9 +43,9 @@ export default class ToolGroupService {
   listeners: { [key: string]: Function[] };
   EVENTS: { [key: string]: string };
 
-  constructor(serviceManager) {
+  constructor(servicesManager: AppTypes.ServicesManager) {
     const { cornerstoneViewportService, viewportGridService, uiNotificationService } =
-      serviceManager.services;
+      servicesManager.services;
     this.cornerstoneViewportService = cornerstoneViewportService;
     this.viewportGridService = viewportGridService;
     this.uiNotificationService = uiNotificationService;

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

@@ -1,4 +1,4 @@
-import { PubSubService, ServicesManager } from '@ohif/core';
+import { PubSubService } from '@ohif/core';
 import * as OhifTypes from '@ohif/core/types';
 import {
   RenderingEngine,
@@ -52,14 +52,14 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
   enableResizeDetector: true;
   resizeRefreshRateMs: 200;
   resizeRefreshMode: 'debounce';
-  servicesManager = null;
+  servicesManager: AppTypes.ServicesManager = null;
 
   resizeQueue = [];
   viewportResizeTimer = null;
   gridResizeDelay = 50;
   gridResizeTimeOut = null;
 
-  constructor(servicesManager: ServicesManager) {
+  constructor(servicesManager: AppTypes.ServicesManager) {
     super(EVENTS);
     this.renderingEngine = null;
     this.viewportGridResizeObserver = null;

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

@@ -8,7 +8,7 @@ import { Presentations } from '../../types/Presentation';
  * updating the viewport.
  */
 export interface IViewportService {
-  servicesManager: unknown;
+  servicesManager: AppTypes.ServicesManager;
   hangingProtocolService: unknown;
   renderingEngine: unknown;
   viewportGridResizeObserver: unknown;

extensions/cornerstone/src/tools/CalibrationLineTool.ts

@@ -1,4 +1,3 @@
-import { metaData } from '@cornerstonejs/core';
 import { LengthTool, utilities } from '@cornerstonejs/tools';
 import callInputDialog from '../utils/callInputDialog';
 import getActiveViewportEnabledElement from '../utils/getActiveViewportEnabledElement';
@@ -49,7 +48,10 @@ function calculateLength3(pos1, pos2) {
 
 export default CalibrationLineTool;
 
-export function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
+export function onCompletedCalibrationLine(
+  servicesManager: AppTypes.ServicesManager,
+  csToolsEvent
+) {
   const { uiDialogService, viewportGridService } = servicesManager.services;
 
   // calculate length (mm) with the current Pixel Spacing

extensions/cornerstone/src/types/AppTypes.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import CornerstoneCacheServiceType from '../services/CornerstoneCacheService';
+import CornerstoneViewportServiceType from '../services/ViewportService/CornerstoneViewportService';
+import SegmentationServiceType from '../services/SegmentationService';
+import SyncGroupServiceType from '../services/SyncGroupService';
+import ToolGroupServiceType from '../services/ToolGroupService';
+import ViewportActionCornersServiceType from '../services/ViewportActionCornersService/ViewportActionCornersService';
+import ColorbarServiceType from '../services/ColorbarService';
+
+declare global {
+  namespace AppTypes {
+    export type CornerstoneCacheService = CornerstoneCacheServiceType;
+    export type CornerstoneViewportService = CornerstoneViewportServiceType;
+    export type SegmentationService = SegmentationServiceType;
+    export type SyncGroupService = SyncGroupServiceType;
+    export type ToolGroupService = ToolGroupServiceType;
+    export type ViewportActionCornersService = ViewportActionCornersServiceType;
+    export type ColorbarService = ColorbarServiceType;
+    export interface Services {
+      cornerstoneViewportService?: CornerstoneViewportServiceType;
+      toolGroupService?: ToolGroupServiceType;
+      syncGroupService?: SyncGroupServiceType;
+      segmentationService?: SegmentationServiceType;
+      cornerstoneCacheService?: CornerstoneCacheServiceType;
+      viewportActionCornersService?: ViewportActionCornersServiceType;
+      colorbarService?: ColorbarServiceType;
+    }
+  }
+}

extensions/cornerstone/src/types/Colorbar.ts

@@ -1,5 +1,4 @@
 import { ColorMapPreset } from './Colormap';
-import { CommandsManager, ServicesManager } from '@ohif/core';
 
 export type ColorbarOptions = {
   position: string;
@@ -11,8 +10,6 @@ export type ColorbarOptions = {
 
 export type ColorbarProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
   displaySets: Array<any>;
   colorbarProperties: ColorbarProperties;
 };

extensions/cornerstone/src/types/Colormap.ts

@@ -1,4 +1,4 @@
-import { CommandsManager, ServicesManager } from '@ohif/core';
+import { CommandsManager } from '@ohif/core';
 
 export type ColorMapPreset = {
   ColorSpace;
@@ -10,7 +10,7 @@ export type ColorMapPreset = {
 export type ColormapProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   colormaps: Array<ColorMapPreset>;
   displaySets: Array<any>;
 };

extensions/cornerstone/src/types/CornerstoneServices.ts

@@ -5,6 +5,7 @@ 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;
@@ -13,6 +14,7 @@ interface CornerstoneServices extends Types.Services {
   segmentationService: SegmentationService;
   cornerstoneCacheService: CornerstoneCacheService;
   viewportActionCornersService: ViewportActionCornersService;
+  colorbarService: ColorbarService;
 }
 
 export default CornerstoneServices;

extensions/cornerstone/src/types/ViewportPresets.ts

@@ -1,4 +1,4 @@
-import { ServicesManager, CommandsManager } from '@ohif/core';
+import { CommandsManager } from '@ohif/core';
 
 export type ViewportPreset = {
   name: string;
@@ -15,7 +15,7 @@ export type ViewportPreset = {
 
 export type VolumeRenderingPresetsProps = {
   viewportId: string;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   commandsManager: CommandsManager;
   volumeRenderingPresets: ViewportPreset[];
 };
@@ -30,7 +30,7 @@ export type VolumeRenderingPresetsContentProps = {
 export type VolumeRenderingOptionsProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   volumeRenderingQualityRange: VolumeRenderingQualityRange;
 };
 
@@ -43,24 +43,24 @@ export type VolumeRenderingQualityRange = {
 export type VolumeRenderingQualityProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   volumeRenderingQualityRange: VolumeRenderingQualityRange;
 };
 
 export type VolumeShiftProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
 };
 
 export type VolumeShadeProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
 };
 
 export type VolumeLightingProps = {
   viewportId: string;
   commandsManager: CommandsManager;
-  serviceManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
 };

extensions/cornerstone/src/utils/imageSliceSync/toggleImageSliceSync.ts

@@ -1,10 +1,12 @@
+import { DisplaySetService, ViewportGridService } from '@ohif/core';
+
 const IMAGE_SLICE_SYNC_NAME = 'IMAGE_SLICE_SYNC';
 
 export default function toggleImageSliceSync({
   servicesManager,
   viewports: providedViewports,
   syncId,
-}) {
+}: withAppTypes) {
   const { syncGroupService, viewportGridService, displaySetService, cornerstoneViewportService } =
     servicesManager.services;
 
@@ -46,7 +48,7 @@ export default function toggleImageSliceSync({
   });
 }
 
-function disableSync(syncName, servicesManager) {
+function disableSync(syncName, servicesManager: AppTypes.ServicesManager) {
   const { syncGroupService, viewportGridService, displaySetService, cornerstoneViewportService } =
     servicesManager.services;
   const viewports = getReconstructableStackViewports(viewportGridService, displaySetService);
@@ -68,7 +70,10 @@ function disableSync(syncName, servicesManager) {
  * Gets the consistent spacing stack viewport types, which are the ones which
  * can be navigated using the stack image sync right now.
  */
-function getReconstructableStackViewports(viewportGridService, displaySetService) {
+function getReconstructableStackViewports(
+  viewportGridService: ViewportGridService,
+  displaySetService: DisplaySetService
+) {
   let { viewports } = viewportGridService.getState();
 
   viewports = [...viewports.values()];

extensions/cornerstone/src/utils/toggleVOISliceSync.ts

@@ -1,3 +1,5 @@
+import { DisplaySetService, ViewportGridService } from '@ohif/core';
+
 const VOI_SYNC_NAME = 'VOI_SYNC';
 
 const getSyncId = modality => `${VOI_SYNC_NAME}_${modality}`;
@@ -6,7 +8,7 @@ export default function toggleVOISliceSync({
   servicesManager,
   viewports: providedViewports,
   syncId,
-}) {
+}: withAppTypes) {
   const { syncGroupService, viewportGridService, displaySetService, cornerstoneViewportService } =
     servicesManager.services;
 
@@ -52,7 +54,7 @@ export default function toggleVOISliceSync({
   }
 }
 
-function disableSync(modalityViewports, syncId, servicesManager) {
+function disableSync(modalityViewports, syncId, servicesManager: AppTypes.ServicesManager) {
   const { syncGroupService, cornerstoneViewportService } = servicesManager.services;
 
   const viewports = modalityViewports;
@@ -70,7 +72,10 @@ function disableSync(modalityViewports, syncId, servicesManager) {
   });
 }
 
-function groupViewportsByModality(viewportGridService, displaySetService) {
+function groupViewportsByModality(
+  viewportGridService: ViewportGridService,
+  displaySetService: DisplaySetService
+) {
   let { viewports } = viewportGridService.getState();
 
   viewports = [...viewports.values()];