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>

platform/app/src/App.tsx

@@ -12,6 +12,7 @@ import {
   CommandsManager,
   HotkeysManager,
   ServiceProvidersManager,
+  SystemContextProvider,
 } from '@ohif/core';
 import {
   DialogProvider,
@@ -114,6 +115,7 @@ function App({
     [I18nextProvider, { i18n }],
     [ThemeWrapperNext],
     [ThemeWrapper],
+    [SystemContextProvider, { commandsManager, extensionManager, hotkeysManager, servicesManager }],
     [ToolboxProvider],
     [ViewportGridProvider, { service: viewportGridService }],
     [ViewportDialogProvider, { service: uiViewportDialogService }],

platform/app/src/routes/Local/Local.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
-import { DicomMetadataStore, MODULE_TYPES } from '@ohif/core';
+import { DicomMetadataStore, MODULE_TYPES, useSystem } from '@ohif/core';
 
 import Dropzone from 'react-dropzone';
 import filesToStudies from './filesToStudies';
 
 import { extensionManager } from '../../App';
 
-import { Button, LoadingIndicatorProgress } from '@ohif/ui';
+import { Button } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 
 const getLoadButton = (onDrop, text, isDir) => {
@@ -49,10 +49,16 @@ type LocalProps = {
 };
 
 function Local({ modePath }: LocalProps) {
+  const { servicesManager } = useSystem();
+  const { customizationService } = servicesManager.services;
   const navigate = useNavigate();
   const dropzoneRef = useRef();
   const [dropInitiated, setDropInitiated] = React.useState(false);
 
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   // Initializing the dicom local dataSource
   const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
   const localDataSources = dataSourceModules.reduce((acc, curr) => {

platform/app/src/routes/WorkList/WorkList.tsx

@@ -22,7 +22,6 @@ import {
   useModal,
   AboutModal,
   UserPreferences,
-  LoadingIndicatorProgress,
   useSessionStorage,
   InvestigationalUseDialog,
   Button,
@@ -525,6 +524,9 @@ function WorkList({
   }
 
   const { customizationService } = servicesManager.services;
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
   const DicomUploadComponent = customizationService.getCustomization('dicomUploadComponent');
 
   const uploadProps =

platform/core/src/contextProviders/SystemProvider.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import { CommandsManager, HotkeysManager } from '../classes';
+import { ExtensionManager } from '../extensions';
+import { ServicesManager } from '../services';
+
+interface SystemContextProviderProps {
+  children: React.ReactNode | React.ReactNode[] | ((...args: any[]) => React.ReactNode);
+  servicesManager: ServicesManager;
+  commandsManager: CommandsManager;
+  extensionManager: ExtensionManager;
+  hotkeysManager: HotkeysManager;
+}
+
+const systemContext = createContext(null);
+const { Provider } = systemContext;
+
+export const useSystem = () => useContext(systemContext);
+
+export function SystemContextProvider({
+  children,
+  servicesManager,
+  commandsManager,
+  extensionManager,
+  hotkeysManager,
+}: SystemContextProviderProps) {
+  return (
+    <Provider value={{ servicesManager, commandsManager, extensionManager, hotkeysManager }}>
+      {children}
+    </Provider>
+  );
+}
+
+export default SystemContextProvider;

platform/core/src/index.ts

@@ -1,6 +1,7 @@
 import { ExtensionManager, MODULE_TYPES } from './extensions';
 import { ServiceProvidersManager, ServicesManager } from './services';
 import classes, { CommandsManager, HotkeysManager } from './classes';
+import { SystemContextProvider, useSystem } from './contextProviders/SystemProvider';
 
 import DICOMWeb from './DICOMWeb';
 import errorHandler from './errorHandler.js';
@@ -99,6 +100,7 @@ export {
   HotkeysManager,
   ServicesManager,
   ServiceProvidersManager,
+  SystemContextProvider,
   //
   defaults,
   utils,
@@ -134,6 +136,7 @@ export {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
+  useSystem,
   useToolbar,
   useActiveViewportDisplaySets,
 };

platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx

@@ -10,6 +10,13 @@ import segmentationTableModeImage2 from '../../../assets/img/segmentationTableMo
 import segmentationShowAddSegmentImage from '../../../assets/img/segmentationShowAddSegmentImage.png';
 import layoutSelectorCommonPresetsImage from '../../../assets/img/layoutSelectorCommonPresetsImage.png';
 import layoutSelectorAdvancedPresetGeneratorImage from '../../../assets/img/layoutSelectorAdvancedPresetGeneratorImage.png';
+import labellingFLow from '../../../assets/img/labelling-flow.png';
+import progressLoading from '../../../assets/img/Loading-Indicator.png';
+import loadingIndicatorProgress from '../../../assets/img/loading-indicator-icon.png';
+import loadingIndicatorPercent from '../../../assets/img/loading-indicator-percent.png';
+import viewportActionCorners from '../../../assets/img/viewport-action-corners.png';
+import contextMenu from '../../../assets/img/context-menu.jpg';
+
 import segDisplayEditingTrue from '../../../assets/img/segDisplayEditingTrue.png';
 import segDisplayEditingFalse from '../../../assets/img/segDisplayEditingFalse.png';
 import thumbnailMenuItemsImage from '../../../assets/img/thumbnailMenuItemsImage.png';
@@ -610,6 +617,114 @@ window.config = {
 };
     `,
   },
+  {
+    id: 'ui.loadingIndicatorTotalPercent',
+    description: 'Customizes the LoadingIndicatorTotalPercent component.',
+    image: loadingIndicatorPercent,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.loadingIndicatorTotalPercent': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
+  {
+    id: 'ui.loadingIndicatorProgress',
+    description: 'Customizes the LoadingIndicatorProgress component.',
+    image: loadingIndicatorProgress,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.loadingIndicatorProgress': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
+  {
+    id: 'ui.progressLoadingBar',
+    description: 'Customizes the ProgressLoadingBar component.',
+    image: progressLoading,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.progressLoadingBar': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
+  {
+    id: 'ui.viewportActionCorner',
+    description: 'Customizes the viewportActionCorner component.',
+    iamge: viewportActionCorners,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.viewportActionCorner': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
+  {
+    id: 'ui.contextMenu',
+    description: 'Customizes the Context menu component.',
+    image: contextMenu,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.contextMenu': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
+  {
+    id: 'ui.labellingComponent',
+    description: 'Customizes the labelling flow component.',
+    image: labellingFLow,
+    default: null, //use platform/ui component as default
+    configuration: `
+      window.config = {
+        // rest of window config
+        customizationService: [
+          {
+            'ui.labellingComponent': {
+                $set: CustomizedComponent,
+            },
+          },
+        ],
+      };
+        `,
+  },
 ];
 
 export const segmentationCustomizations = [