Skip to main content
Version: Version 3.3 - Segmentation Support 🚧

Services Manager

Overview​

Services manager is the single point of service registration. Each service needs to implement a create method which gets called inside ServicesManager to instantiate the service. In the app, you can get access to a registered service via the services property of the ServicesManager.

Skeleton​

Simplified skeleton of ServicesManager is shown below. There are two public methods:

  • registerService: registering a new service with/without a configuration
  • registerServices: registering batch of services
export default class ServicesManager {
constructor(commandsManager) {
this._commandsManager = commandsManager;
this.services = {};
this.registeredServiceNames = [];
}

registerService(service, configuration = {}) {
/** validation checks **/
this.services[service.name] = service.create({
configuration,
commandsManager: this._commandsManager,
});

/* Track service registration */
this.registeredServiceNames.push(service.name);
}

registerServices(services) {
/** ... **/
}
}

Default Registered Services​

By default, OHIF-v3 registers the following services in the appInit.

platform/viewer/src/appInit.js
servicesManager.registerServices([
CustomizationService,
UINotificationService,
UIModalService,
UIDialogService,
UIViewportDialogService,
MeasurementService,
DisplaySetService,
ToolBarService,
ViewportGridService,
HangingProtocolService,
CineService,
]);

Service Architecture​

If you take a look at the folder of each service implementation above, you will find out that services need to be exported as an object with name and create method.

For instance, ToolBarService is exported as:

platform/core/src/services/ToolBarService/index.js
import ToolBarService from './ToolBarService';

export default {
name: 'ToolBarService',
create: ({ configuration = {}, commandsManager }) => {
return new ToolBarService(commandsManager);
},
};

and the implementation of ToolBarService lies in the same folder at ./ToolbarSerivce.js.

Note: The create method is critical for any custom service that you write and want to add to the list of services

Note: For typescript definitions, the service type should be exported as part of the Types export on the module. This is recommended going forward and existing services will be migrated. As well, the capitalization of the name should be lower camel case, with the type being upper camel case. In the above example, the service instance should be toolBarService with the class being ToolBarService.

Accessing Services​

Throughout the app you can use services property of the service manager to access the desired service.

For instance in the PanelMeasurementTableTracking which is the right panel in the longitudinal mode, we have the simplified code below for downloading the drawn measurements.

function PanelMeasurementTableTracking({ servicesManager }) {
const { MeasurementService } = servicesManager.services;
/** ... **/

async function exportReport() {
const measurements = MeasurementService.getMeasurements();
/** ... **/
downloadCSVReport(measurements, MeasurementService);
}

/** ... **/
return <> /** ... **/ </>;
}

Registering Custom Services​

You might need to write you own custom service in an extension. preRegistration hook inside your extension is the place for registering your custom service.

extensions/customExtension/src/index.js
import WrappedBackEndService from './services/backEndService';

export default {
// ID of the extension
id: 'myExtension',
preRegistration({ servicesManager }) {
servicesManager.registerService(WrappedBackEndService(servicesManager));
},
};

and the logic for your service shall be

extensions/customExtension/src/services/backEndService/index.js
// Canonical name of upper camel case BackEndService for the class
import BackEndService from './BackEndService';

export default function WrappedBackEndService(serviceManager) {
return {
// Note the canonical name of lower camel case backEndService
name: 'backEndService',
create: ({ configuration = {} }) => {
return new BackEndService(serviceManager);
},
};
}

with implementation of

export default class BackEndService {
constructor(serviceManager) {
this.serviceManager = serviceManager;
}

putAnnotations() {
return post(/*...*/);
}
}

with a registration of

types/index.ts
import BackEndService from "../services/BackEndService/BackEndService";

export { BackEndService };