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

[IbrahimCSAE]

Context

The goal of this PR is to enhance typing support throughout OHIF.

Extending App Types and Services in Your Application

This documentation provides an overview and examples on how to use and extend withAppTypes, integrate custom properties, and add services in the global namespace of the application. This helps in enhancing the application's modularity and extensibility.

Overview of withAppTypes

The withAppTypes function is a TypeScript utility that extends the base properties of components or modules with the application's core service and manager types. It allows for a more flexible and type-safe way to pass around core functionality and custom properties.

Using withAppTypes

withAppTypes can be enhanced using generics to include custom properties. This is particularly useful for passing additional data or configurations specific to your component or service.

Extending with Custom Properties

You can extend withAppTypes to include custom properties by defining an interface for the props you need. For example:

interface ColorbarProps {
  viewportId: string;
  displaySets: Array<any>;
  colorbarProperties: ColorbarProperties;
}

export function Colorbar({
  viewportId,
  displaySets,
  commandsManager, // injected type
  servicesManager, // injected type
  colorbarProperties,
}: withAppTypes<ColorbarProps>): ReactElement {
  // Component logic here
}

In this example, ColorbarProps is a custom interface that extends the application types through withAppTypes.

Typing the custom extensions's new services

Extensions can define additional services that integrate seamlessly into the application's global service architecture, and will be available on the ServicesManager for use across the application.

Adding the extension's services Types

Declare your service in the global namespace and use it across your application as demonstrated below:

extensions/my-extension/src/types/whatever.ts

declare global {
  namespace AppTypes {
    // only add if you need direct access to the service ex. AppTypes.MicroscopyService
    export type MicroscopyService = MicroscopyServiceType;
    // add to the global Services interface, and to withAppTypes
    export interface Services {
      microscopyService?: MicroscopyServiceType;
    }
  }
}

Doing the above adds the microscopyService to the global Services interface, which ServicesManager uses by default public services: AppTypes.Services = {}; to type services, and is also used by withAppTypes to inject services into components.
You will also get access to the seperate services via AppTypes.YourServiceName in your application.

export function CustomComponent({
  servicesManager,
}: withAppTypes<CustomComponentProps>): ReactElement {
  const { microscopyService } = servicesManager.services;
  microscopyService.someMethod(); // auto completation available

}

export function CustomComponent2(
  microscopyService: AppTypes.MicroscopyService,
): ReactElement {
  microscopyService.someMethod(); // auto completation available
}

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	5e9879c
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/663b99b7438848000802926c
😎 Deploy Preview	https://deploy-preview-4090--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/663ba381580637151057b442
😎 Deploy Preview	https://deploy-preview-4090--ohif-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress]

Passing run #3898 ↗︎

0

43

0

0

0

Details:

updates
Project: Viewers	Commit: 5e9879c480
Status: Passed	Duration: 06:29 💡
Started: May 8, 2024 3:39 PM	Ended: May 8, 2024 3:45 PM

Review all test suite changes for PR #4090 ↗︎

[sedghi]

Looks great
Can we please have a dedicated page in the development documentation discussing

• what is withAppTypes
• using custom props with withAppTypes via generics (how users can extend it)
• how in an extension users can add their services to our withAppTypes to be available everywhere.

[sedghi]

see my comment please

[sedghi]

Thank you for resolving this matter conclusively. Excellent work.