feat: Add customization support for more UI components (#4634)

Co-authored-by: ashikcn <ashik@L1140.trenser.com>
Co-authored-by: Devu Jayalekshmi <devu.jayalekshmi@trenser.com>
Co-authored-by: Arul Mozhi <arul.mozhi@trenser.com>

extensions/default/src/Components/ItemListComponent.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, InputFilterText, LoadingIndicatorProgress } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
+import { Button, InputFilterText } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 
@@ -16,6 +17,7 @@ function ItemListComponent({
   itemList,
   onItemClicked,
 }: ItemListComponentProps): ReactElement {
+  const { servicesManager } = useSystem();
   const { t } = useTranslation('DataSourceConfiguration');
   const [filterValue, setFilterValue] = useState('');
 
@@ -23,6 +25,10 @@ function ItemListComponent({
     setFilterValue('');
   }, [itemList]);
 
+  const LoadingIndicatorProgress = servicesManager.services.customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   return (
     <div className="flex min-h-[1px] grow flex-col gap-4">
       <div className="flex items-center justify-between">

extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx

@@ -1,5 +1,4 @@
 import * as ContextMenuItemsBuilder from './ContextMenuItemsBuilder';
-import ContextMenu from '../../../../platform/ui/src/components/ContextMenu/ContextMenu';
 import { CommandsManager } from '@ohif/core';
 import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 import { Menu, MenuItem, Point, ContextMenuProps } from './types';
@@ -72,6 +71,8 @@ export default class ContextMenuController {
       menuId
     );
 
+    const ContextMenu = this.services.customizationService.getCustomization('ui.contextMenu');
+
     this.services.uiDialogService.dismiss({ id: 'context-menu' });
     this.services.uiDialogService.create({
       id: 'context-menu',

extensions/default/src/ViewerLayout/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { LoadingIndicatorProgress, InvestigationalUseDialog } from '@ohif/ui';
+import { InvestigationalUseDialog } from '@ohif/ui';
 import { HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';
@@ -27,7 +27,7 @@ function ViewerLayout({
 }: withAppTypes): React.FunctionComponent {
   const [appConfig] = useAppConfig();
 
-  const { panelService, hangingProtocolService } = servicesManager.services;
+  const { panelService, hangingProtocolService, customizationService } = servicesManager.services;
   const [showLoadingIndicator, setShowLoadingIndicator] = useState(appConfig.showLoadingIndicator);
 
   const hasPanels = useCallback(
@@ -55,6 +55,10 @@ function ViewerLayout({
     setRightPanelClosed
   );
 
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   /**
    * Set body classes (tailwindcss) that don't allow vertical
    * or horizontal overflow (no scrolling). Also guarantee window

extensions/default/src/customizations/contextMenuUICustomization.ts

@@ -0,0 +1,5 @@
+import { ContextMenu } from '@ohif/ui';
+
+export default {
+  'ui.contextMenu': ContextMenu,
+};

extensions/default/src/customizations/labellingFlowCustomization.tsx

@@ -0,0 +1,5 @@
+import { LabellingFlow } from '@ohif/ui';
+
+export default {
+  'ui.labellingComponent': LabellingFlow,
+};

extensions/default/src/customizations/loadingIndicatorProgressCustomization.tsx

@@ -0,0 +1,5 @@
+import { LoadingIndicatorProgress } from '@ohif/ui';
+
+export default {
+  'ui.loadingIndicatorProgress': LoadingIndicatorProgress,
+};

extensions/default/src/customizations/loadingIndicatorTotalPercentCustomization.tsx

@@ -0,0 +1,5 @@
+import { LoadingIndicatorTotalPercent } from '@ohif/ui';
+
+export default {
+  'ui.loadingIndicatorTotalPercent': LoadingIndicatorTotalPercent,
+};

extensions/default/src/customizations/progressLoadingBarCustomization.tsx

@@ -0,0 +1,5 @@
+import { ProgressLoadingBar } from '@ohif/ui';
+
+export default {
+  'ui.progressLoadingBar': ProgressLoadingBar,
+};

extensions/default/src/customizations/viewportActionCornersCustomization.ts

@@ -0,0 +1,5 @@
+import { ViewportActionCorners } from '@ohif/ui';
+
+export default {
+  'ui.viewportActionCorner': ViewportActionCorners,
+};

extensions/default/src/getCustomizationModule.tsx

@@ -6,11 +6,17 @@ import customRoutesCustomization from './customizations/customRoutesCustomizatio
 import studyBrowserCustomization from './customizations/studyBrowserCustomization';
 import overlayItemCustomization from './customizations/overlayItemCustomization';
 import contextMenuCustomization from './customizations/contextMenuCustomization';
+import contextMenuUICustomization from './customizations/contextMenuUICustomization';
 import menuContentCustomization from './customizations/menuContentCustomization';
 import getDataSourceConfigurationCustomization from './customizations/dataSourceConfigurationCustomization';
 import progressDropdownCustomization from './customizations/progressDropdownCustomization';
 import sortingCriteriaCustomization from './customizations/sortingCriteriaCustomization';
 import onDropHandlerCustomization from './customizations/onDropHandlerCustomization';
+import loadingIndicatorProgressCustomization from './customizations/loadingIndicatorProgressCustomization';
+import loadingIndicatorTotalPercentCustomization from './customizations/loadingIndicatorTotalPercentCustomization';
+import progressLoadingBarCustomization from './customizations/progressLoadingBarCustomization';
+import viewportActionCornersCustomization from './customizations/viewportActionCornersCustomization';
+import labellingFlowCustomization from './customizations/labellingFlowCustomization';
 
 /**
  *
@@ -48,6 +54,12 @@ export default function getCustomizationModule({ servicesManager, extensionManag
         ...sortingCriteriaCustomization,
         ...defaultContextMenuCustomization,
         ...onDropHandlerCustomization,
+        ...loadingIndicatorProgressCustomization,
+        ...loadingIndicatorTotalPercentCustomization,
+        ...progressLoadingBarCustomization,
+        ...viewportActionCornersCustomization,
+        ...labellingFlowCustomization,
+        ...contextMenuUICustomization,
       },
     },
   ];

extensions/default/src/utils/callInputDialog.tsx

@@ -89,7 +89,13 @@ export function callInputDialog(
   }
 }
 
-export function callLabelAutocompleteDialog(uiDialogService, callback, dialogConfig, labelConfig) {
+export function callLabelAutocompleteDialog(
+  uiDialogService,
+  callback,
+  dialogConfig,
+  labelConfig,
+  renderContent = LabellingFlow
+) {
   const exclusive = labelConfig ? labelConfig.exclusive : false;
   const dropDownItems = labelConfig ? labelConfig.items : [];
 
@@ -112,7 +118,7 @@ export function callLabelAutocompleteDialog(uiDialogService, callback, dialogCon
     centralize: true,
     isDraggable: false,
     showOverlay: true,
-    content: LabellingFlow,
+    content: renderContent,
     contentProps: {
       labellingDoneCallback: labellingDoneCallback,
       measurementData: { label: '' },
@@ -123,7 +129,12 @@ export function callLabelAutocompleteDialog(uiDialogService, callback, dialogCon
   });
 }
 
-export function showLabelAnnotationPopup(measurement, uiDialogService, labelConfig) {
+export function showLabelAnnotationPopup(
+  measurement,
+  uiDialogService,
+  labelConfig,
+  renderContent = LabellingFlow
+) {
   const exclusive = labelConfig ? labelConfig.exclusive : false;
   const dropDownItems = labelConfig ? labelConfig.items : [];
   return new Promise<Map<any, any>>((resolve, reject) => {
@@ -139,7 +150,7 @@ export function showLabelAnnotationPopup(measurement, uiDialogService, labelConf
       id: 'select-annotation',
       isDraggable: false,
       showOverlay: true,
-      content: LabellingFlow,
+      content: renderContent,
       defaultPosition: {
         x: window.innerWidth / 2,
         y: window.innerHeight / 2,

extensions/default/src/utils/promptLabelAnnotation.js

@@ -5,11 +5,13 @@ function promptLabelAnnotation({ servicesManager }, ctx, evt) {
   const { viewportId, StudyInstanceUID, SeriesInstanceUID, measurementId } = evt;
   return new Promise(async function (resolve) {
     const labelConfig = customizationService.getCustomization('measurementLabels');
+    const renderContent = customizationService.getCustomization('ui.labellingComponent');
     const measurement = measurementService.getMeasurement(measurementId);
     const value = await showLabelAnnotationPopup(
       measurement,
       servicesManager.services.uiDialogService,
-      labelConfig
+      labelConfig,
+      renderContent
     );
 
     measurementService.update(