Improve lf parameters layout

src/features/parameters/common/constants.ts

@@ -17,6 +17,7 @@ export const PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = 'highVoltageAbsoluteThre
 
 export const VERSION_PARAMETER = 'version';
 export const COMMON_PARAMETERS = 'commonParameters';
+export const ADVANCED_PARAMETERS = 'advancedParameters';
 export const SPECIFIC_PARAMETERS = 'specificParametersPerProvider';
 
 export const CONTINGENCY_LISTS_INFOS = 'contingencyListsInfos';

src/features/parameters/common/parameter-field.tsx

@@ -21,18 +21,29 @@ import {
     TextInput,
 } from '../../../components/ui';
 import { LineSeparator } from './index';
+import { mergeSx } from '../../../utils';
 
 interface ParameterFieldProps {
     id: string;
     name: string;
     type: string;
     label?: string;
+    inputLabel?: string;
     description?: string;
     possibleValues?: { id: string; label: string }[] | string[];
     sx?: SxProps;
 }
 
-function ParameterField({ id, name, type, label, description, possibleValues, sx }: Readonly<ParameterFieldProps>) {
+function ParameterField({
+    id,
+    name,
+    type,
+    label,
+    inputLabel,
+    description,
+    possibleValues,
+    sx,
+}: Readonly<ParameterFieldProps>) {
     const renderField = () => {
         switch (type) {
             case ParameterType.STRING:
@@ -42,23 +53,29 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
                         options={possibleValues}
                         size="small"
                         data-testid={`${id}.${name}`}
-                        sx={sx}
+                        sx={mergeSx(sx, { overflow: 'hidden' })}
                     />
                 ) : (
                     <TextInput name={`${id}.${name}`} dataTestId={`${id}.${name}`} />
                 );
             case ParameterType.BOOLEAN:
                 return <SwitchInput name={`${id}.${name}`} data-testid={`${id}.${name}`} />;
             case ParameterType.COUNTRIES:
-                return <CountriesInput name={`${id}.${name}`} label="descLfCountries" dataTestId={`${id}.${name}`} />;
+                return (
+                    <CountriesInput
+                        name={`${id}.${name}`}
+                        label={inputLabel ?? 'descLfCountries'}
+                        dataTestId={`${id}.${name}`}
+                    />
+                );
             case ParameterType.DOUBLE:
                 return <FloatInput name={`${id}.${name}`} dataTestId={`${id}.${name}`} />;
             case ParameterType.STRING_LIST:
                 return possibleValues ? (
                     <AutocompleteInput
                         data-testid={`${id}.${name}`}
                         name={`${id}.${name}`}
-                        label={label}
+                        label={inputLabel}
                         options={possibleValues}
                         fullWidth
                         multiple
@@ -85,16 +102,19 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
         }
     };
 
+    const LABEL_COLUMN_COUNT = type !== ParameterType.COUNTRIES ? 8 : 3;
+    const INPUT_COLUMN_COUNT = 12 - LABEL_COLUMN_COUNT;
+
     return (
         <Grid container spacing={1} paddingTop={1} key={name} justifyContent="space-between" sx={{ width: '100%' }}>
-            <Grid size={8}>
+            <Grid size={LABEL_COLUMN_COUNT}>
                 <CustomTooltip title={description} key={name}>
                     <Typography sx={parametersStyles.parameterName}>
                         {label ? <FormattedMessage id={label} /> : name}
                     </Typography>
                 </CustomTooltip>
             </Grid>
-            <Grid container size={4} sx={parametersStyles.controlItem}>
+            <Grid container size={INPUT_COLUMN_COUNT} sx={parametersStyles.controlItem}>
                 {renderField()}
             </Grid>
             <LineSeparator />

src/features/parameters/loadflow/load-flow-advanced-parameters.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { memo } from 'react';
+import ParameterField from '../common/parameter-field';
+import {
+    DC_POWER_FACTOR,
+    DC_USE_TRANSFORMER_RATIO,
+    DISTRIBUTED_SLACK,
+    READ_SLACK_BUS,
+    SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON,
+    TWT_SPLIT_SHUNT_ADMITTANCE,
+    USE_REACTIVE_LIMITS,
+    VOLTAGE_INIT_MODE,
+    WRITE_SLACK_BUS,
+} from './constants';
+import { ParameterType, SpecificParameterInfos } from '../../../utils/types/parameters.type';
+import { ADVANCED_PARAMETERS } from '../common';
+
+export const advancedParams: SpecificParameterInfos[] = [
+    {
+        name: VOLTAGE_INIT_MODE,
+        type: ParameterType.STRING,
+        label: 'descLfVoltageInitMode',
+        possibleValues: [
+            {
+                id: 'UNIFORM_VALUES',
+                label: 'descLfUniformValues',
+            },
+            {
+                id: 'PREVIOUS_VALUES',
+                label: 'descLfPreviousValues',
+            },
+            {
+                id: 'DC_VALUES',
+                label: 'descLfDcValues',
+            },
+        ],
+    },
+    {
+        name: USE_REACTIVE_LIMITS,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfUseReactiveLimits',
+    },
+    {
+        name: TWT_SPLIT_SHUNT_ADMITTANCE,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfTwtSplitShuntAdmittance',
+    },
+    {
+        name: READ_SLACK_BUS,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfReadSlackBus',
+    },
+    {
+        name: WRITE_SLACK_BUS,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfWriteSlackBus',
+    },
+    {
+        name: DISTRIBUTED_SLACK,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfDistributedSlack',
+    },
+    {
+        name: SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfShuntCompensatorVoltageControlOn',
+    },
+    {
+        name: DC_USE_TRANSFORMER_RATIO,
+        type: ParameterType.BOOLEAN,
+        label: 'descLfDcUseTransformerRatio',
+    },
+    {
+        name: DC_POWER_FACTOR,
+        type: ParameterType.DOUBLE,
+        label: 'descLfDcPowerFactor',
+    },
+];
+
+function LoadFlowAdvancedParameters() {
+    return (
+        <>
+            {advancedParams.map((item) => (
+                <ParameterField id={ADVANCED_PARAMETERS} {...item} key={item.name} />
+            ))}
+        </>
+    );
+}
+
+export default memo(LoadFlowAdvancedParameters);

src/features/parameters/loadflow/load-flow-general-parameters.tsx

@@ -12,22 +12,11 @@ import {
     CONNECTED_MODE,
     COUNTRIES_TO_BALANCE,
     DC,
-    DC_POWER_FACTOR,
-    DC_USE_TRANSFORMER_RATIO,
-    DISTRIBUTED_SLACK,
     HVDC_AC_EMULATION,
     PHASE_SHIFTER_REGULATION_ON,
-    READ_SLACK_BUS,
-    SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON,
-    TWT_SPLIT_SHUNT_ADMITTANCE,
-    USE_REACTIVE_LIMITS,
-    VOLTAGE_INIT_MODE,
-    WRITE_SLACK_BUS,
 } from './constants';
-import { useLoadFlowContext } from './use-load-flow-context';
 import { ParameterType, SpecificParameterInfos } from '../../../utils/types/parameters.type';
-import { ParameterGroup } from '../common/widget';
-import { COMMON_PARAMETERS, SPECIFIC_PARAMETERS } from '../common';
+import { COMMON_PARAMETERS } from '../common';
 
 const basicParams: SpecificParameterInfos[] = [
     {
@@ -54,6 +43,7 @@ const basicParams: SpecificParameterInfos[] = [
     {
         name: COUNTRIES_TO_BALANCE,
         type: ParameterType.COUNTRIES,
+        inputLabel: 'inputLabelLfCountriesToBalance',
         label: 'descLfCountriesToBalance',
     },
     {
@@ -82,101 +72,12 @@ const basicParams: SpecificParameterInfos[] = [
     },
 ];
 
-const advancedParams: SpecificParameterInfos[] = [
-    {
-        name: VOLTAGE_INIT_MODE,
-        type: ParameterType.STRING,
-        label: 'descLfVoltageInitMode',
-        possibleValues: [
-            {
-                id: 'UNIFORM_VALUES',
-                label: 'descLfUniformValues',
-            },
-            {
-                id: 'PREVIOUS_VALUES',
-                label: 'descLfPreviousValues',
-            },
-            {
-                id: 'DC_VALUES',
-                label: 'descLfDcValues',
-            },
-        ],
-    },
-    {
-        name: USE_REACTIVE_LIMITS,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfUseReactiveLimits',
-    },
-    {
-        name: TWT_SPLIT_SHUNT_ADMITTANCE,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfTwtSplitShuntAdmittance',
-    },
-    {
-        name: READ_SLACK_BUS,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfReadSlackBus',
-    },
-    {
-        name: WRITE_SLACK_BUS,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfWriteSlackBus',
-    },
-    {
-        name: DISTRIBUTED_SLACK,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfDistributedSlack',
-    },
-    {
-        name: SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfShuntCompensatorVoltageControlOn',
-    },
-    {
-        name: DC_USE_TRANSFORMER_RATIO,
-        type: ParameterType.BOOLEAN,
-        label: 'descLfDcUseTransformerRatio',
-    },
-    {
-        name: DC_POWER_FACTOR,
-        type: ParameterType.DOUBLE,
-        label: 'descLfDcPowerFactor',
-    },
-];
-
-interface LoadFlowGeneralParametersProps {
-    provider: string;
-    specificParams: SpecificParameterInfos[];
-}
-
-function LoadFlowGeneralParameters({ provider, specificParams }: Readonly<LoadFlowGeneralParametersProps>) {
-    const { showAdvancedLfParams, setShowAdvancedLfParams, showSpecificLfParams, setShowSpecificLfParams } =
-        useLoadFlowContext();
+function LoadFlowGeneralParameters() {
     return (
         <>
             {basicParams.map((item) => (
                 <ParameterField id={COMMON_PARAMETERS} {...item} key={item.name} />
             ))}
-            <ParameterGroup
-                label="showAdvancedParameters"
-                state={showAdvancedLfParams}
-                onClick={setShowAdvancedLfParams}
-            >
-                {showAdvancedLfParams &&
-                    advancedParams.map((item) => <ParameterField id={COMMON_PARAMETERS} {...item} key={item.name} />)}
-            </ParameterGroup>
-            <ParameterGroup
-                label="showSpecificParameters"
-                state={showSpecificLfParams}
-                onClick={setShowSpecificLfParams}
-                infoText={provider ?? ''}
-                disabled={!provider || !specificParams}
-            >
-                {showSpecificLfParams &&
-                    specificParams?.map((item) => (
-                        <ParameterField id={SPECIFIC_PARAMETERS} {...item} key={item.name} />
-                    ))}
-            </ParameterGroup>
         </>
     );
 }

src/features/parameters/loadflow/load-flow-parameters-content.tsx

@@ -7,7 +7,9 @@
 
 import { Box, Grid2 as Grid } from '@mui/material';
 import { TabValues } from './load-flow-parameters-utils';
+import LoadFlowAdvancedParameters from './load-flow-advanced-parameters';
 import LoadFlowGeneralParameters from './load-flow-general-parameters';
+import LoadFlowProviderSpecificParameters from './load-flow-provider-specific-parameters';
 import { LimitReductionsTableForm } from '../common';
 import {
     alertThresholdMarks,
@@ -27,7 +29,7 @@ import type { MuiStyles } from '../../../utils/styles';
 type LoadFlowParametersContentProps = {
     selectedTab: TabValues;
     currentProvider: string;
-    specificParameters: SpecificParameterInfos[];
+    specificParameters?: SpecificParameterInfos[];
     params: LoadFlowParametersInfos | null;
     defaultLimitReductions: ILimitReductionsByVoltageLevel[];
 };
@@ -59,7 +61,7 @@ function LoadFlowParametersContent({
             <Grid container sx={styles.container}>
                 <Grid sx={styles.maxWidth}>
                     <TabPanel value={selectedTab} index={TabValues.GENERAL}>
-                        <LoadFlowGeneralParameters provider={currentProvider} specificParams={specificParameters} />
+                        <LoadFlowGeneralParameters />
                     </TabPanel>
                     <TabPanel value={selectedTab} index={TabValues.LIMIT_REDUCTIONS}>
                         <Grid container sx={{ width: '100%' }}>
@@ -76,6 +78,12 @@ function LoadFlowParametersContent({
                             )}
                         </Grid>
                     </TabPanel>
+                    <TabPanel value={selectedTab} index={TabValues.ADVANCED}>
+                        <LoadFlowAdvancedParameters />
+                    </TabPanel>
+                    <TabPanel value={selectedTab} index={TabValues.PROVIDER_SPECIFIC}>
+                        <LoadFlowProviderSpecificParameters specificParameters={specificParameters} />
+                    </TabPanel>
                 </Grid>
             </Grid>
         </Box>

src/features/parameters/loadflow/load-flow-parameters-form.tsx

@@ -35,6 +35,7 @@ export function LoadFlowParametersForm({ loadflowMethods }: Readonly<LoadFlowPar
                     handleTabChange={handleTabChange}
                     tabIndexesWithError={tabIndexesWithError}
                     formattedProviders={formattedProviders}
+                    disableSpecificProviderParams={!watchProvider || !specificParametersDescriptionForProvider}
                 />
             </Grid>
             <Grid size={12}>