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

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}