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

extensions/cornerstone-dicom-rt/src/getSopClassHandlerModule.js → extensions/cornerstone-dicom-rt/src/getSopClassHandlerModule.ts

@@ -5,9 +5,13 @@ import loadRTStruct from './loadRTStruct';
 
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];
 
-let loadPromises = {};
+const loadPromises = {};
 
-function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager
+) {
   const instance = instances[0];
 
   const {
@@ -69,8 +73,8 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
   displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
 
   displaySet.getReferenceDisplaySet = () => {
-    const { DisplaySetService } = servicesManager.services;
-    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
+    const { displaySetService } = servicesManager.services;
+    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
       displaySet.referencedSeriesInstanceUID
     );
 
@@ -90,7 +94,7 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
   return [displaySet];
 }
 
-function _load(rtDisplaySet, servicesManager, extensionManager, headers) {
+function _load(rtDisplaySet, servicesManager: AppTypes.ServicesManager, extensionManager, headers) {
   const { SOPInstanceUID } = rtDisplaySet;
   const { segmentationService } = servicesManager.services;
   if (
@@ -168,7 +172,10 @@ function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
   return ReferencedSeriesSequence;
 }
 
-function _segmentationExistsInCache(rtDisplaySet, segmentationService) {
+function _segmentationExistsInCache(
+  rtDisplaySet,
+  segmentationService: AppTypes.SegmentationService
+) {
   // Todo: fix this
   return false;
   // This should be abstracted with the CornerstoneCacheService

extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts

@@ -13,7 +13,7 @@ function promptHydrateRT({
   toolGroupId = 'default',
   preHydrateCallbacks,
   hydrateRTDisplaySet,
-}) {
+}: withAppTypes) {
   const { uiViewportDialogService } = servicesManager.services;
   const extensionManager = servicesManager._extensionManager;
   const appConfig = extensionManager._appConfig;
@@ -41,7 +41,7 @@ function promptHydrateRT({
   });
 }
 
-function _askHydrate(uiViewportDialogService, viewportId) {
+function _askHydrate(uiViewportDialogService: AppTypes.UIViewportDialogService, viewportId) {
   return new Promise(function (resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
@@ -62,6 +62,7 @@ function _askHydrate(uiViewportDialogService, viewportId) {
     };
 
     uiViewportDialogService.show({
+      id: 'promptHydrateRT',
       viewportId,
       type: 'info',
       message,

extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx

@@ -8,7 +8,7 @@ import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
 
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
 
-function OHIFCornerstoneRTViewport(props) {
+function OHIFCornerstoneRTViewport(props: withAppTypes) {
   const {
     children,
     displaySets,

extensions/cornerstone-dicom-seg/src/commandsModule.ts

@@ -1,6 +1,6 @@
 import dcmjs from 'dcmjs';
 import { createReportDialogPrompt } from '@ohif/extension-default';
-import { ServicesManager, Types } from '@ohif/core';
+import { Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import {
   segmentation as cornerstoneToolsSegmentation,
@@ -48,7 +48,7 @@ const commandsModule = ({
     displaySetService,
     viewportGridService,
     toolGroupService,
-  } = (servicesManager as ServicesManager).services;
+  } = servicesManager.services;
 
   const actions = {
     /**

extensions/cornerstone-dicom-seg/src/getPanelModule.tsx

@@ -10,7 +10,7 @@ const getPanelModule = ({
   extensionManager,
   configuration,
   title,
-}) => {
+}: withAppTypes) => {
   const { customizationService } = servicesManager.services;
 
   const wrappedPanelSegmentation = configuration => {

extensions/cornerstone-dicom-seg/src/getSopClassHandlerModule.js → extensions/cornerstone-dicom-seg/src/getSopClassHandlerModule.ts

@@ -8,9 +8,13 @@ import { dicomlabToRGB } from './utils/dicomlabToRGB';
 
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
 
-let loadPromises = {};
+const loadPromises = {};
 
-function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager
+) {
   const instance = instances[0];
 
   const {
@@ -95,7 +99,12 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
   return [displaySet];
 }
 
-function _load(segDisplaySet, servicesManager, extensionManager, headers) {
+function _load(
+  segDisplaySet,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager,
+  headers
+) {
   const { SOPInstanceUID } = segDisplaySet;
   const { segmentationService } = servicesManager.services;
 
@@ -137,7 +146,12 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   return loadPromises[SOPInstanceUID];
 }
 
-async function _loadSegments({ extensionManager, servicesManager, segDisplaySet, headers }) {
+async function _loadSegments({
+  extensionManager,
+  servicesManager,
+  segDisplaySet,
+  headers,
+}: withAppTypes) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.common'
   );
@@ -212,7 +226,7 @@ async function _loadSegments({ extensionManager, servicesManager, segDisplaySet,
   Object.assign(segDisplaySet, results);
 }
 
-function _segmentationExists(segDisplaySet, segmentationService) {
+function _segmentationExists(segDisplaySet, segmentationService: AppTypes.SegmentationService) {
   // This should be abstracted with the CornerstoneCacheService
   return segmentationService.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }

extensions/cornerstone-dicom-seg/src/getToolbarModule.ts

@@ -1,4 +1,4 @@
-export function getToolbarModule({ servicesManager }) {
+export function getToolbarModule({ servicesManager }: withAppTypes) {
   const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
   return [
     {

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -17,7 +17,7 @@ export default function PanelSegmentation({
   commandsManager,
   extensionManager,
   configuration,
-}) {
+}: withAppTypes) {
   const {
     segmentationService,
     viewportGridService,

extensions/cornerstone-dicom-seg/src/utils/hydrationUtils.ts

@@ -22,7 +22,7 @@ async function updateViewportsForSegmentationRendering({
 }: {
   viewportId: string;
   loadFn: () => Promise<string>;
-  servicesManager: any;
+  servicesManager: AppTypes.ServicesManager;
   referencedDisplaySetInstanceUID?: string;
 }) {
   const { cornerstoneViewportService, segmentationService, viewportGridService } =
@@ -134,7 +134,7 @@ function getUpdatedViewportsForSegmentation({
   viewportId,
   servicesManager,
   referencedDisplaySetInstanceUID,
-}) {
+}: withAppTypes) {
   const { hangingProtocolService, displaySetService, segmentationService, viewportGridService } =
     servicesManager.services;
 

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -12,7 +12,7 @@ function promptHydrateSEG({
   viewportId,
   preHydrateCallbacks,
   hydrateSEGDisplaySet,
-}) {
+}: withAppTypes) {
   const { uiViewportDialogService } = servicesManager.services;
   const extensionManager = servicesManager._extensionManager;
   const appConfig = extensionManager._appConfig;

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -8,7 +8,7 @@ import _getStatusComponent from './_getStatusComponent';
 
 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';
 
-function OHIFCornerstoneSEGViewport(props) {
+function OHIFCornerstoneSEGViewport(props: withAppTypes) {
   const {
     children,
     displaySets,

extensions/cornerstone-dicom-sr/src/commandsModule.js → extensions/cornerstone-dicom-sr/src/commandsModule.ts

@@ -40,7 +40,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
   return dataset;
 };
 
-const commandsModule = props => {
+const commandsModule = (props: withAppTypes) => {
   const { servicesManager } = props;
   const { customizationService } = servicesManager.services;
   const actions = {
@@ -57,7 +57,7 @@ const commandsModule = props => {
       const reportBlob = dcmjs.data.datasetToBlob(srDataset);
 
       //Create a URL for the binary.
-      var objectUrl = URL.createObjectURL(reportBlob);
+      const objectUrl = URL.createObjectURL(reportBlob);
       window.location.assign(objectUrl);
     },
 

extensions/cornerstone-dicom-sr/src/getSopClassHandlerModule.ts

@@ -85,7 +85,11 @@ function addInstances(instances: InstanceMetadata[], displaySetService: DisplayS
  * @param servicesManager is the services that can be used for creating
  * @returns The list of display sets created for the given instances object
  */
-function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager
+) {
   // If the series has no instances, stop here
   if (!instances || !instances.length) {
     throw new Error('No instances were provided');
@@ -150,7 +154,7 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
   return [displaySet];
 }
 
-async function _load(displaySet, servicesManager, extensionManager) {
+async function _load(displaySet, servicesManager: AppTypes.ServicesManager, extensionManager) {
   const { displaySetService, measurementService } = servicesManager.services;
   const dataSources = extensionManager.getDataSources();
   const dataSource = dataSources[0];
@@ -223,7 +227,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
   srDisplaySet,
   newDisplaySet,
   dataSource,
-  servicesManager
+  servicesManager: AppTypes.ServicesManager
 ) {
   const { customizationService } = servicesManager.services;
   let unloadedMeasurements = srDisplaySet.measurements.filter(

extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.js → extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.ts

@@ -43,7 +43,7 @@ const convertSites = (codingValues, sites) => {
  *
  */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager, appConfig },
+  { servicesManager, extensionManager, appConfig }: withAppTypes,
   displaySetInstanceUID
 ) {
   const annotationManager = CsAnnotation.state.getAnnotationManager();

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ServicesManager, ExtensionManager } from '@ohif/core';
+import { ExtensionManager } from '@ohif/core';
 
 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
 
@@ -14,7 +14,7 @@ const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking'
 
 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
 
-function OHIFCornerstoneSRViewport(props) {
+function OHIFCornerstoneSRViewport(props: withAppTypes) {
   const { children, dataSource, displaySets, viewportOptions, servicesManager, extensionManager } =
     props;
 
@@ -369,7 +369,7 @@ OHIFCornerstoneSRViewport.propTypes = {
   viewportLabel: PropTypes.string,
   customProps: PropTypes.object,
   viewportOptions: PropTypes.object,
-  servicesManager: PropTypes.instanceOf(ServicesManager).isRequired,
+  servicesManager: PropTypes.object.isRequired,
   extensionManager: PropTypes.instanceOf(ExtensionManager).isRequired,
 };
 

extensions/cornerstone-dynamic-volume/src/actions/updateSegmentationsChartDisplaySet.ts

@@ -265,7 +265,7 @@ function _getInstanceFromSegmentations(segmentations, displaySetService) {
   return { seriesMetadata, instance };
 }
 
-function updateSegmentationsChartDisplaySet({ servicesManager }): void {
+function updateSegmentationsChartDisplaySet({ servicesManager }: withAppTypes): void {
   const { segmentationService, displaySetService } = servicesManager.services;
   const segmentations = segmentationService.getSegmentations();
   const { seriesMetadata, instance } =

extensions/cornerstone-dynamic-volume/src/commandsModule.ts

@@ -4,7 +4,7 @@ import { cache } from '@cornerstonejs/core';
 
 const LABELMAP = Enums.SegmentationRepresentations.Labelmap;
 
-const commandsModule = ({ commandsManager, servicesManager }) => {
+const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
   const services = servicesManager.services;
   const { displaySetService, viewportGridService, segmentationService } = services;
 

extensions/cornerstone-dynamic-volume/src/panels/DynamicExport.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { ActionButtons } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
-function DynamicExport({ commandsManager, servicesManager, extensionManager }) {
+function DynamicExport({ commandsManager, servicesManager, extensionManager }: withAppTypes) {
   const { segmentationService } = servicesManager.services;
   const { t } = useTranslation('dynamicExport');
 

extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx

@@ -8,7 +8,7 @@ import DynamicVolumeControls from './DynamicVolumeControls';
 
 const SOPClassHandlerId = '@ohif/extension-default.sopClassHandlerModule.stack';
 
-export default function PanelGenerateImage({ servicesManager, commandsManager }) {
+export default function PanelGenerateImage({ servicesManager, commandsManager }: withAppTypes) {
   const { cornerstoneViewportService, viewportGridService, displaySetService } =
     servicesManager.services;
 

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,26 +99,29 @@ 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,
     viewportOptions,
     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
     // you see below we only rehydrate the synchronizers if the viewport
     // 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({