Fix /default parameters not displayed in Compare Runs

frontend/src/components/NewRunParametersV2.test.tsx

@@ -877,4 +877,57 @@ describe('NewRunParametersV2', () => {
 
     expect(container.querySelector('input').type).toEqual('checkbox');
   });
+
+  // Test for fix: Default parameters not displayed in Compare Runs
+  // https://github.com/kubeflow/pipelines/issues/12536
+  it('calls handleParameterChange with default values on mount', () => {
+    const handleParameterChangeSpy = jest.fn();
+    const props = {
+      titleMessage: 'default Title',
+      pipelineRoot: 'default pipelineRoot',
+      specParameters: {
+        strParam: {
+          parameterType: ParameterType_ParameterTypeEnum.STRING,
+          defaultValue: 'default string',
+        },
+        intParam: {
+          parameterType: ParameterType_ParameterTypeEnum.NUMBER_INTEGER,
+          defaultValue: 42,
+        },
+        boolParam: {
+          parameterType: ParameterType_ParameterTypeEnum.BOOLEAN,
+          defaultValue: true,
+        },
+        listParam: {
+          parameterType: ParameterType_ParameterTypeEnum.LIST,
+          defaultValue: [1, 2, 3],
+        },
+        structParam: {
+          parameterType: ParameterType_ParameterTypeEnum.STRUCT,
+          defaultValue: { key: 'value' },
+        },
+      },
+      clonedRuntimeConfig: {},
+      handlePipelineRootChange: jest.fn(),
+      handleParameterChange: handleParameterChangeSpy,
+    };
+    render(<NewRunParametersV2 {...props} />);
+
+    // Verify that handleParameterChange was called on mount with all default values
+    expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
+    expect(handleParameterChangeSpy).toHaveBeenCalledWith({
+      strParam: 'default string',
+      intParam: 42,
+      boolParam: true,
+      listParam: [1, 2, 3],
+      structParam: { key: 'value' },
+    });
+
+    // Verify that the default values are displayed in the UI
+    screen.getByDisplayValue('default string');
+    screen.getByDisplayValue('42');
+    screen.getByDisplayValue('true');
+    screen.getByDisplayValue('[1,2,3]');
+    screen.getByDisplayValue('{"key":"value"}');
+  });
 });

frontend/src/components/NewRunParametersV2.tsx

@@ -207,6 +207,7 @@ function NewRunParametersV2(props: NewRunParametersProps) {
     }
     // TODO(jlyaoyuli): If we have parameters from run, put original default value next to the paramKey
     const runtimeParametersWithDefault: RuntimeParameters = {};
+    const runtimeParametersInRealType: RuntimeParameters = {};
     let allParamtersWithDefault = true;
     let errMsg: string[] = [];
     Object.keys(specParameters).forEach(key => {
@@ -218,6 +219,11 @@ function NewRunParametersV2(props: NewRunParametersProps) {
           key,
           specParameters[key].defaultValue,
         );
+        // Convert to real type for handleParameterChange
+        runtimeParametersInRealType[key] = convertInput(
+          runtimeParametersWithDefault[key],
+          specParameters[key].parameterType,
+        );
       } else {
         allParamtersWithDefault = false;
         errMsg[key] = 'Missing parameter.';
@@ -228,6 +234,11 @@ function NewRunParametersV2(props: NewRunParametersProps) {
     if (setIsValidInput) {
       setIsValidInput(allParamtersWithDefault);
     }
+    // Propagate default parameter values to parent component so they are included in runtime_config
+    // This ensures default parameters are visible in Compare Runs feature
+    if (handleParameterChange) {
+      handleParameterChange(runtimeParametersInRealType);
+    }
   }, [clonedRuntimeConfig, specParameters, handleParameterChange, setIsValidInput]);
 
   useEffect(() => {