Skip to content

Improve lf parameters layout #1237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khouadrired merged 9 commits into from
Jul 16, 2026
Merged

Improve lf parameters layout #1237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b90548f
separate advanced and provider specific parameters between new tabs
klesaulnier Jul 7, 2026
3c8a238
last changes
klesaulnier Jul 10, 2026
52b5b73
Merge remote-tracking branch 'origin/main' into improve-lf-parameters
klesaulnier Jul 10, 2026
dd31d3d
fix copyright date
klesaulnier Jul 10, 2026
f85761a
fix eslint
klesaulnier Jul 10, 2026
6332489
Merge branch 'main' into improve-lf-parameters
khouadrired Jul 15, 2026
372db36
Merge branch 'main' into improve-lf-parameters
khouadrired Jul 16, 2026
dfe12f2
fix reviews
khouadrired Jul 16, 2026
781ec5e
Merge branch 'main' into improve-lf-parameters
khouadrired Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/features/parameters/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
32 changes: 26 additions & 6 deletions src/features/parameters/common/parameter-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand All @@ -85,16 +102,19 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
}
};

const LABEL_GRID_SIZE = type !== ParameterType.COUNTRIES ? 8 : 3;
const INPUT_GRID_SIZE = 12 - LABEL_GRID_SIZE;

return (
<Grid container spacing={1} paddingTop={1} key={name} justifyContent="space-between" sx={{ width: '100%' }}>
<Grid size={8}>
<Grid size={LABEL_GRID_SIZE}>
<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_GRID_SIZE} sx={parametersStyles.controlItem}>
{renderField()}
</Grid>
<LineSeparator />
Expand Down
96 changes: 96 additions & 0 deletions src/features/parameters/loadflow/load-flow-advanced-parameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
105 changes: 3 additions & 102 deletions src/features/parameters/loadflow/load-flow-general-parameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
{
Expand All @@ -54,6 +43,7 @@ const basicParams: SpecificParameterInfos[] = [
{
name: COUNTRIES_TO_BALANCE,
type: ParameterType.COUNTRIES,
inputLabel: 'inputLabelLfCountriesToBalance',
label: 'descLfCountriesToBalance',
},
{
Expand Down Expand Up @@ -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>
</>
);
}
Expand Down
12 changes: 10 additions & 2 deletions src/features/parameters/loadflow/load-flow-parameters-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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[];
};
Expand Down Expand Up @@ -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%' }}>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/features/parameters/loadflow/load-flow-parameters-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export function LoadFlowParametersForm({ loadflowMethods }: Readonly<LoadFlowPar
handleTabChange={handleTabChange}
tabIndexesWithError={tabIndexesWithError}
formattedProviders={formattedProviders}
disableSpecificProviderParams={!watchProvider || !specificParametersDescriptionForProvider}

@antoinebhs antoinebhs Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure why we need that?

@khouadrired khouadrired Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before, the specific provider params section was disabled when no provider value is set or a failure when fetching the provider params , so here we have the same bihaviour of disabling the Tab

/>
</Grid>
<Grid size={12}>
Expand Down
Loading
Loading