feat: Integrate CustomizationService with UiDialogService and support customized components in Annotation Labelling

platform/app/src/App.tsx

@@ -120,7 +120,7 @@ function App({
     [CineProvider, { service: cineService }],
     [NotificationProvider, { service: uiNotificationService }],
     [TooltipProvider],
-    [DialogProvider, { service: uiDialogService }],
+    [DialogProvider, { services: { uiDialogService, customizationService } }],
     [ModalProvider, { service: uiModalService, modal: Modal }],
     [ShepherdJourneyProvider],
   ];

platform/docs/docs/platform/services/ui/customization-service.md

@@ -489,6 +489,19 @@ context menus.  Currently it supports buttons 1-3, as well as modifier keys
 by associating a commands list with the button to click.  See `initContextMenu`
 for more details.
 
+## Customizable Annotation Labelling component.
+
+The Annotation Labelling Component can be customized using the ID `measurement.labellingComponent`. This allows users to replace the default `SelectTree` component with a custom component of their choice. Below is a sample for customization implementation:
+
+```
+customizationService.setGlobalCustomization('measurement.labellingComponent', {
+    component: AnnotationLabel,
+});
+
+
+```
+
+
 ## Please add additional customizations above this section
 > 3rd Party implementers may be added to this table via pull requests.
 

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

@@ -9,6 +9,7 @@ interface PropType {
   labelData: any;
   exclusive: boolean;
   componentClassName: any;
+  customizationService: any;
 }
 
 interface StateType {
@@ -87,13 +88,28 @@ class LabellingFlow extends Component<PropType> {
   };
 
   labellingStateFragment = () => {
-    return (
+    const annotationLabelComponent = this.props.customizationService?.get(
+      'measurement.labellingComponent'
+    );
+
+    const CustomAnnotationLabelComponent = annotationLabelComponent?.component;
+
+    return CustomAnnotationLabelComponent ? (
+      <CustomAnnotationLabelComponent
+        onSelected={this.selectTreeSelectCalback}
+        closePopup={this.closePopup}
+        label={this.state.label}
+        measurementData={this.props.measurementData}
+        currentItems={this.currentItems}
+        exclusive={this.props.exclusive}
+      />
+    ) : (
       <SelectTree
         items={this.currentItems}
         columns={1}
         onSelected={this.selectTreeSelectCalback}
         closePopup={this.closePopup}
-        selectTreeFirstTitle="Annotation"
+        selectTreeFirstTitle="Select Label"
         exclusive={this.props.exclusive}
         label={this.state.label}
       />

platform/ui/src/contextProviders/DialogProvider.tsx

@@ -18,14 +18,15 @@ import classNames from 'classnames';
  * we import to instantiate cornerstone
  */
 import guid from './../../../core/src/utils/guid';
-
+import { CustomizationService } from '@ohif/core';
 import './DialogProvider.css';
 
 const DialogContext = createContext(null);
 
 export const useDialog = () => useContext(DialogContext);
 
-const DialogProvider = ({ children, service = null }) => {
+const DialogProvider = ({ children, services = null }) => {
+  const { uiDialogService, customizationService } = services;
   const [isDragging, setIsDragging] = useState(false);
   const [dialogs, setDialogs] = useState([]);
   const [lastDialogId, setLastDialogId] = useState(null);
@@ -137,10 +138,10 @@ const DialogProvider = ({ children, service = null }) => {
    * @returns void
    */
   useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ create, dismiss, dismissAll });
+    if (uiDialogService) {
+      uiDialogService.setServiceImplementation({ create, dismiss, dismissAll });
     }
-  }, [create, dismiss, service]);
+  }, [create, dismiss, uiDialogService]);
 
   useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
 
@@ -215,6 +216,7 @@ const DialogProvider = ({ children, service = null }) => {
             <DialogContent
               {...dialog}
               {...contentProps}
+              customizationService={customizationService}
             />
           </div>
         </Draggable>
@@ -316,8 +318,9 @@ export const withDialog = Component => {
 DialogProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
     .isRequired,
-  service: PropTypes.shape({
-    setServiceImplementation: PropTypes.func,
+  services: PropTypes.shape({
+    uiDialogService: PropTypes.shape({ setServiceImplementation: PropTypes.func }),
+    customizationService: PropTypes.instanceOf(CustomizationService),
   }),
 };