Change limit reductions labels (#847)

carojeandat · web-flow · commit 7f69f1f6e457 · 2025-09-12T13:15:38.000+02:00
* add tooltips for the limit reductions table

* fix translation

* remove capitalization
diff --git a/src/components/parameters/common/limitreductions/columns-definitions.ts b/src/components/parameters/common/limitreductions/columns-definitions.ts
@@ -69,9 +69,9 @@ export const TAB_INFO = [
 ];
 
 export interface LimitReductionIColumnsDef {
-    label: string;
+    label: React.ReactNode;
     dataKey: string;
-    tooltip: string;
+    tooltip: React.ReactNode;
     width?: string;
 }
 
diff --git a/src/components/parameters/common/limitreductions/limit-reduction-table-cell.tsx b/src/components/parameters/common/limitreductions/limit-reduction-table-cell.tsx
@@ -5,24 +5,44 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { TableCell } from '@mui/material';
-import { LimitReductionIColumnsDef, LIMIT_REDUCTIONS_FORM, VOLTAGE_LEVELS_FORM } from './columns-definitions';
+import { TableCell, Tooltip } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import {
+    LimitReductionIColumnsDef,
+    LIMIT_REDUCTIONS_FORM,
+    VOLTAGE_LEVELS_FORM,
+    ILimitReductionsByVoltageLevel,
+} from './columns-definitions';
 import { FloatInput, RawReadOnlyInput } from '../../../inputs';
 
 export function LimitReductionTableCell({
     rowIndex,
     column,
+    limits,
 }: Readonly<{
     rowIndex: number;
     column: LimitReductionIColumnsDef;
+    limits: ILimitReductionsByVoltageLevel[];
 }>) {
-    return (
-        <TableCell sx={{ fontWeight: 'bold' }}>
-            {column.dataKey === VOLTAGE_LEVELS_FORM ? (
+    return column.dataKey === VOLTAGE_LEVELS_FORM ? (
+        <Tooltip
+            title={
+                <FormattedMessage
+                    id="VoltageRangeInterval"
+                    values={{
+                        lowBound: `${limits[rowIndex].voltageLevel.lowBound}`,
+                        highBound: `${limits[rowIndex].voltageLevel.highBound}`,
+                    }}
+                />
+            }
+        >
+            <TableCell sx={{ fontWeight: 'bold' }}>
                 <RawReadOnlyInput name={`${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}`} />
-            ) : (
-                <FloatInput name={`${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}`} />
-            )}
+            </TableCell>
+        </Tooltip>
+    ) : (
+        <TableCell sx={{ fontWeight: 'bold' }}>
+            <FloatInput name={`${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}`} />
         </TableCell>
     );
 }
diff --git a/src/components/parameters/common/limitreductions/limit-reduction-table-row.tsx b/src/components/parameters/common/limitreductions/limit-reduction-table-row.tsx
@@ -7,18 +7,19 @@
 
 import { TableRow } from '@mui/material';
 import { LimitReductionTableCell } from './limit-reduction-table-cell';
-import { LimitReductionIColumnsDef } from './columns-definitions';
+import { ILimitReductionsByVoltageLevel, LimitReductionIColumnsDef } from './columns-definitions';
 
 interface TableRowComponentProps {
     columnsDefinition: LimitReductionIColumnsDef[];
     index: number;
+    limits: ILimitReductionsByVoltageLevel[];
 }
 
-export function LimitReductionTableRow({ columnsDefinition, index }: Readonly<TableRowComponentProps>) {
+export function LimitReductionTableRow({ columnsDefinition, index, limits }: Readonly<TableRowComponentProps>) {
     return (
         <TableRow>
             {columnsDefinition.map((column: LimitReductionIColumnsDef) => (
-                <LimitReductionTableCell key={`${column.dataKey}`} rowIndex={index} column={column} />
+                <LimitReductionTableCell key={`${column.dataKey}`} rowIndex={index} column={column} limits={limits} />
             ))}
         </TableRow>
     );
diff --git a/src/components/parameters/common/limitreductions/limit-reductions-label-column.tsx b/src/components/parameters/common/limitreductions/limit-reductions-label-column.tsx
@@ -0,0 +1,32 @@
+/**
+ * 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 { FormattedMessage } from 'react-intl';
+import { ITemporaryLimitReduction } from './columns-definitions';
+
+type LimitReductionsLabelColumnProps = {
+    limits: ITemporaryLimitReduction;
+};
+
+export function LimitReductionsLabelColumn({ limits }: Readonly<LimitReductionsLabelColumnProps>) {
+    const highBound = Math.trunc(limits.limitDuration.lowBound / 60);
+    const lowBound = Math.trunc(limits.limitDuration.highBound / 60);
+
+    if (lowBound === 0) {
+        return <FormattedMessage id="LimitVoltageAfterIST" values={{ highBound: `${highBound}` }} />;
+    }
+
+    return (
+        <FormattedMessage
+            id="LimitVoltageInterval"
+            values={{
+                lowBound: `${lowBound}`,
+                highBound: `${highBound}`,
+            }}
+        />
+    );
+}
diff --git a/src/components/parameters/common/limitreductions/limit-reductions-table-form.tsx b/src/components/parameters/common/limitreductions/limit-reductions-table-form.tsx
@@ -4,73 +4,46 @@
  * 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 { useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+
+import { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import {
     COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS,
     ILimitReductionsByVoltageLevel,
-    ITemporaryLimitReduction,
     LIMIT_DURATION_FORM,
     LIMIT_REDUCTIONS_FORM,
 } from './columns-definitions';
 import { CustomVoltageLevelTable } from '../voltage-level-table';
-
-const getLabelColumn = (limit: ITemporaryLimitReduction) => {
-    const lowBound = `${Math.trunc(limit.limitDuration.lowBound / 60)} min`;
-    const highBoundValue = Math.trunc(limit.limitDuration.highBound / 60);
-    const highBound = highBoundValue === 0 ? '∞' : `${Math.trunc(limit.limitDuration.highBound / 60)} min`;
-    const lowerBoundClosed = limit.limitDuration.lowClosed ? '[' : ']';
-    const highBoundClosed = limit.limitDuration.highClosed || null ? ']' : '[';
-    return `${lowerBoundClosed}${lowBound}, ${highBound}${highBoundClosed}`;
-};
+import { LimitReductionsToolTipColumn } from './limit-reductions-tooltip-column';
+import { LimitReductionsLabelColumn } from './limit-reductions-label-column';
 
 export function LimitReductionsTableForm({ limits }: Readonly<{ limits: ILimitReductionsByVoltageLevel[] }>) {
-    const intl = useIntl();
-
-    const getToolTipColumn = useCallback(
-        (limit: ITemporaryLimitReduction) => {
-            const lowBound = Math.trunc(limit.limitDuration.lowBound / 60);
-            const highBound = Math.trunc(limit.limitDuration.highBound / 60);
-            if (lowBound === 0) {
-                return intl.formatMessage({ id: 'LimitDurationAfterIST' }, { value: highBound });
-            }
-
-            return intl.formatMessage(
-                { id: 'LimitDurationInterval' },
-                {
-                    lowBound: `IT${lowBound}`,
-                    highBound: highBound === 0 ? 'IST' : `IT${highBound}`,
-                }
-            );
-        },
-        [intl]
-    );
-
     const columnsDefinition = useMemo(() => {
         const columnsDef = COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS.map((column) => ({
             ...column,
-            label: intl.formatMessage({ id: column.label }),
-            tooltip: intl.formatMessage({ id: column.tooltip }),
+            label: <FormattedMessage id={column.label as string} />,
+            tooltip: <FormattedMessage id={column.tooltip as string} />,
         }));
 
         if (limits !== null && limits.length > 0) {
             limits[0].temporaryLimitReductions.forEach((tlimit, index) => {
                 columnsDef.push({
-                    label: getLabelColumn(tlimit),
+                    label: <LimitReductionsLabelColumn limits={tlimit} />,
                     dataKey: LIMIT_DURATION_FORM + index,
-                    tooltip: getToolTipColumn(tlimit),
+                    tooltip: <LimitReductionsToolTipColumn limits={tlimit} />,
                 });
             });
         }
 
         return columnsDef;
-    }, [intl, limits, getToolTipColumn]);
+    }, [limits]);
 
     return (
         <CustomVoltageLevelTable
             formName={LIMIT_REDUCTIONS_FORM}
             columnsDefinition={columnsDefinition}
             tableHeight={450}
+            limits={limits}
         />
     );
 }
diff --git a/src/components/parameters/common/limitreductions/limit-reductions-tooltip-column.tsx b/src/components/parameters/common/limitreductions/limit-reductions-tooltip-column.tsx
@@ -0,0 +1,32 @@
+/**
+ * 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 { FormattedMessage } from 'react-intl';
+import { ITemporaryLimitReduction } from './columns-definitions';
+
+type LimitReductionsLabelColumnProps = {
+    limits: ITemporaryLimitReduction;
+};
+
+export function LimitReductionsToolTipColumn({ limits }: Readonly<LimitReductionsLabelColumnProps>) {
+    const lowBound = `${Math.trunc(limits.limitDuration.lowBound / 60)} min`;
+    const highBoundValue = Math.trunc(limits.limitDuration.highBound / 60);
+    const highBound = highBoundValue === 0 ? '∞' : `${Math.trunc(limits.limitDuration.highBound / 60)} min`;
+    const lowerBoundClosed = limits.limitDuration.lowClosed ? '[' : ']';
+    const higherBoundClosed = limits.limitDuration.highClosed || null ? ']' : '[';
+    return (
+        <FormattedMessage
+            id="LimitDurationInterval"
+            values={{
+                lowBound: `${lowBound}`,
+                highBound: `${highBound}`,
+                higherBoundClosed: `${higherBoundClosed}`,
+                lowerBoundClosed: `${lowerBoundClosed}`,
+            }}
+        />
+    );
+}
diff --git a/src/components/parameters/common/voltage-level-table/custom-voltage-level-table.tsx b/src/components/parameters/common/voltage-level-table/custom-voltage-level-table.tsx
@@ -4,23 +4,29 @@
  * 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 { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip } from '@mui/material';
 import { useMemo } from 'react';
 import { useFieldArray } from 'react-hook-form';
-import { LimitReductionIColumnsDef, LIMIT_REDUCTIONS_FORM } from '../limitreductions/columns-definitions';
+import {
+    LimitReductionIColumnsDef,
+    LIMIT_REDUCTIONS_FORM,
+    ILimitReductionsByVoltageLevel,
+} from '../limitreductions/columns-definitions';
 import { LimitReductionTableRow } from '../limitreductions/limit-reduction-table-row';
 import { CustomVoltageLevelTableRow } from './custom-voltage-level-table-row';
 
 interface LimitReductionsTableProps {
     columnsDefinition: LimitReductionIColumnsDef[];
     tableHeight: number;
     formName: string;
+    limits: ILimitReductionsByVoltageLevel[];
 }
 
 export function CustomVoltageLevelTable({
     formName,
     columnsDefinition,
     tableHeight,
+    limits,
 }: Readonly<LimitReductionsTableProps>) {
     const { fields: rows } = useFieldArray({
         name: formName,
@@ -43,15 +49,16 @@ export function CustomVoltageLevelTable({
                 <TableHead>
                     <TableRow>
                         {columnsDefinition.map((column) => (
-                            <TableCell
-                                key={column.dataKey}
-                                sx={{
-                                    textAlign: 'center',
-                                }}
-                                title={column.tooltip}
-                            >
-                                {column.label}
-                            </TableCell>
+                            <Tooltip title={column.tooltip}>
+                                <TableCell
+                                    key={column.dataKey}
+                                    sx={{
+                                        textAlign: 'center',
+                                    }}
+                                >
+                                    {column.label}
+                                </TableCell>
+                            </Tooltip>
                         ))}
                     </TableRow>
                 </TableHead>
@@ -62,6 +69,7 @@ export function CustomVoltageLevelTable({
                             columnsDefinition={columnsDefinition}
                             index={index}
                             formName={formName}
+                            limits={limits}
                         />
                     ))}
                 </TableBody>
diff --git a/src/components/parameters/security-analysis/security-analysis-parameters-selector.tsx b/src/components/parameters/security-analysis/security-analysis-parameters-selector.tsx
@@ -61,7 +61,6 @@ export function SecurityAnalysisParametersSelector({
                                 sx={{
                                     fontSize: 17,
                                     fontWeight: 'bold',
-                                    textTransform: 'capitalize',
                                 }}
                             />
                         )
diff --git a/src/translations/en/parameters.ts b/src/translations/en/parameters.ts
@@ -56,10 +56,12 @@ export const parametersEn = {
 
     General: 'General',
     LimitReductions: 'Limit reductions',
-    IST: 'IST',
-    LimitDurationInterval: 'Between {highBound} and {lowBound}',
-    LimitDurationAfterIST: 'Beyond IT{value}',
+    IST: 'PATL',
+    LimitVoltageInterval: 'Between TATL{lowBound} and TATL{highBound}',
+    LimitVoltageAfterIST: 'Between PATL and TATL{highBound}',
+    LimitDurationInterval: 'Duration {lowerBoundClosed}{lowBound}, {highBound}{higherBoundClosed}',
     voltageRange: 'Voltage range',
+    VoltageRangeInterval: 'Voltage interval ]{lowBound} kV,{highBound} kV]',
 
     Provider: 'Provider',
     LimitReduction: 'Limit reduction',
diff --git a/src/translations/fr/parameters.ts b/src/translations/fr/parameters.ts
@@ -59,9 +59,11 @@ export const parametersFr = {
     General: 'Général',
     LimitReductions: 'Abattements',
     IST: 'IST',
-    LimitDurationInterval: 'Entre {highBound} et {lowBound}',
-    LimitDurationAfterIST: 'Au-delà de IT{value}',
+    LimitVoltageInterval: 'Entre IT{lowBound} et IT{highBound}',
+    LimitVoltageAfterIST: 'Entre IST et IT{highBound}',
+    LimitDurationInterval: 'Tempo {lowerBoundClosed}{lowBound}, {highBound}{higherBoundClosed}',
     voltageRange: 'Niveau de tension',
+    VoltageRangeInterval: 'Plage de tension ]{lowBound} kV,{highBound} kV]',
 
     Provider: 'Simulateur',
     LimitReduction: 'Abattement des seuils',

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,6 @@ export function SecurityAnalysisParametersSelector({`
`61`	`61`	`sx={{`
`62`	`62`	`fontSize: 17,`
`63`	`63`	`fontWeight: 'bold',`
`64`		`- textTransform: 'capitalize',`
`65`	`64`	`}}`
`66`	`65`	`/>`
`67`	`66`	`)`