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

platform/app/src/App.tsx

@@ -6,7 +6,6 @@ import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 import Compose from './routes/Mode/Compose';
 import {
-  ServicesManager,
   ExtensionManager,
   CommandsManager,
   HotkeysManager,
@@ -33,7 +32,7 @@ import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes';
 
 let commandsManager: CommandsManager,
   extensionManager: ExtensionManager,
-  servicesManager: ServicesManager,
+  servicesManager: AppTypes.ServicesManager,
   serviceProvidersManager: ServiceProvidersManager,
   hotkeysManager: HotkeysManager;
 

platform/app/src/components/ViewportGrid.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import PropTypes from 'prop-types';
-import { ServicesManager, Types, MeasurementService } from '@ohif/core';
+import { Types, MeasurementService } from '@ohif/core';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
 import classNames from 'classnames';
 import { useAppConfig } from '@state';
 
-function ViewerViewportGrid(props) {
+function ViewerViewportGrid(props: withAppTypes) {
   const { servicesManager, viewportComponents, dataSource } = props;
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const [appConfig] = useAppConfig();
@@ -18,9 +18,8 @@ function ViewerViewportGrid(props) {
   const layoutHash = useRef(null);
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
-  const { displaySetService, measurementService, hangingProtocolService, uiNotificationService } = (
-    servicesManager as ServicesManager
-  ).services;
+  const { displaySetService, measurementService, hangingProtocolService, uiNotificationService } =
+    servicesManager.services;
 
   const generateLayoutHash = () => `${numCols}-${numRows}`;
 
@@ -387,7 +386,7 @@ function ViewerViewportGrid(props) {
 
 ViewerViewportGrid.propTypes = {
   viewportComponents: PropTypes.array.isRequired,
-  servicesManager: PropTypes.instanceOf(ServicesManager),
+  servicesManager: PropTypes.instanceOf(Object).isRequired,
 };
 
 ViewerViewportGrid.defaultProps = {

platform/app/src/routes/Mode/Mode.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router';
 import PropTypes from 'prop-types';
-import { ServicesManager, utils } from '@ohif/core';
+import { utils } from '@ohif/core';
 import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
 import { useSearchParams } from '@hooks';
 import { useAppConfig } from '@state';
@@ -21,7 +21,7 @@ export default function ModeRoute({
   servicesManager,
   commandsManager,
   hotkeysManager,
-}) {
+}: withAppTypes) {
   const [appConfig] = useAppConfig();
 
   // Parse route params/querystring
@@ -60,9 +60,8 @@ export default function ModeRoute({
     locationRef.current = location;
   }
 
-  const { displaySetService, panelService, hangingProtocolService, userAuthenticationService } = (
-    servicesManager as ServicesManager
-  ).services;
+  const { displaySetService, panelService, hangingProtocolService, userAuthenticationService } =
+    servicesManager.services;
 
   const { extensions, sopClassHandlers, hotkeys: hotkeyObj, hangingProtocol } = mode;
 

platform/app/src/routes/Mode/defaultRouteInit.ts

@@ -16,7 +16,7 @@ const { sortingCriteria, getSplitParam } = utils;
  * @returns array of subscriptions to cancel
  */
 export async function defaultRouteInit(
-  { servicesManager, studyInstanceUIDs, dataSource, filters, appConfig },
+  { servicesManager, studyInstanceUIDs, dataSource, filters, appConfig }: withAppTypes,
   hangingProtocolId
 ) {
   const { displaySetService, hangingProtocolService, uiNotificationService, customizationService } =

platform/app/src/routes/WorkList/WorkList.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import PropTypes, { object } from 'prop-types';
 import { Link, useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import qs from 'query-string';
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useSearchParams } from '@hooks';
-import { utils, hotkeys, ServicesManager } from '@ohif/core';
+import { utils, hotkeys } from '@ohif/core';
 
 import {
   Icon,
@@ -56,7 +56,7 @@ function WorkList({
   dataPath,
   onRefresh,
   servicesManager,
-}) {
+}: withAppTypes) {
   const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
   const { show, hide } = useModal();
   const { t } = useTranslation();
@@ -585,7 +585,7 @@ WorkList.propTypes = {
     getConfig: PropTypes.func,
   }).isRequired,
   isLoadingData: PropTypes.bool.isRequired,
-  servicesManager: PropTypes.instanceOf(ServicesManager),
+  servicesManager: PropTypes.object.isRequired,
 };
 
 const defaultFilterValues = {

platform/app/src/routes/buildModeRoutes.tsx

@@ -28,7 +28,7 @@ export default function buildModeRoutes({
   servicesManager,
   commandsManager,
   hotkeysManager,
-}) {
+}: withAppTypes) {
   const routes = [];
   const dataSourceNames = [];
 

platform/app/src/routes/index.tsx

@@ -88,7 +88,7 @@ const createRoutes = ({
   hotkeysManager,
   routerBasename,
   showStudyList,
-}) => {
+}: withAppTypes) => {
   const routes =
     buildModeRoutes({
       modes,