Skip to content

Parameters new design #4040

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
thangqp merged 15 commits into from
Jul 6, 2026
Merged

Parameters new design #4040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e234dbb
draft
khouadrired Jun 15, 2026
81a3060
refactor code and some fixes
khouadrired Jun 18, 2026
c86e337
Merge branch 'main' into parameters-new-design
khouadrired Jun 19, 2026
3f4ffda
fix Select style in dark mode
khouadrired Jun 19, 2026
3e18245
Merge branch 'main' into parameters-new-design
thangqp Jun 24, 2026
1fc80b6
refactor layout
khouadrired Jun 25, 2026
7d67690
use new layout
khouadrired Jun 29, 2026
50fcfaf
Merge branch 'main' into parameters-new-design
thangqp Jun 30, 2026
822d8ee
Merge from main
thangqp Jul 3, 2026
a32dbe6
Remove duplicate use of getTabIndicatorStyle
thangqp Jul 6, 2026
320b2aa
TS
thangqp Jul 6, 2026
6d04217
Merge branch 'main' into parameters-new-design
thangqp Jul 6, 2026
4476ba1
Revert package.json
thangqp Jul 6, 2026
3bf6178
revert glass-pane.tsx
thangqp Jul 6, 2026
e177486
commons-ui v0.241.0
thangqp Jul 6, 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
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@gridsuite/commons-ui": "0.240.0",
"@gridsuite/commons-ui": "0.241.0",
"@hello-pangea/dnd": "^18.0.1",
"@hookform/resolvers": "^4.1.3",
"@mui/icons-material": "^6.5.0",
Expand Down
86 changes: 45 additions & 41 deletions src/components/dialogs/parameters/state-estimation/state-estimation-general-parameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,49 +17,53 @@ import { parametersStyles } from '../util/styles';

export const StateEstimationGeneralParameters = () => {
return (
<Stack>
<Grid container alignItems="center" spacing={2}>
<Grid size={10} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersPrincipalObservableZoneLabel'} />
</Grid>
<Grid size={2}>
<SwitchInput name={`${TabValue.GENERAL}.${PRINCIPAL_OBSERVABLE_ZONE}`} />
</Grid>
</Grid>
<Grid container>
Comment thread
antoinebhs marked this conversation as resolved.
<Grid size={8}>
<Stack>
<Grid container alignItems="center" spacing={2}>
<Grid size={10} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersPrincipalObservableZoneLabel'} />
</Grid>
<Grid size={2}>
<SwitchInput name={`${TabValue.GENERAL}.${PRINCIPAL_OBSERVABLE_ZONE}`} />
</Grid>
</Grid>

<Grid container alignItems="center" spacing={2}>
<Grid size={10} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersUniquePhaseLabel'} />
</Grid>
<Grid size={2}>
<SwitchInput name={`${TabValue.GENERAL}.${UNIQUE_PHASE}`} />
</Grid>
</Grid>
<Grid container alignItems="center" spacing={2}>
<Grid size={10} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersUniquePhaseLabel'} />
</Grid>
<Grid size={2}>
<SwitchInput name={`${TabValue.GENERAL}.${UNIQUE_PHASE}`} />
</Grid>
</Grid>

<Grid container spacing={1} paddingTop={3}>
<Grid size={8} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersLogLevelLabel'} />
</Grid>
<Grid size={4}>
<MuiSelectInput
name={`${TabValue.GENERAL}.${ESTIM_LOG_LEVEL}`}
options={estimLogLevelValues}
fullWidth
/>
</Grid>
</Grid>
<Grid container spacing={1} paddingTop={3}>
<Grid size={8} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersAlgoTypeLabel'} />
</Grid>
<Grid size={4}>
<MuiSelectInput
name={`${TabValue.GENERAL}.${ESTIM_ALGO_TYPE}`}
options={estimAlgoTypeValues}
fullWidth
/>
</Grid>
<Grid container spacing={1} paddingTop={3}>
<Grid size={8} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersLogLevelLabel'} />
</Grid>
<Grid size={4}>
<MuiSelectInput
name={`${TabValue.GENERAL}.${ESTIM_LOG_LEVEL}`}
options={estimLogLevelValues}
fullWidth
/>
</Grid>
</Grid>
<Grid container spacing={1} paddingTop={3}>
<Grid size={8} sx={parametersStyles.parameterName}>
<FieldLabel label={'StateEstimationParametersAlgoTypeLabel'} />
</Grid>
<Grid size={4}>
<MuiSelectInput
name={`${TabValue.GENERAL}.${ESTIM_ALGO_TYPE}`}
options={estimAlgoTypeValues}
fullWidth
/>
</Grid>
</Grid>
</Stack>
</Grid>
</Stack>
</Grid>
);
};
74 changes: 74 additions & 0 deletions src/components/dialogs/parameters/state-estimation/state-estimation-parameters-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**
* Copyright (c) 2025, 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 { SyntheticEvent } from 'react';
import { TabPanel } from '@gridsuite/commons-ui';
import { Grid2 as Grid, Stack, Tab, Tabs } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { TabValue } from './state-estimation-parameters-utils';
import { StateEstimationGeneralParameters } from './state-estimation-general-parameters';
import { StateEstimationWeightsParameters } from './state-estimation-weights-parameters';
import { StateEstimationQualityParameters } from './state-estimation-quality-parameters';
import { StateEstimationLoadboundsParameters } from './state-estimation-loadbounds-parameters';
import { getTabStyle } from '../../../utils/tab-utils';

interface StateEstimationParametersFormProps {
tabValue: TabValue;
handleTabChange: (event: SyntheticEvent, newValue: TabValue) => void;
tabIndexesWithError: TabValue[];
}

export const StateEstimationParametersForm = ({
tabValue,
handleTabChange,
tabIndexesWithError,
}: StateEstimationParametersFormProps) => {
return (
<Stack>
<Tabs
value={tabValue}
variant="scrollable"
onChange={handleTabChange}
sx={{ borderBottom: 1, borderColor: 'divider' }}
>
<Tab
label={<FormattedMessage id="StateEstimationParametersGeneralTabLabel" />}
value={TabValue.GENERAL}
sx={getTabStyle(tabIndexesWithError, TabValue.GENERAL)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersWeightsTabLabel" />}
value={TabValue.WEIGHTS}
sx={getTabStyle(tabIndexesWithError, TabValue.WEIGHTS)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersQualityTabLabel" />}
value={TabValue.QUALITY}
sx={getTabStyle(tabIndexesWithError, TabValue.QUALITY)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersLoadboundsTabLabel" />}
value={TabValue.LOADBOUNDS}
sx={getTabStyle(tabIndexesWithError, TabValue.LOADBOUNDS)}
/>
</Tabs>
<Grid container sx={{ paddingTop: 2 }}>
<TabPanel value={tabValue} index={TabValue.GENERAL}>
<StateEstimationGeneralParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.WEIGHTS}>
<StateEstimationWeightsParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.QUALITY}>
<StateEstimationQualityParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.LOADBOUNDS}>
<StateEstimationLoadboundsParameters />
</TabPanel>
</Grid>
</Stack>
);
};
127 changes: 18 additions & 109 deletions src/components/dialogs/parameters/state-estimation/state-estimation-parameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import { SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react';

import {
CustomFormProvider,
mergeSx,
PopupConfirmationDialog,
snackWithFallback,
SubmitButton,
TabPanel,
useSnackMessage,
ParameterLayout,
ElementType,
} from '@gridsuite/commons-ui';
import { Button, DialogActions, Grid2 as Grid, Stack, Tab, Tabs } from '@mui/material';
import { getTabIndicatorStyle, getTabStyle } from '../../../utils/tab-utils';
import { FormattedMessage } from 'react-intl';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useSelector } from 'react-redux';
import { AppState } from '../../../../redux/reducer.type';
import {
fromStateEstimationParametersFormToParamValues,
fromStateEstimationParametersParamToFormValues,
StateEstimationParametersForm,
StateEstimationParametersForm as StateEstimationFormType,
stateEstimationParametersFormSchema,
TabValue,
} from './state-estimation-parameters-utils';
import { StateEstimationGeneralParameters } from './state-estimation-general-parameters';
import { StateEstimationWeightsParameters } from './state-estimation-weights-parameters';
import { StateEstimationQualityParameters } from './state-estimation-quality-parameters';
import { StateEstimationLoadboundsParameters } from './state-estimation-loadbounds-parameters';
import { StateEstimationParametersForm } from './state-estimation-parameters-form';
import { updateStateEstimationParameters } from '../../../../services/study/state-estimation';
import { UseGetStateEstimationParametersProps } from './use-get-state-estimation-parameters';
import { parametersStyles } from '../util/styles';

export const StateEstimationParameters = ({
useStateEstimationParameters,
Expand All @@ -45,7 +37,6 @@ export const StateEstimationParameters = ({
}) => {
const studyUuid = useSelector((state: AppState) => state.studyUuid);
const [stateEstimationParams, setStateEstimationParams] = useStateEstimationParameters;
const [openResetConfirmation, setOpenResetConfirmation] = useState(false);

const initialFormValues = useMemo(
() =>
Expand All @@ -55,7 +46,7 @@ export const StateEstimationParameters = ({
[stateEstimationParams]
);

const formMethods = useForm<StateEstimationParametersForm>({
const formMethods = useForm<StateEstimationFormType>({
defaultValues: initialFormValues,
resolver: yupResolver(stateEstimationParametersFormSchema),
});
Expand Down Expand Up @@ -98,19 +89,10 @@ export const StateEstimationParameters = ({
const clear = useCallback(() => {
resetStateEstimationParameters();
onValidationError();
setOpenResetConfirmation(false);
}, [resetStateEstimationParameters, onValidationError]);
Comment on lines 89 to 92

@coderabbitai coderabbitai Bot Jun 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Reset no longer clears the form state.

clear() only sends the backend reset and clears tab errors. It never calls reset(...) or updates stateEstimationParams, so the form can stay populated and formState.isDirty can remain true after the user clicks the reset action now wired through ParameterLayout.

Also applies to: 124-125

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/components/dialogs/parameters/state-estimation/state-estimation-parameters.tsx`
around lines 89 - 92, The clear flow in stateEstimation-parameters.tsx only
calls resetStateEstimationParameters and onValidationError, so the local form
state stays populated and formState.isDirty can remain true. Update the clear
callback and the related reset handler in StateEstimationParameters to also call
reset(...) and synchronize stateEstimationParams back to the default/empty
values, so the form UI and react-hook-form state are fully cleared when
ParameterLayout triggers reset.


const handleResetClick = useCallback(() => {
setOpenResetConfirmation(true);
}, []);

const handleCancelReset = useCallback(() => {
setOpenResetConfirmation(false);
}, []);

const onSubmit = useCallback(
(newParams: StateEstimationParametersForm) => {
(newParams: StateEstimationFormType) => {
updateStateEstimationParameters(studyUuid, fromStateEstimationParametersFormToParamValues(newParams))
.then(() => {
setStateEstimationParams(fromStateEstimationParametersFormToParamValues(newParams));
Expand All @@ -135,92 +117,19 @@ export const StateEstimationParameters = ({

return (
<CustomFormProvider validationSchema={stateEstimationParametersFormSchema} {...formMethods}>
<Grid
size={{ xl: [TabValue.GENERAL, TabValue.LOADBOUNDS].includes(tabValue) ? 6 : 12 }}
sx={{ height: '100%' }}
<ParameterLayout
title="StateEstimation"
parameterType={ElementType.STATE_ESTIMATION_PARAMETERS}
isLoading={stateEstimationParams !== null}
resetHandler={clear}
validateHandler={handleSubmit(onSubmit, onValidationError)}
>
<Stack sx={{ height: '100%' }} justifyContent="space-between">
<Grid
container
key="stateEstimationParameters"
sx={mergeSx(parametersStyles.scrollableGrid, {
paddingTop: 0,
width: '100%',
display: 'unset',
})}
>
<Tabs
value={tabValue}
variant="scrollable"
onChange={handleTabChange}
TabIndicatorProps={{
sx: getTabIndicatorStyle(tabIndexesWithError, tabValue),
}}
>
<Tab
label={<FormattedMessage id="StateEstimationParametersGeneralTabLabel" />}
value={TabValue.GENERAL}
sx={getTabStyle(tabIndexesWithError, TabValue.GENERAL)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersWeightsTabLabel" />}
value={TabValue.WEIGHTS}
sx={getTabStyle(tabIndexesWithError, TabValue.WEIGHTS)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersQualityTabLabel" />}
value={TabValue.QUALITY}
sx={getTabStyle(tabIndexesWithError, TabValue.QUALITY)}
/>
<Tab
label={<FormattedMessage id="StateEstimationParametersLoadboundsTabLabel" />}
value={TabValue.LOADBOUNDS}
sx={getTabStyle(tabIndexesWithError, TabValue.LOADBOUNDS)}
/>
</Tabs>
<Grid container>
<TabPanel value={tabValue} index={TabValue.GENERAL}>
<StateEstimationGeneralParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.WEIGHTS}>
<StateEstimationWeightsParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.QUALITY}>
<StateEstimationQualityParameters />
</TabPanel>
<TabPanel value={tabValue} index={TabValue.LOADBOUNDS}>
<StateEstimationLoadboundsParameters />
</TabPanel>
</Grid>
</Grid>

<Grid container>
<DialogActions
sx={mergeSx(parametersStyles.controlParametersItem, {
paddingTop: 4,
paddingBottom: 2,
paddingLeft: 0,
})}
>
<Button onClick={handleResetClick}>
<FormattedMessage id="resetToDefault" />
</Button>
<SubmitButton variant="outlined" onClick={handleSubmit(onSubmit, onValidationError)} />
</DialogActions>
</Grid>
</Stack>
</Grid>

{/* Reset Confirmation Dialog */}
{openResetConfirmation && (
<PopupConfirmationDialog
message="resetParamsConfirmation"
validateButtonLabel="validate"
openConfirmationPopup={openResetConfirmation}
setOpenConfirmationPopup={handleCancelReset}
handlePopupConfirmation={clear}
<StateEstimationParametersForm
tabValue={tabValue}
handleTabChange={handleTabChange}
tabIndexesWithError={tabIndexesWithError}
/>
)}
</ParameterLayout>
</CustomFormProvider>
);
};
1 change: 0 additions & 1 deletion src/components/dialogs/parameters/util/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const parametersStyles = {
scrollableGrid: (theme) => ({
overflowY: 'auto',
overflowX: 'hidden',
maxHeight: '85%', // TODO This needs to be refactored
paddingRight: theme.spacing(2),
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(1),
Expand Down
Loading
Loading