Services Manager
#
OverviewServices 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
.
#
SkeletonSimplified skeleton of ServicesManager
is shown below. There are two public methods:
registerService
: registering a new service with/without a configurationregisterServices
: 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 ServicesBy default, OHIF-v3
registers the following services in the appInit
.
servicesManager.registerServices([ UINotificationService, UIModalService, UIDialogService, UIViewportDialogService, MeasurementService, DisplaySetService, ToolBarService, ViewportGridService, HangingProtocolService, CineService, ]);
#
Service ArchitectureIf 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:
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
#
Accessing ServicesThroughout 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 ServicesYou might need to write you own custom service in an extension. preRegistration
hook inside your extension is the place for registering your custom service.
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
import backEndService from './backEndService';
export default function WrappedBackEndService(serviceManager) { return { name: 'myService', create: ({ configuration = {} }) => { return new backEndService(serviceManager); }, };}
with implementation of
export default class backEndService { constructor(serviceManager) { this.serviceManager = serviceManager; }
putAnnotations() { return post(/*...*/); }}