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/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(