fix: Create typed services and allow lower case access to agree with naming conventions (#3141)

* fix: Add typed services

* fix: Typed services - PR changes

* remaining of the cineService and toolbarService renaming

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>

platform/core/src/classes/CommandsManager.test.js

@@ -1,4 +1,4 @@
-import CommandsManager from './CommandsManager.js';
+import CommandsManager from './CommandsManager';
 import log from './../log.js';
 
 jest.mock('./../log.js');

platform/core/src/classes/HotkeysManager.test.js

@@ -1,12 +1,12 @@
-import CommandsManager from './CommandsManager.js';
-import HotkeysManager from './HotkeysManager.js';
+import CommandsManager from './CommandsManager';
+import HotkeysManager from './HotkeysManager';
 import hotkeys from './../utils/hotkeys';
-import log from './../log.js';
+import log from './../log';
 import objectHash from 'object-hash';
 
-jest.mock('./CommandsManager.js');
+jest.mock('./CommandsManager');
 jest.mock('./../utils/hotkeys');
-jest.mock('./../log.js');
+jest.mock('./../log');
 
 describe('HotkeysManager', () => {
   let hotkeysManager, commandsManager;

platform/core/src/classes/index.js

@@ -1,14 +1,9 @@
-import CommandsManager from './CommandsManager.js';
-import HotkeysManager from './HotkeysManager.js';
+import CommandsManager from './CommandsManager';
+import HotkeysManager from './HotkeysManager';
 import ImageSet from './ImageSet';
 import MetadataProvider from './MetadataProvider';
 
-export {
-  MetadataProvider,
-  CommandsManager,
-  HotkeysManager,
-  ImageSet,
-};
+export { MetadataProvider, CommandsManager, HotkeysManager, ImageSet };
 
 const classes = {
   MetadataProvider,

platform/core/src/index.test.js

@@ -24,14 +24,14 @@ describe('Top level exports', () => {
       'OHIF',
       //
       'CineService',
-      'CustomizationServiceRegistration',
+      'CustomizationService',
       'UIDialogService',
       'UIModalService',
       'UINotificationService',
       'UIViewportDialogService',
       'DisplaySetService',
       'MeasurementService',
-      'ToolBarService',
+      'ToolbarService',
       'Types',
       'ViewportGridService',
       'HangingProtocolService',
@@ -39,6 +39,7 @@ describe('Top level exports', () => {
       'IWebApiDataSource',
       'DicomMetadataStore',
       'pubSubServiceInterface',
+      'PubSubService',
     ].sort();
 
     const exports = Object.keys(OHIF).sort();

platform/core/src/index.ts

@@ -21,13 +21,14 @@ import {
   //
   DicomMetadataStore,
   DisplaySetService,
-  ToolBarService,
+  ToolbarService,
   MeasurementService,
   ViewportGridService,
   HangingProtocolService,
   pubSubServiceInterface,
+  PubSubService,
   UserAuthenticationService,
-  CustomizationServiceRegistration,
+  CustomizationService,
 } from './services';
 
 import IWebApiDataSource from './DataSources/IWebApiDataSource';
@@ -58,20 +59,21 @@ const OHIF = {
   viewer: {},
   //
   CineService,
-  CustomizationServiceRegistration,
+  CustomizationService,
   UIDialogService,
   UIModalService,
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
-  ToolBarService, // TODO: TYPO
+  ToolbarService,
   ViewportGridService,
   HangingProtocolService,
   UserAuthenticationService,
   IWebApiDataSource,
   DicomMetadataStore,
   pubSubServiceInterface,
+  PubSubService,
 };
 
 export {
@@ -94,20 +96,21 @@ export {
   DICOMWeb,
   //
   CineService,
-  CustomizationServiceRegistration,
+  CustomizationService,
   UIDialogService,
   UIModalService,
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
-  ToolBarService,
+  ToolbarService,
   ViewportGridService,
   HangingProtocolService,
   UserAuthenticationService,
   IWebApiDataSource,
   DicomMetadataStore,
   pubSubServiceInterface,
+  PubSubService,
   Types,
 };
 

platform/core/src/services/CineService/CineService.ts

@@ -64,9 +64,14 @@ function setServiceImplementation({
   }
 }
 
-export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+const CineService = {
+  REGISTRATION: {
+    altName: name,
+    name: 'cineService',
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };
+
+export default CineService;

platform/core/src/services/CustomizationService/CustomizationService.ts

@@ -1,6 +1,7 @@
 import merge from 'lodash.merge';
 import { PubSubService } from '../_shared/pubSubServiceInterface';
 import { Customization, NestedStrings, Obj } from './types';
+import { CommandsManager } from '../../classes';
 
 const EVENTS = {
   MODE_CUSTOMIZATION_MODIFIED: 'event::CustomizationService:modeModified',
@@ -50,7 +51,14 @@ const flattenNestedStrings = (
  * every module for the given id and to load it/add it to the extensions.
  */
 export default class CustomizationService extends PubSubService {
-  commandsManager: Record<string, unknown>;
+  public static REGISTRATION = {
+    name: 'customizationService',
+    create: ({ configuration = {}, commandsManager }) => {
+      return new CustomizationService({ configuration, commandsManager });
+    },
+  };
+
+  commandsManager: CommandsManager;
   extensionManager: Record<string, unknown>;
 
   modeCustomizations: Record<string, Customization> = {};

platform/core/src/services/CustomizationService/index.ts

@@ -1,11 +1,3 @@
 import CustomizationService from './CustomizationService';
 
-const CustomizationServiceRegistration = {
-  name: 'customizationService',
-  create: ({ configuration = {}, commandsManager }) => {
-    return new CustomizationService({ configuration, commandsManager });
-  },
-};
-
-export default CustomizationServiceRegistration;
-export { CustomizationService, CustomizationServiceRegistration };
+export default CustomizationService;

platform/core/src/services/DisplaySetService/DisplaySetService.ts

@@ -1,4 +1,4 @@
-import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
+import { PubSubService } from '../_shared/pubSubServiceInterface';
 import EVENTS from './EVENTS';
 
 const displaySetCache = [];
@@ -28,16 +28,21 @@ const findInstance = (instance, displaySets) => {
   return false;
 };
 
-export default class DisplaySetService {
-  constructor() {
-    this.activeDisplaySets = [];
-    this.listeners = {};
-    this.EVENTS = EVENTS;
+export default class DisplaySetService extends PubSubService {
+  public static REGISTRATION = {
+    altName: 'DisplaySetService',
+    name: 'displaySetService',
+    create: ({ configuration = {} }) => {
+      return new DisplaySetService();
+    },
+  };
 
-    Object.assign(this, pubSubServiceInterface);
+  public activeDisplaySets = [];
+  constructor() {
+    super(EVENTS);
   }
 
-  init(extensionManager, SOPClassHandlerIds) {
+  public init(extensionManager, SOPClassHandlerIds): void {
     this.extensionManager = extensionManager;
     this.SOPClassHandlerIds = SOPClassHandlerIds;
     this.activeDisplaySets = [];

platform/core/src/services/DisplaySetService/index.js

@@ -1,8 +0,0 @@
-import DisplaySetService from './DisplaySetService';
-
-export default {
-  name: 'DisplaySetService',
-  create: ({ configuration = {} }) => {
-    return new DisplaySetService();
-  },
-};

platform/core/src/services/DisplaySetService/index.ts

@@ -0,0 +1,3 @@
+import DisplaySetService from './DisplaySetService';
+
+export default DisplaySetService;

platform/core/src/services/HangingProtocolService/HangingProtocolService.ts

@@ -19,6 +19,14 @@ const EVENTS = {
 type Protocol = HangingProtocol.Protocol | HangingProtocol.ProtocolGenerator;
 
 class HangingProtocolService {
+  public static REGISTRATION = {
+    name: 'hangingProtocolService',
+    altName: 'HangingProtocolService',
+    create: ({ configuration = {}, commandsManager, servicesManager }) => {
+      return new HangingProtocolService(commandsManager, servicesManager);
+    },
+  };
+
   studies: StudyMetadata[];
   // stores all the protocols (object or function that returns an object) in a map
   protocols: Map<string, Protocol>;

platform/core/src/services/HangingProtocolService/index.js

@@ -1,8 +0,0 @@
-import HangingProtocolService from './HangingProtocolService';
-
-export default {
-  name: 'HangingProtocolService',
-  create: ({ configuration = {}, commandsManager, servicesManager }) => {
-    return new HangingProtocolService(commandsManager, servicesManager);
-  },
-};

platform/core/src/services/HangingProtocolService/index.ts

@@ -0,0 +1,3 @@
+import HangingProtocolService from './HangingProtocolService';
+
+export default HangingProtocolService;

platform/core/src/services/MeasurementService/MeasurementService.test.js

@@ -1,7 +1,7 @@
-import MeasurementService from './MeasurementService.js';
+import MeasurementService from './MeasurementService';
 import log from '../../log';
 
-jest.mock('../../log.js', () => ({
+jest.mock('../../log', () => ({
   info: jest.fn(),
   warn: jest.fn(),
   error: jest.fn(),

platform/core/src/services/MeasurementService/MeasurementService.ts

@@ -1,6 +1,6 @@
 import log from '../../log';
 import guid from '../../utils/guid';
-import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
+import { PubSubService } from '../_shared/pubSubServiceInterface';
 
 /**
  * Measurement source schema
@@ -94,27 +94,27 @@ const VALUE_TYPES = {
  * Note and Todo: We should be able to support measurements that are composed of multiple
  * annotations, but that is not the case at the moment.
  */
-class MeasurementService {
+class MeasurementService extends PubSubService {
+  public static REGISTRATION = {
+    name: 'measurementService',
+    altName: 'MeasurementService',
+    create: ({ configuration = {} }) => {
+      return new MeasurementService();
+    },
+  };
+
   constructor() {
+    super(EVENTS);
     this.sources = {};
     this.mappings = {};
     this.measurements = {};
-    this.listeners = {};
     this._jumpToMeasurementCache = {};
-    Object.defineProperty(this, 'EVENTS', {
-      value: EVENTS,
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    });
     Object.defineProperty(this, 'VALUE_TYPES', {
       value: VALUE_TYPES,
       writable: false,
       enumerable: true,
       configurable: false,
     });
-
-    Object.assign(this, pubSubServiceInterface);
   }
 
   /**

platform/core/src/services/MeasurementService/index.js

@@ -1,8 +0,0 @@
-import MeasurementService from './MeasurementService';
-
-export default {
-  name: 'MeasurementService',
-  create: ({ configuration = {} }) => {
-    return new MeasurementService();
-  },
-};

platform/core/src/services/MeasurementService/index.ts

@@ -0,0 +1,3 @@
+import MeasurementService from './MeasurementService';
+
+export default MeasurementService;

platform/core/src/services/ServicesManager.test.js

@@ -1,9 +1,9 @@
-import ServicesManager from './ServicesManager.js';
-import log from '../log.js';
+import ServicesManager from './ServicesManager';
+import log from '../log';
 
-jest.mock('./../log.js');
+jest.mock('./../log');
 
-describe('ServicesManager.js', () => {
+describe('ServicesManager', () => {
   let servicesManager, commandsManager;
 
   beforeEach(() => {

platform/core/src/services/ServicesManager.ts

@@ -1,6 +1,9 @@
 import log from './../log.js';
+import Services from '../types/Services';
 
 export default class ServicesManager {
+  public services: Services = {};
+
   constructor(commandsManager) {
     this._commandsManager = commandsManager;
     this.services = {};
@@ -39,6 +42,10 @@ export default class ServicesManager {
         commandsManager: this._commandsManager,
         servicesManager: this,
       });
+      if (service.altName) {
+        console.log('Registering old name', service.altName);
+        this.services[service.altName] = this.services[service.name];
+      }
     } else {
       log.warn(`Service create factory function not defined. Exiting early.`);
       return;

platform/core/src/services/ToolBarService/ToolbarService.ts

@@ -1,17 +1,25 @@
 import merge from 'lodash.merge';
-import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
+import { PubSubService } from '../_shared/pubSubServiceInterface';
 
 const EVENTS = {
   TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
   TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
 };
 
-export default class ToolBarService {
+export default class ToolbarService extends PubSubService {
+  public static REGISTRATION = {
+    name: 'toolbarService',
+    // Note the old name is ToolBarService, with an upper B
+    altName: 'ToolBarService',
+    create: ({ commandsManager }) => {
+      return new ToolbarService(commandsManager);
+    },
+  };
+
   constructor(commandsManager) {
+    super(EVENTS);
     this._commandsManager = commandsManager;
     //
-    this.EVENTS = EVENTS;
-    this.listeners = {};
     this.buttons = {};
     this.unsubscriptions = []; // if tools need to unsubscribe from events
     this.buttonSections = {
@@ -32,8 +40,6 @@ export default class ToolBarService {
         /* track most recent click per group...? */
       },
     };
-
-    Object.assign(this, pubSubServiceInterface);
   }
 
   init(extensionManager) {

platform/core/src/services/ToolBarService/index.ts

@@ -1,8 +1,3 @@
-import ToolBarService from './ToolBarService';
+import ToolbarService from './ToolbarService';
 
-export default {
-  name: 'ToolBarService',
-  create: ({ configuration = {}, commandsManager }) => {
-    return new ToolBarService(commandsManager);
-  },
-};
+export default ToolbarService;

platform/core/src/services/UIDialogService/index.js

@@ -25,7 +25,7 @@
  * @property {Function} onDrag Called while dragging.
  */
 
-const name = 'UIDialogService';
+const name = 'uiDialogService';
 
 const publicAPI = {
   name,
@@ -119,9 +119,13 @@ function setServiceImplementation({
   }
 }
 
+// TODO - export type here
 export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+  REGISTRATION: {
+    name,
+    altName: 'UIDialogService',
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };

platform/core/src/services/UIModalService/index.js

@@ -11,7 +11,7 @@
  * @property {string} [customClassName=null] The custom class to style the modal.
  */
 
-const name = 'UIModalService';
+const name = 'uiModalService';
 
 const publicAPI = {
   name,
@@ -79,9 +79,13 @@ function setServiceImplementation({
   }
 }
 
+// TODO - export TS Type
 export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+  REGISTRATION: {
+    name,
+    altName: 'UIModalService',
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };

platform/core/src/services/UINotificationService/index.js

@@ -10,7 +10,7 @@
  * @property {boolean} [autoClose=true]
  */
 
-const name = 'UINotificationService';
+const name = 'uiNotificationService';
 
 const serviceShowRequestQueue = [];
 
@@ -91,8 +91,11 @@ function setServiceImplementation({
 }
 
 export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+  REGISTRATION: {
+    name,
+    altName: 'UINotificationService',
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };

platform/core/src/services/UIViewportDialogService/index.js

@@ -75,8 +75,10 @@ function setServiceImplementation({
 }
 
 export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+  REGISTRATION: {
+    name,
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };

platform/core/src/services/UserAuthenticationService/UserAuthenticationService.js

@@ -1,4 +1,4 @@
-const name = 'UserAuthenticationService';
+const name = 'userAuthenticationService';
 
 const publicAPI = {
   name,
@@ -85,8 +85,11 @@ function setServiceImplementation({
 }
 
 export default {
-  name,
-  create: ({ configuration = {} }) => {
-    return publicAPI;
+  REGISTRATION: {
+    name,
+    altName: 'UserAuthenticationService',
+    create: ({ configuration = {} }) => {
+      return publicAPI;
+    },
   },
 };

platform/core/src/services/ViewportGridService/ViewportGridService.ts

@@ -1,21 +1,26 @@
-import pubSubServiceInterface from './../_shared/pubSubServiceInterface';
+import { PubSubService } from '../_shared/pubSubServiceInterface';
 
 const EVENTS = {
   ACTIVE_VIEWPORT_INDEX_CHANGED: 'event::activeviewportindexchanged',
 };
 
-class ViewportGridService {
+class ViewportGridService extends PubSubService {
+  public static REGISTRATION = {
+    name: 'viewportGridService',
+    altName: 'ViewportGridService',
+    create: ({ configuration = {} }) => {
+      return new ViewportGridService();
+    },
+  };
+
   serviceImplementation = {};
-  EVENTS: { [key: string]: string };
-  listeners = {};
 
   constructor() {
-    Object.assign(this, pubSubServiceInterface);
+    super(EVENTS);
     this.serviceImplementation = {};
-    this.EVENTS = EVENTS;
   }
 
-  setServiceImplementation({
+  public setServiceImplementation({
     getState: getStateImplementation,
     setActiveViewportIndex: setActiveViewportIndexImplementation,
     setDisplaySetsForViewport: setDisplaySetsForViewportImplementation,
@@ -26,7 +31,7 @@ class ViewportGridService {
     reset: resetImplementation,
     onModeExit: onModeExitImplementation,
     set: setImplementation,
-  }) {
+  }): void {
     if (getStateImplementation) {
       this.serviceImplementation._getState = getStateImplementation;
     }
@@ -119,9 +124,4 @@ class ViewportGridService {
   }
 }
 
-export default {
-  name: 'ViewportGridService',
-  create: ({ configuration = {} }) => {
-    return new ViewportGridService();
-  },
-};
+export default ViewportGridService;

platform/core/src/services/index.ts

@@ -1,12 +1,12 @@
 import MeasurementService from './MeasurementService';
-import ServicesManager from './ServicesManager.js';
+import ServicesManager from './ServicesManager';
 import UIDialogService from './UIDialogService';
 import UIModalService from './UIModalService';
 import UINotificationService from './UINotificationService';
 import UIViewportDialogService from './UIViewportDialogService';
 import DicomMetadataStore from './DicomMetadataStore';
 import DisplaySetService from './DisplaySetService';
-import ToolBarService from './ToolBarService';
+import ToolbarService from './ToolBarService';
 import ViewportGridService from './ViewportGridService';
 import CineService from './CineService';
 import HangingProtocolService from './HangingProtocolService';
@@ -14,23 +14,22 @@ import pubSubServiceInterface, {
   PubSubService,
 } from './_shared/pubSubServiceInterface';
 import UserAuthenticationService from './UserAuthenticationService';
-import {
-  CustomizationService,
-  CustomizationServiceRegistration,
-} from './CustomizationService';
+import CustomizationService from './CustomizationService';
+
+import Services from '../types/Services';
 
 export {
+  Services,
   MeasurementService,
   ServicesManager,
   CustomizationService,
-  CustomizationServiceRegistration,
   UIDialogService,
   UIModalService,
   UINotificationService,
   UIViewportDialogService,
   DicomMetadataStore,
   DisplaySetService,
-  ToolBarService,
+  ToolbarService,
   ViewportGridService,
   HangingProtocolService,
   CineService,

platform/core/src/types/Services.ts

@@ -0,0 +1,27 @@
+import {
+  HangingProtocolService,
+  CustomizationService,
+  MeasurementService,
+  ViewportGridService,
+  ToolbarService,
+  DisplaySetService,
+} from '../services';
+
+/**
+ * The interface for the services object
+ */
+export default interface Services {
+  hangingProtocolService?: HangingProtocolService;
+  customizationService?: CustomizationService;
+  measurementService?: MeasurementService;
+  displaySetService?: DisplaySetService;
+  cineService?: Record<string, unknown>;
+  toolbarService?: ToolbarService;
+  cornerstoneViewportService?: Record<string, unknown>;
+  uiDialogService?: Record<string, unknown>;
+  toolGroupService?: Record<string, unknown>;
+  uiNotificationService?: Record<string, unknown>;
+  viewportGridService?: ViewportGridService;
+  syncGroupService?: Record<string, unknown>;
+  cornerstoneCacheService?: Record<string, unknown>;
+}

platform/core/src/types/index.ts

@@ -9,6 +9,8 @@ import { ExtensionManager } from '../extensions';
 import { CustomizationService, PubSubService } from '../services';
 import * as HangingProtocol from './HangingProtocol';
 import Command from './Command';
+import Services from './Services';
+import { CommandsManager } from '../classes';
 
 export * from '../services/CustomizationService/types';
 
@@ -22,4 +24,6 @@ export type {
   PubSubService,
   CustomizationService,
   Command,
+  Services,
+  CommandsManager,
 };