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

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { PanelSection, Input, Button } from '@ohif/ui';
-import { DicomMetadataStore, ServicesManager } from '@ohif/core';
+import { DicomMetadataStore } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
 const DEFAULT_MEATADATA = {
@@ -22,11 +22,10 @@ const DEFAULT_MEATADATA = {
  * @param param0
  * @returns
  */
-export default function PanelPetSUV({ servicesManager, commandsManager }) {
+export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) {
   const { t } = useTranslation('PanelSUV');
-  const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } = (
-    servicesManager as ServicesManager
-  ).services;
+  const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } =
+    servicesManager.services;
   const [metadata, setMetadata] = useState(DEFAULT_MEATADATA);
   const [ptDisplaySet, setPtDisplaySet] = useState(null);
 

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdExport.tsx

@@ -6,7 +6,10 @@ import { eventTarget } from '@cornerstonejs/core';
 import { Enums } from '@cornerstonejs/tools';
 import { handleROIThresholding } from '../../utils/handleROIThresholding';
 
-export default function PanelRoiThresholdSegmentation({ servicesManager, commandsManager }) {
+export default function PanelRoiThresholdSegmentation({
+  servicesManager,
+  commandsManager,
+}: withAppTypes) {
   const { segmentationService, uiNotificationService } = servicesManager.services;
   const { t } = useTranslation('PanelSUVExport');
 

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
-function segmentationItemEditHandler({ id, servicesManager }) {
+function segmentationItemEditHandler({ id, servicesManager }: withAppTypes) {
   const { segmentationService, uiDialogService } = servicesManager.services;
 
   const segmentation = segmentationService.getSegmentation(id);

extensions/tmtv/src/Panels/RectangleROIOptions.tsx

@@ -40,7 +40,7 @@ function reducer(state, action) {
   }
 }
 
-function RectangleROIOptions({ servicesManager, commandsManager }) {
+function RectangleROIOptions({ servicesManager, commandsManager }: withAppTypes) {
   const { segmentationService } = servicesManager.services;
   const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
 

extensions/tmtv/src/commandsModule.ts

@@ -35,7 +35,7 @@ const workerFn = () => {
   });
 };
 
-const commandsModule = ({ servicesManager, commandsManager, extensionManager }) => {
+const commandsModule = ({ servicesManager, commandsManager, extensionManager }: withAppTypes) => {
   const {
     viewportGridService,
     uiNotificationService,
@@ -354,7 +354,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
 
       let segmentationMax = -Infinity;
       let segmentationMin = Infinity;
-      let segmentationValues = [];
+      const segmentationValues = [];
 
       let voxelCount = 0;
       for (let i = 0; i < scalarData.length; i++) {
@@ -551,7 +551,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
         segmentations = segmentationService.getSegmentations();
       }
 
-      let report = {};
+      const report = {};
 
       for (const segmentation of segmentations) {
         const { id, label, cachedStats: data } = segmentation;
@@ -633,7 +633,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
 
       const fusionViewportIds = toolGroup.getViewportIds();
 
-      let viewports = [];
+      const viewports = [];
       fusionViewportIds.forEach(viewportId => {
         commandsManager.runCommand('setViewportColormap', {
           viewportId,