fix: Service consistency typing (#3309)

* Use more consistent type/structure for services

* Fix restoring SR so the tests described work

* One more typed service

* Added types for the Cornerstone library

* Couple more type fixes

platform/core/package.json

@@ -7,6 +7,7 @@
   "repository": "OHIF/Viewers",
   "main": "dist/index.umd.js",
   "module": "src/index.ts",
+  "types": "src/types/index.ts",
   "sideEffects": "false",
   "publishConfig": {
     "access": "public"

platform/core/src/extensions/ExtensionManager.ts

@@ -37,9 +37,12 @@ export interface ExtensionParams extends ExtensionConstructor {
 export interface Extension {
   id: string;
   preRegistration?: (p: ExtensionParams) => Promise<void> | void;
-  onModeExit?: () => void;
   getHangingProtocolModule?: (p: ExtensionParams) => unknown;
   getCommandsModule?: (p: ExtensionParams) => CommandsModule;
+  getViewportModule?: (p: ExtensionParams) => unknown;
+  getUtilityModule?: (p: ExtensionParams) => unknown;
+  onModeEnter?: () => void;
+  onModeExit?: () => void;
 }
 
 export type ExtensionRegister = {

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

@@ -1,91 +0,0 @@
-/**
- * UI Modal
- *
- * @typedef {Object} ModalProps
- * @property {ReactElement|HTMLElement} [content=null] Modal content.
- * @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
- * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
- * @property {boolean} [closeButton=true] Should the modal body render the close button.
- * @property {string} [title=null] Should the modal render the title independently of the body content.
- * @property {string} [customClassName=null] The custom class to style the modal.
- */
-
-const name = 'uiModalService';
-
-const publicAPI = {
-  name,
-  hide: _hide,
-  show: _show,
-  setServiceImplementation,
-};
-
-const serviceImplementation = {
-  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
-  _show: () => console.warn('show() NOT IMPLEMENTED'),
-};
-
-/**
- * Show a new UI modal;
- *
- * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
- */
-function _show({
-  content = null,
-  contentProps = null,
-  shouldCloseOnEsc = true,
-  isOpen = true,
-  closeButton = true,
-  title = null,
-  customClassName = null,
-}) {
-  return serviceImplementation._show({
-    content,
-    contentProps,
-    shouldCloseOnEsc,
-    isOpen,
-    closeButton,
-    title,
-    customClassName,
-  });
-}
-
-/**
- * Hides/dismisses the modal, if currently shown
- *
- * @returns void
- */
-function _hide() {
-  return serviceImplementation._hide();
-}
-
-/**
- *
- *
- * @param {*} {
- *   hide: hideImplementation,
- *   show: showImplementation,
- * }
- */
-function setServiceImplementation({
-  hide: hideImplementation,
-  show: showImplementation,
-}) {
-  if (hideImplementation) {
-    serviceImplementation._hide = hideImplementation;
-  }
-  if (showImplementation) {
-    serviceImplementation._show = showImplementation;
-  }
-}
-
-// TODO - export TS Type
-export default {
-  REGISTRATION: {
-    name,
-    altName: 'UIModalService',
-    create: ({ configuration = {} }) => {
-      return publicAPI;
-    },
-  },
-};

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

@@ -0,0 +1,87 @@
+/**
+ * UI Modal
+ *
+ * @typedef {Object} ModalProps
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
+ */
+
+const name = 'uiModalService';
+
+const serviceImplementation = {
+  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
+  _show: () => console.warn('show() NOT IMPLEMENTED'),
+};
+
+class UIModalService {
+  static REGISTRATION = {
+    name,
+    altName: 'UIModalService',
+    create: (): UIModalService => {
+      return new UIModalService();
+    },
+  };
+
+  readonly name = name;
+
+  /**
+   * Show a new UI modal;
+   *
+   * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
+   */
+  show({
+    content = null,
+    contentProps = null,
+    shouldCloseOnEsc = true,
+    isOpen = true,
+    closeButton = true,
+    title = null,
+    customClassName = null,
+  }) {
+    return serviceImplementation._show({
+      content,
+      contentProps,
+      shouldCloseOnEsc,
+      isOpen,
+      closeButton,
+      title,
+      customClassName,
+    });
+  }
+
+  /**
+   * Hides/dismisses the modal, if currently shown
+   *
+   * @returns void
+   */
+  hide() {
+    return serviceImplementation._hide();
+  }
+
+  /**
+   *
+   *
+   * @param {*} {
+   *   hide: hideImplementation,
+   *   show: showImplementation,
+   * }
+   */
+  setServiceImplementation({
+    hide: hideImplementation,
+    show: showImplementation,
+  }) {
+    if (hideImplementation) {
+      serviceImplementation._hide = hideImplementation;
+    }
+    if (showImplementation) {
+      serviceImplementation._show = showImplementation;
+    }
+  }
+}
+
+export default UIModalService;

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

@@ -1,101 +0,0 @@
-/**
- * A UI Notification
- *
- * @typedef {Object} Notification
- * @property {string} title -
- * @property {string} message -
- * @property {number} [duration=5000] - in ms
- * @property {string} [position="bottomRight"] -"topLeft" | "topCenter | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"
- * @property {string} [type="info"] - "info" | "error" | "warning" | "success"
- * @property {boolean} [autoClose=true]
- */
-
-const name = 'uiNotificationService';
-
-const serviceShowRequestQueue = [];
-
-const publicAPI = {
-  name,
-  hide: _hide,
-  show: _show,
-  setServiceImplementation,
-};
-
-const serviceImplementation = {
-  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
-  _show: showArguments => {
-    serviceShowRequestQueue.push(showArguments);
-
-    console.warn('show() NOT IMPLEMENTED');
-  },
-};
-
-/**
- * Create and show a new UI notification; returns the
- * ID of the created notification.
- *
- * @param {Notification} notification { title, message, duration, position, type, autoClose}
- * @returns {number} id
- */
-function _show({
-  title,
-  message,
-  duration = 5000,
-  position = 'bottomRight',
-  type = 'info',
-  autoClose = true,
-}) {
-  return serviceImplementation._show({
-    title,
-    message,
-    duration,
-    position,
-    type,
-    autoClose,
-  });
-}
-
-/**
- * Hides/dismisses the notification, if currently shown
- *
- * @param {number} id - id of the notification to hide/dismiss
- * @returns undefined
- */
-function _hide(id) {
-  return serviceImplementation._hide({ id });
-}
-
-/**
- *
- *
- * @param {*} {
- *   hide: hideImplementation,
- *   show: showImplementation,
- * }
- */
-function setServiceImplementation({
-  hide: hideImplementation,
-  show: showImplementation,
-}) {
-  if (hideImplementation) {
-    serviceImplementation._hide = hideImplementation;
-  }
-  if (showImplementation) {
-    serviceImplementation._show = showImplementation;
-
-    while (serviceShowRequestQueue.length > 0) {
-      const showArguments = serviceShowRequestQueue.pop();
-      serviceImplementation._show(showArguments);
-    }
-  }
-}
-
-export default {
-  REGISTRATION: {
-    name,
-    altName: 'UINotificationService',
-    create: ({ configuration = {} }) => {
-      return publicAPI;
-    },
-  },
-};

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

@@ -0,0 +1,94 @@
+/**
+ * A UI Notification
+ *
+ * @typedef {Object} Notification
+ * @property {string} title -
+ * @property {string} message -
+ * @property {number} [duration=5000] - in ms
+ * @property {string} [position="bottomRight"] -"topLeft" | "topCenter | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"
+ * @property {string} [type="info"] - "info" | "error" | "warning" | "success"
+ * @property {boolean} [autoClose=true]
+ */
+
+const serviceShowRequestQueue = [];
+
+const serviceImplementation = {
+  _hide: () => console.warn('hide() NOT IMPLEMENTED'),
+  _show: showArguments => {
+    serviceShowRequestQueue.push(showArguments);
+
+    console.warn('show() NOT IMPLEMENTED');
+  },
+};
+
+class UINotificationService {
+  static REGISTRATION = {
+    name: 'uiNotificationService',
+    altName: 'UINotificationService',
+    create: (): UINotificationService => {
+      return new UINotificationService();
+    },
+  };
+
+  /**
+   *
+   *
+   * @param {*} {
+   *   hide: hideImplementation,
+   *   show: showImplementation,
+   * }
+   */
+  public setServiceImplementation({
+    hide: hideImplementation,
+    show: showImplementation,
+  }): void {
+    if (hideImplementation) {
+      serviceImplementation._hide = hideImplementation;
+    }
+    if (showImplementation) {
+      serviceImplementation._show = showImplementation;
+
+      while (serviceShowRequestQueue.length > 0) {
+        const showArguments = serviceShowRequestQueue.pop();
+        serviceImplementation._show(showArguments);
+      }
+    }
+  }
+
+  /**
+   * Hides/dismisses the notification, if currently shown
+   *
+   * @param {number} id - id of the notification to hide/dismiss
+   * @returns undefined
+   */
+  public hide(id: string) {
+    return serviceImplementation._hide({ id });
+  }
+
+  /**
+   * Create and show a new UI notification; returns the
+   * ID of the created notification.
+   *
+   * @param {Notification} notification { title, message, duration, position, type, autoClose}
+   * @returns {number} id
+   */
+  show({
+    title,
+    message,
+    duration = 5000,
+    position = 'bottomRight',
+    type = 'info',
+    autoClose = true,
+  }) {
+    return serviceImplementation._show({
+      title,
+      message,
+      duration,
+      position,
+      type,
+      autoClose,
+    });
+  }
+}
+
+export default UINotificationService;

platform/core/src/types/Services.ts

@@ -6,6 +6,8 @@ import {
   ToolbarService,
   DisplaySetService,
   StateSyncService,
+  UINotificationService,
+  UIModalService,
 } from '../services';
 
 /**
@@ -22,8 +24,8 @@ export default interface Services {
   cornerstoneViewportService?: Record<string, unknown>;
   uiDialogService?: Record<string, unknown>;
   toolGroupService?: Record<string, unknown>;
-  uiNotificationService?: Record<string, unknown>;
-  uiModalService?: Record<string, unknown>;
+  uiNotificationService?: UINotificationService;
+  uiModalService?: UIModalService;
   uiViewportDialogService?: Record<string, unknown>;
   viewportGridService?: ViewportGridService;
   syncGroupService?: Record<string, unknown>;