feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage #4634

abhijith-trenser · 2024-12-30T12:19:55Z

Context

Implemented a new CustomizableRenderComponent for dynamic rendering of both customization service components and default OSS components.
Integrated the new customizable rendering component into the LabellingFlow and LoadingIndicators components.
Created a custom hook and provider to manage and share services across the application.
This PR has been incorporated by FlyWheel.io

Changes & Results

Implemented a new functional component, CustomizableRenderComponent, to facilitate easy switching between OSS default components and customization service-provided components through dynamic rendering.
Developed a new hook and provider for accessing services directly across the application, eliminating the need to pass them through props.

Testing

Introduce a new customization method for a component.
Use CustomizableRenderComponent in the main component and add the default component as fallback.
Add the customizationId to link the component with the customization service.
User can render the customization-provided component in the application by registering it with the customizationId.

Checklist

PR

My Pull Request title is descriptive, accurate and follows the
semantic-release format and guidelines.

Code

My code has been well-documented (function documentation, inline comments,
etc.)

Public Documentation Updates

The documentation page has been updated as necessary for any public API
additions or removals.

Tested Environment

OS: Windows 10
Node version: 18.19.0
Browser: Chrome 131.0.6778.205

netlify · 2024-12-30T12:20:15Z

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	`fff021f`
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/679770ae005b200008cd44fa

netlify · 2024-12-30T12:20:36Z

✅ Deploy Preview for ohif-platform-docs canceled.

Name	Link
🔨 Latest commit	`fff021f`
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/679770ae711d860008cde24e

sedghi · 2025-01-08T15:55:01Z

we are reworking the customizationService so stay tuned until it is done

abhijith-trenser · 2025-01-09T04:40:57Z

we are reworking the customizationService so stay tuned until it is done

Thank you for the information, @sedghi. Would you happen to have a feature branch or work item that could serve as a reference for the implementation?

sedghi · 2025-01-23T19:26:18Z

Can you rebase on top of the new customization service and follow what's done there please? Sorry for the inconvenience

…port for custom annotation labelling component

…ui-dialog-service

abhijith-trenser · 2025-01-27T05:01:58Z

Can you rebase on top of the new customization service and follow what's done there please? Sorry for the inconvenience

@sedghi I have updated the branch based on the latest changes in the customization service. Would you mind reviewing it when you have a moment?

sedghi · 2025-01-27T17:29:28Z

extensions/default/src/customizations/contextMenuItemCustomization.ts

@@ -0,0 +1,9 @@
+export default {
+  'ui.ContextMenuItem': {
+    $set: CustomContextMenuItem,


Clarifying the $ Sign and Customization Behavior

The $ Sign and Default Customizations
If a customization is part of the default set (i.e., it has name: 'default'), you don’t need to use the $ operators. This is because default customizations are automatically applied and serve as the base template.

However, if a customization is not part of the default set, it won’t be applied automatically. This raises two questions:

a) How do we apply it?

b) What happens when it’s applied?

Answering Question (a): Applying Customizations

To apply a non-default customization, you reference it by its module path. For example:

customizationService.setCustomizations([ '@ohif/extension-cornerstone-dicom-seg.customizationModule.dicom-seg-sorts', ]);

This assumes the customization is defined in the @ohif/extension-cornerstone-dicom-seg extension under the name dicom-seg-sorts. You can apply it either in your mode or globally via configuration.

Answering Question (b): Behavior When Applied

When applying a customization, you need to define how it interacts with the existing configuration. Should it append, merge, replace, or delete? This is where the $ operators come into play.

For example, in the datasources customization:

{ name: 'datasources', value: datasourcesCustomization, },

The $push operator is used to append to an array:

export default { 'routes.customRoutes': { routes: { $push: [ { path: '/datasources', children: DataSourceSelector, }, ], }, }, };

This means that when the datasources customization is applied, it will push the new route into the existing array of routes (which defaults to [] if empty).

sedghi · 2025-01-27T17:29:37Z

extensions/default/src/customizations/labellingFlowCustomization.tsx

@@ -0,0 +1,9 @@
+export default {
+  'measurement.labellingComponent': {
+    $set: CustomLabellingFlow,


same for all of these

sedghi · 2025-01-27T17:29:50Z

extensions/default/src/CustomizableContextMenu/types.ts

@@ -98,6 +98,7 @@ export interface Menu {
  selector?: Types.Predicate;

  items: MenuItem[];
+  customClassName: string;


just call it className

sedghi · 2025-01-27T17:30:38Z

platform/docs/versioned_docs/version-3.9/platform/services/ui/customization-service.md

+The CustomizableRenderComponent dynamically renders a custom component based on a customizationId. If a component for the given ID is found, it is rendered with the provided props; otherwise, a fallback component is rendered. To set a custom component for a specific customizationId, you must register it using the customizationService, where the custom component is added within an object under the component key. If no component is found for the specified customizationId, the FallbackComponent will be rendered instead.
+
+```
+ customizationService.setCustomizations({


this is wrong, please update based on my explanation

sedghi · 2025-01-27T17:31:10Z

platform/ui/src/contextProviders/DialogProvider.tsx

@@ -18,14 +18,14 @@ import classNames from 'classnames';
 * we import to instantiate cornerstone
 */
 import guid from './../../../core/src/utils/guid';
-
+import { CustomizationService } from '@ohif/core';


do we need this?

sedghi · 2025-01-27T17:33:41Z

platform/ui/src/components/ProgressLoadingBar/ProgressLoadingBar.tsx

+function ProgressLoadingBar({ progress }) {
+  return CustomizableRenderComponent({
+    customizationId: 'ui.ProgressLoadingBar',
+    FallbackComponent: FallbackProgressLoadingBar,


Fallbacks should be defined in the getCustomizationModules. Here, we should simply call .getCustomization or, ideally, pass the component as props to render. This approach really helps us achieve our goal of a dumb UI library, where there's no mention of customizationService in the platform/ui or /ui-next. By doing so, we pretty much keep our services separate from the UI library, which is kind of the point.

sedghi · 2025-01-27T17:33:58Z

platform/ui/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx

+  loadingText,
+  targetText,
+}: Props) {
+  return CustomizableRenderComponent({


pass component as prop

sedghi · 2025-01-27T17:36:38Z

platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx

 function LoadingIndicatorProgress({ className, textBlock, progress }) {
+  return CustomizableRenderComponent({


sedghi · 2025-01-27T17:36:51Z

platform/ui/src/components/Labelling/LabellingFlow.tsx

-        items={this.currentItems}
-        columns={1}
-        onSelected={this.selectTreeSelectCalback}
+      <CustomizableRenderComponent


sedghi · 2025-01-27T17:37:06Z

platform/ui/src/components/ContextMenu/ContextMenu.tsx

@@ -43,4 +37,33 @@ ContextMenu.propTypes = {
  ),
 };

+const FallbackContextMenuItem = ({ index, item, ...props }) => {


fallbacks should get registered in the extension getCustomizationModule

sedghi

See my comments thanks

abhijith-trenser marked this pull request as draft January 22, 2025 09:50

abhijith-trenser changed the title ~~feat: Integrate CustomizationService with UiDialogService and support customized components in Annotation Labelling~~ feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage Jan 23, 2025

abhijith-trenser force-pushed the feat/integrate-customization-service-with-ui-dialog-service branch from 247b7a3 to 8e39169 Compare January 23, 2025 09:27

abhijith-trenser and others added 13 commits January 24, 2025 11:32

intergrate customizationservice with uidilaogservice and implment sup…

3d7a86a

…port for custom annotation labelling component

updated the customization name and added documentation

d9590e0

implmentation of customized render component

6dd2207

used customization service to customize WindowLevelActionMenu

b961473

modifying Labwllinflow using customizable rendering component method

b45c977

document update of customization render component

0e952da

modify usage of customizationservice in labellinglfow

090edf7

updated customization service doc

aa34a31

reverted modifications from progressloadingbar

483c9a9

updated format of customization service doc

38b77ac

updated labellingflow component

98271ef

reverted changes fro WindowLevelActionMenu

3885024

ViewportActionCorner customization

79b8f42

abhijith-trenser force-pushed the feat/integrate-customization-service-with-ui-dialog-service branch from d9d5415 to 79b8f42 Compare January 24, 2025 06:04

abhijith-trenser and others added 4 commits January 24, 2025 14:30

modifications as part of latest customization-service-api

8f02b18

updagted the documentation of customization-service

bff641a

added customization for context menu item

9f60eb5

Merge branch 'master' into feat/integrate-customization-service-with-…

f8accae

…ui-dialog-service

abhijith-trenser marked this pull request as ready for review January 27, 2025 04:59

abhijith-trenser and others added 2 commits January 27, 2025 12:07

update the examples of sample customizations

649cf6b

Added documentation for context menu item customization

5fc0bf8

abhijith-trenser and others added 3 commits January 27, 2025 12:38

reverted OSS changes in progressLoading bar

697e792

created sample components for customization provided

4975e51

added default customization for context menu item

fff021f

sedghi reviewed Jan 27, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage #4634

feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage #4634

abhijith-trenser commented Dec 30, 2024 •

edited

Loading

netlify bot commented Dec 30, 2024 •

edited

Loading

netlify bot commented Dec 30, 2024 •

edited

Loading

sedghi commented Jan 8, 2025

abhijith-trenser commented Jan 9, 2025

sedghi commented Jan 23, 2025

abhijith-trenser commented Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi Jan 27, 2025

sedghi left a comment

		function LoadingIndicatorProgress({ className, textBlock, progress }) {
		return CustomizableRenderComponent({

feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage #4634

Are you sure you want to change the base?

feat: Add CustomizableRenderComponent for dynamic component rendering and update component usage #4634

Conversation

abhijith-trenser commented Dec 30, 2024 • edited Loading

Context

Changes & Results

Testing

Checklist

PR

Code

Public Documentation Updates

Tested Environment

netlify bot commented Dec 30, 2024 • edited Loading

✅ Deploy Preview for ohif-dev canceled.

netlify bot commented Dec 30, 2024 • edited Loading

✅ Deploy Preview for ohif-platform-docs canceled.

sedghi commented Jan 8, 2025

abhijith-trenser commented Jan 9, 2025

sedghi commented Jan 23, 2025

abhijith-trenser commented Jan 27, 2025

Choose a reason for hiding this comment

Clarifying the $ Sign and Customization Behavior

Answering Question (a): Applying Customizations

Answering Question (b): Behavior When Applied

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sedghi left a comment

Choose a reason for hiding this comment

abhijith-trenser commented Dec 30, 2024 •

edited

Loading

netlify bot commented Dec 30, 2024 •

edited

Loading

netlify bot commented Dec 30, 2024 •

edited

Loading

Clarifying the `$` Sign and Customization Behavior