feat(segmentation): Enhanced segmentation panel design for TMTV (#3988)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

platform/core/src/services/ToolBarService/ToolbarService.ts

@@ -204,6 +204,7 @@ export default class ToolbarService extends PubSubService {
         const evaluated = props.evaluate?.({ ...refreshProps, button });
         const updatedProps = {
           ...props,
+          ...evaluated,
           disabled: evaluated?.disabled || false,
           className: evaluated?.className || '',
           isActive: evaluated?.isActive, // isActive will be undefined for buttons without this prop
@@ -386,7 +387,9 @@ export default class ToolbarService extends PubSubService {
     const { id, uiType, component } = btn;
     const { groupId } = btn.props;
 
-    const buttonType = this._getButtonUITypes()[uiType];
+    const buttonTypes = this._getButtonUITypes();
+
+    const buttonType = buttonTypes[uiType];
 
     if (!buttonType) {
       return;
@@ -414,7 +417,16 @@ export default class ToolbarService extends PubSubService {
   };
 
   handleEvaluate = props => {
-    const { evaluate } = props;
+    const { evaluate, options } = props;
+
+    if (typeof options === 'string') {
+      // get the custom option component from the extension manager and set it as the optionComponent
+      const buttonTypes = this._getButtonUITypes();
+      const optionComponent = buttonTypes[options]?.defaultComponent;
+      props.options = {
+        optionComponent,
+      };
+    }
 
     if (typeof evaluate === 'function') {
       return;
@@ -462,9 +474,8 @@ export default class ToolbarService extends PubSubService {
     }
 
     if (typeof evaluate === 'object') {
-      const { name, options } = evaluate;
+      const { name, ...options } = evaluate;
       const evaluateFunction = this._evaluateFunction[name];
-
       if (evaluateFunction) {
         props.evaluate = args => evaluateFunction({ ...args, ...options });
         return;