@gridsuite/commons-ui 0.249.0 → 0.251.0

package/dist/features/network-modifications/line/modification/lineModification.utils.js

@@ -0,0 +1,193 @@
+import { object, boolean, string } from "yup";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import { convertInputValue, toModificationOperation, convertOutputValue } from "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { ModificationType } from "../../../../utils/types/modificationType.js";
+import { FieldType } from "../../../../utils/types/fieldType.js";
+import "react/jsx-runtime";
+import "@mui/icons-material";
+import { sanitizeString } from "../../../../utils/ts-utils.js";
+import { getBranchConnectivityWithPositionSchema, getBranchConnectivityWithPositionEmptyFormDataProps, getConnectivityFormDataProps } from "../../common/connectivity/connectivityForm.utils.js";
+import "@mui/material";
+import "react";
+import "react-intl";
+import "../../../../components/ui/overflowableText/OverflowableText.js";
+import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "../../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "react-papaparse";
+import { modificationPropertiesSchema, getPropertiesFromModification, toModificationProperties } from "../../common/properties/propertyUtils.js";
+import { getLineCharacteristicsValidationSchemaProps, getLineCharacteristicsEmptyFormData } from "../characteristics/lineCharacteristicsPane.utils.js";
+import "react-dom";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../../../../components/composite/filter/FilterCreationDialog.js";
+import "../../../../components/composite/filter/HeaderFilterForm.js";
+import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js";
+import "../../../../components/composite/filter/expert/ExpertFilterForm.js";
+import "../../../../components/composite/filter/expert/ExpertFilterEditionDialog.js";
+import "../../../../components/composite/filter/expert/expertFilterConstants.js";
+import "react-querybuilder";
+import "uuid";
+import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
+import "../../../../components/composite/filter/utils/filterFormUtils.js";
+import "@react-querybuilder/material";
+import "../../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "../../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
+import "../../../../components/composite/agGridTable/BottomTableButtons.js";
+import "../../../../components/composite/agGridTable/CustomAgGridTable.js";
+import "ag-grid-community";
+import "../../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "mathjs";
+import "../../../../components/composite/report/report-viewer/log-table/log-table.js";
+import "react-window";
+import "../../../../components/composite/report/report-treeview/treeview-item.js";
+import "../../../../components/composite/report/report-viewer/context/report-viewer-context.js";
+import { getLimitsValidationSchemaProps, getLimitsEmptyFormDataProps, getAllLimitsFormDataProperties, formatOpLimitGroupsToFormInfos, addOperationTypeToSelectedOpLG, addModificationTypeToOpLimitsGroups, sanitizeLimitsGroups } from "../../common/currentLimits/limitsPane.utils.js";
+import { getBranchActiveReactivePowerValidationSchemaObject, getBranchActiveReactivePowerEmptyFormDataProperties, getBranchActiveReactivePowerEditDataProperties } from "../../common/measurements/branchActiveReactivePowerForm.utils.js";
+import { LineSegmentsInfoSchema, convertToLineSegmentInfos } from "../catalog/segment.utils.js";
+import "../../common/regulatingTerminal/RegulatingTerminalForm.js";
+import "@mui/material/colors";
+import "@mui/x-charts";
+import { OPERATIONAL_LIMITS_GROUPS_MODIFICATION_TYPE } from "../../common/currentLimits/operationalLimitsGroups/operationalLimitsGroups.types.js";
+const lineModificationFormSchema = object().shape({
+  [FieldConstants.EQUIPMENT_ID]: string().required(),
+  [FieldConstants.EQUIPMENT_NAME]: string().nullable(),
+  [FieldConstants.CONNECTIVITY]: getBranchConnectivityWithPositionSchema(true, true),
+  [FieldConstants.CHARACTERISTICS]: getLineCharacteristicsValidationSchemaProps(true),
+  [FieldConstants.LIMITS]: getLimitsValidationSchemaProps(true),
+  [FieldConstants.STATE_ESTIMATION]: getBranchActiveReactivePowerValidationSchemaObject(),
+  [FieldConstants.LINE_SEGMENTS]: LineSegmentsInfoSchema,
+  [FieldConstants.APPLY_SEGMENTS_LIMITS]: boolean().required()
+}).concat(modificationPropertiesSchema).required();
+const lineModificationEmptyFormData = {
+  [FieldConstants.EQUIPMENT_ID]: "",
+  [FieldConstants.EQUIPMENT_NAME]: "",
+  [FieldConstants.CONNECTIVITY]: getBranchConnectivityWithPositionEmptyFormDataProps(true),
+  [FieldConstants.CHARACTERISTICS]: getLineCharacteristicsEmptyFormData(),
+  [FieldConstants.LIMITS]: getLimitsEmptyFormDataProps(true),
+  [FieldConstants.STATE_ESTIMATION]: getBranchActiveReactivePowerEmptyFormDataProperties(),
+  [FieldConstants.LINE_SEGMENTS]: [],
+  [FieldConstants.APPLY_SEGMENTS_LIMITS]: false,
+  AdditionalProperties: []
+};
+const lineModificationDtoToForm = (lineDto, includePreviousValues = true) => {
+  return {
+    equipmentID: lineDto.equipmentId,
+    equipmentName: lineDto.equipmentName?.value ?? "",
+    ...getPropertiesFromModification(lineDto?.properties, includePreviousValues),
+    limits: getAllLimitsFormDataProperties(
+      formatOpLimitGroupsToFormInfos(lineDto.operationalLimitsGroups),
+      lineDto.selectedOperationalLimitsGroupId1?.value ?? null,
+      lineDto.selectedOperationalLimitsGroupId2?.value ?? null,
+      lineDto.enableOLGModification
+    ),
+    connectivity: {
+      connectivity1: getConnectivityFormDataProps({
+        voltageLevelId: lineDto?.voltageLevelId1?.value ?? null,
+        busbarSectionId: lineDto?.busOrBusbarSectionId1?.value ?? null,
+        connectionName: lineDto?.connectionName1?.value ?? "",
+        connectionDirection: lineDto?.connectionDirection1?.value ?? null,
+        connectionPosition: lineDto?.connectionPosition1?.value ?? null,
+        terminalConnected: lineDto?.terminal1Connected?.value ?? null,
+        isEquipmentModification: true
+      }),
+      connectivity2: getConnectivityFormDataProps({
+        voltageLevelId: lineDto?.voltageLevelId2?.value ?? null,
+        busbarSectionId: lineDto?.busOrBusbarSectionId2?.value ?? null,
+        connectionName: lineDto?.connectionName2?.value ?? "",
+        connectionDirection: lineDto?.connectionDirection2?.value ?? null,
+        connectionPosition: lineDto?.connectionPosition2?.value ?? null,
+        terminalConnected: lineDto?.terminal2Connected?.value ?? null,
+        isEquipmentModification: true
+      })
+    },
+    stateEstimation: getBranchActiveReactivePowerEditDataProperties(lineDto),
+    characteristics: {
+      r: lineDto.r?.value ?? null,
+      x: lineDto.x?.value ?? null,
+      g1: convertInputValue(FieldType.G1, lineDto.g1?.value ?? null),
+      b1: convertInputValue(FieldType.B1, lineDto.b1?.value ?? null),
+      g2: convertInputValue(FieldType.G2, lineDto.g2?.value ?? null),
+      b2: convertInputValue(FieldType.B2, lineDto.b2?.value ?? null)
+    },
+    lineSegments: lineDto.lineSegments,
+    applySegmentsLimits: lineDto.applySegmentsLimits ?? true
+  };
+};
+const lineModificationFormToDto = (line, intl) => {
+  const connectivity1 = line.connectivity?.connectivity1;
+  const connectivity2 = line.connectivity?.connectivity2;
+  const { characteristics, limits } = line;
+  return {
+    type: ModificationType.LINE_MODIFICATION,
+    equipmentId: line.equipmentID,
+    equipmentName: toModificationOperation(sanitizeString(line.equipmentName) ?? ""),
+    r: toModificationOperation(characteristics.r),
+    x: toModificationOperation(characteristics.x),
+    g1: toModificationOperation(convertOutputValue(FieldType.G1, characteristics.g1)),
+    g2: toModificationOperation(convertOutputValue(FieldType.G2, characteristics.g2)),
+    b1: toModificationOperation(convertOutputValue(FieldType.B1, characteristics.b1)),
+    b2: toModificationOperation(convertOutputValue(FieldType.B2, characteristics.b2)),
+    enableOLGModification: limits.enableOLGModification,
+    operationalLimitsGroupsModificationType: limits.enableOLGModification ? OPERATIONAL_LIMITS_GROUPS_MODIFICATION_TYPE.REPLACE : null,
+    operationalLimitsGroups: limits.enableOLGModification ? addModificationTypeToOpLimitsGroups(sanitizeLimitsGroups(limits.operationalLimitsGroups)) : [],
+    selectedOperationalLimitsGroupId1: addOperationTypeToSelectedOpLG(
+      limits.selectedOperationalLimitsGroupId1,
+      intl.formatMessage({ id: "None" })
+    ),
+    selectedOperationalLimitsGroupId2: addOperationTypeToSelectedOpLG(
+      limits.selectedOperationalLimitsGroupId2,
+      intl.formatMessage({ id: "None" })
+    ),
+    voltageLevelId1: toModificationOperation(connectivity1.voltageLevel?.id),
+    busOrBusbarSectionId1: toModificationOperation(connectivity1.busOrBusbarSection?.id),
+    connectionName1: toModificationOperation(sanitizeString(connectivity1.connectionName)),
+    connectionDirection1: toModificationOperation(connectivity1.connectionDirection),
+    connectionPosition1: toModificationOperation(connectivity1.connectionPosition),
+    terminal1Connected: toModificationOperation(connectivity1.terminalConnected),
+    voltageLevelId2: toModificationOperation(connectivity2.voltageLevel?.id),
+    busOrBusbarSectionId2: toModificationOperation(connectivity2.busOrBusbarSection?.id),
+    connectionName2: toModificationOperation(sanitizeString(connectivity2.connectionName)),
+    connectionDirection2: toModificationOperation(connectivity2.connectionDirection),
+    connectionPosition2: toModificationOperation(connectivity2.connectionPosition),
+    terminal2Connected: toModificationOperation(connectivity2.terminalConnected),
+    properties: toModificationProperties(line),
+    p1MeasurementValue: toModificationOperation(line.stateEstimation?.measurementP1?.value),
+    p1MeasurementValidity: toModificationOperation(line.stateEstimation?.measurementP1?.validity),
+    q1MeasurementValue: toModificationOperation(line.stateEstimation?.measurementQ1?.value),
+    q1MeasurementValidity: toModificationOperation(line.stateEstimation?.measurementQ1?.validity),
+    p2MeasurementValue: toModificationOperation(line.stateEstimation?.measurementP2?.value),
+    p2MeasurementValidity: toModificationOperation(line.stateEstimation?.measurementP2?.validity),
+    q2MeasurementValue: toModificationOperation(line.stateEstimation?.measurementQ2?.value),
+    q2MeasurementValidity: toModificationOperation(line.stateEstimation?.measurementQ2?.validity),
+    lineSegments: convertToLineSegmentInfos(line.lineSegments),
+    applySegmentsLimits: line.applySegmentsLimits ?? true
+  };
+};
+export {
+  lineModificationDtoToForm,
+  lineModificationEmptyFormData,
+  lineModificationFormSchema,
+  lineModificationFormToDto
+};

package/dist/features/parameters/common/hook/use-tabs.d.ts

@@ -2,6 +2,7 @@ import { SyntheticEvent } from 'react';
 import { FieldErrors } from 'react-hook-form';
 export type UseTabsReturn<TTabValue extends string> = {
     selectedTab: TTabValue;
+    setSelectedTab: (selectedTab: TTabValue) => void;
     tabsWithError: TTabValue[];
     onTabChange: (event: SyntheticEvent, newValue: TTabValue) => void;
     onError: (errors: FieldErrors) => void;
@@ -10,5 +11,6 @@ export type UseTabsProps<TTabValue extends string> = {
     defaultTab: TTabValue;
     tabEnum: Record<string, TTabValue>;
     errors: FieldErrors;
+    tabFields?: Record<TTabValue, string[]>;
 };
-export declare function useTabs<TTabValue extends string>({ defaultTab, tabEnum, errors, }: Readonly<UseTabsProps<TTabValue>>): UseTabsReturn<TTabValue>;
+export declare function useTabs<TTabValue extends string>({ defaultTab, tabEnum, errors, tabFields, }: Readonly<UseTabsProps<TTabValue>>): UseTabsReturn<TTabValue>;

package/dist/features/parameters/common/hook/use-tabs.js

@@ -1,43 +1,48 @@
 import { useState, useCallback } from "react";
+import { get } from "react-hook-form";
 import { isObjectEmpty } from "../../../../utils/functions.js";
 function useTabs({
   defaultTab,
   tabEnum,
-  errors
+  errors,
+  tabFields
 }) {
   const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [tabsWithError, setTabsWithError] = useState([]);
+  const getTabsWithError = useCallback(
+    (_errors) => {
+      const tabsHasError = [];
+      Object.values(tabEnum).forEach((tabValue) => {
+        const fields = tabFields?.[tabValue] ?? [tabValue];
+        if (fields.some((field) => get(_errors, field))) {
+          tabsHasError.push(tabValue);
+        }
+      });
+      return tabsHasError;
+    },
+    [tabEnum, tabFields]
+  );
   const onTabChange = useCallback(
     (event, newSelectedTab) => {
       setSelectedTab(newSelectedTab);
       if (!errors || isObjectEmpty(errors)) {
         return;
       }
-      const tabsHasError = [];
-      Object.values(tabEnum).forEach((tabValue) => {
-        if (errors?.[tabValue]) {
-          tabsHasError.push(tabValue);
-        }
-      });
+      const tabsHasError = getTabsWithError(errors);
       if (tabsHasError.includes(newSelectedTab)) {
         setTabsWithError(tabsHasError.filter((errorTab) => errorTab !== newSelectedTab));
       } else {
         setTabsWithError(tabsHasError);
       }
     },
-    [errors, tabEnum]
+    [errors, getTabsWithError]
   );
   const onError = useCallback(
     (_errors) => {
       if (!_errors || isObjectEmpty(_errors)) {
         return;
       }
-      const tabsHasError = [];
-      Object.values(tabEnum).forEach((tabValue) => {
-        if (_errors?.[tabValue]) {
-          tabsHasError.push(tabValue);
-        }
-      });
+      const tabsHasError = getTabsWithError(_errors);
       if (tabsHasError.includes(selectedTab)) {
         setTabsWithError(tabsHasError.filter((errorTab) => errorTab !== selectedTab));
       } else if (tabsHasError.length > 0) {
@@ -45,10 +50,11 @@ function useTabs({
         setTabsWithError(tabsHasError.filter((errorTab, index, arr) => errorTab !== arr[0]));
       }
     },
-    [selectedTab, tabEnum]
+    [getTabsWithError, selectedTab]
   );
   return {
     selectedTab,
+    setSelectedTab,
     tabsWithError,
     onTabChange,
     onError

package/dist/features/parameters/index.d.ts

@@ -15,3 +15,4 @@ export * from './sensi';
 export * from './dynamic-simulation';
 export * from './dynamic-security-analysis';
 export * from './dynamic-margin-calculation';
+export * from './parameters-style';

package/dist/features/parameters/index.js

@@ -49,6 +49,7 @@ import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION }
 import { DynamicSecurityAnalysisInline } from "./dynamic-security-analysis/dynamic-security-analysis-inline.js";
 import { ACCURACY, ACTIVE, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./dynamic-margin-calculation/constants.js";
 import { DynamicMarginCalculationInline } from "./dynamic-margin-calculation/dynamic-margin-calculation-inline.js";
+import { getTabIndicatorStyle, getTabStyle, parametersStyles } from "./parameters-style.js";
 export {
   ACCURACY,
   ACTIVE,
@@ -238,11 +239,14 @@ export {
   formatComputingTypeLabel,
   getContingencyListsInfosFormSchema,
   getLimitReductionsFormSchema,
+  getTabIndicatorStyle,
+  getTabStyle,
   intlInitialVoltageProfileMode,
   intlPredefinedParametersOptions,
   isValidComputingType,
   isValidContingencyRow,
   onlyStartedGeneratorsOptions,
+  parametersStyles,
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
   toFormValuesLimitReductions,

package/dist/features/parameters/loadflow/load-flow-parameters-utils.d.ts

@@ -4,10 +4,11 @@ import { ParameterValue } from './load-flow-parameters-type';
 import * as yup from 'yup';
 export declare enum TabValues {
     GENERAL = "General",
+    LIMIT_REDUCTIONS = "LimitReductions",
     ADVANCED = "Advanced",
-    PROVIDER_SPECIFIC = "ProviderSpecific",
-    LIMIT_REDUCTIONS = "LimitReductions"
+    PROVIDER_SPECIFIC = "ProviderSpecific"
 }
+export declare const TAB_FIELDS: Record<TabValues, string[]>;
 export declare const getBasicLoadFlowParametersFormSchema: () => yup.ObjectSchema<{
     phaseShifterRegulationOn: NonNullable<boolean | undefined>;
     dc: NonNullable<boolean | undefined>;

package/dist/features/parameters/loadflow/load-flow-parameters-utils.js

@@ -30,9 +30,9 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../common/parameter-layout/parameter-layout-provider.js";
-import { ADVANCED_PARAMETERS, COMMON_PARAMETERS } from "../common/constants.js";
+import { ADVANCED_PARAMETERS, SPECIFIC_PARAMETERS, COMMON_PARAMETERS } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
-import { IST_FORM, LIMIT_DURATION_FORM, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
+import { LIMIT_REDUCTIONS_FORM, IST_FORM, LIMIT_DURATION_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
@@ -41,11 +41,29 @@ import { DC_POWER_FACTOR, DC_USE_TRANSFORMER_RATIO, SHUNT_COMPENSATOR_VOLTAGE_CO
 import { advancedParams } from "./load-flow-advanced-parameters.js";
 var TabValues = /* @__PURE__ */ ((TabValues2) => {
   TabValues2["GENERAL"] = "General";
+  TabValues2["LIMIT_REDUCTIONS"] = "LimitReductions";
   TabValues2["ADVANCED"] = "Advanced";
   TabValues2["PROVIDER_SPECIFIC"] = "ProviderSpecific";
-  TabValues2["LIMIT_REDUCTIONS"] = "LimitReductions";
   return TabValues2;
 })(TabValues || {});
+const TAB_FIELDS = {
+  [
+    "General"
+    /* GENERAL */
+  ]: [COMMON_PARAMETERS],
+  [
+    "ProviderSpecific"
+    /* PROVIDER_SPECIFIC */
+  ]: [SPECIFIC_PARAMETERS],
+  [
+    "Advanced"
+    /* ADVANCED */
+  ]: [ADVANCED_PARAMETERS],
+  [
+    "LimitReductions"
+    /* LIMIT_REDUCTIONS */
+  ]: [LIMIT_REDUCTIONS_FORM]
+};
 const getBasicLoadFlowParametersFormSchema = () => {
   return yup.object().shape({
     [PHASE_SHIFTER_REGULATION_ON]: yup.boolean().required(),
@@ -133,6 +151,7 @@ function splitCommonParameters(commonParameters) {
   );
 }
 export {
+  TAB_FIELDS,
   TabValues,
   getAdvancedLoadFlowParametersFormSchema,
   getAdvancedLoadFlowParametersFormSchemaFields,

package/dist/features/parameters/loadflow/use-load-flow-parameters-form.js

@@ -1,8 +1,8 @@
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useState, useRef, useCallback, useMemo, useEffect, useEffectEvent } from "react";
+import { useState, useRef, useMemo, useEffect, useCallback, useEffectEvent } from "react";
 import * as yup from "yup";
-import { TabValues, getAdvancedLoadFlowParametersFormSchema, getCommonLoadFlowParametersFormSchema, splitCommonParameters, mapLimitReductions, setLimitReductions } from "./load-flow-parameters-utils.js";
+import { getAdvancedLoadFlowParametersFormSchema, getCommonLoadFlowParametersFormSchema, splitCommonParameters, mapLimitReductions, TabValues, TAB_FIELDS, setLimitReductions } from "./load-flow-parameters-utils.js";
 import "react/jsx-runtime";
 import "@mui/material";
 import "@mui/icons-material";
@@ -41,23 +41,19 @@ import "../common/widget/parameter-line-slider.js";
 import { getLimitReductionsFormSchema, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
 import { PARAM_LIMIT_REDUCTION, PARAM_PROVIDER_OPENLOADFLOW } from "./constants.js";
 import { getDefaultSpecificParamsValues, getSpecificParametersFormSchema, getAllSpecificParametersValues, formatSpecificParameters, setSpecificParameters } from "../common/utils.js";
 const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parametersUuid, name, description) => {
   const { providers, params, updateParameters, specificParamsDescription, defaultLimitReductions } = parametersBackend;
-  const [selectedTab, setSelectedTab] = useState(TabValues.GENERAL);
   const [limitReductionNumber, setLimitReductionNumber] = useState(0);
-  const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
   const [specificParametersDescriptionForProvider, setSpecificParametersDescriptionForProvider] = useState(() => {
     return params?.provider && specificParamsDescription ? specificParamsDescription[params.provider] : [];
   });
   const { snackError } = useSnackMessage();
   const previousWatchProviderRef = useRef(void 0);
-  const handleTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const specificParametersDefaultValues = useMemo(() => {
     return getDefaultSpecificParamsValues(specificParametersDescriptionForProvider);
   }, [specificParametersDescriptionForProvider]);
@@ -178,29 +174,19 @@ const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parameter
       label: value
     }));
   }, [providers, isDeveloperMode]);
-  const onValidationError = useCallback(
-    (errors) => {
-      const tabsInError = [];
-      console.log("ERRORS", errors);
-      if (errors?.[LIMIT_REDUCTIONS_FORM] && TabValues.LIMIT_REDUCTIONS !== selectedTab) {
-        tabsInError.push(TabValues.LIMIT_REDUCTIONS);
-      }
-      if (errors?.[COMMON_PARAMETERS] && TabValues.GENERAL !== selectedTab) {
-        tabsInError.push(TabValues.GENERAL);
-      }
-      if (errors?.[SPECIFIC_PARAMETERS] && TabValues.PROVIDER_SPECIFIC !== selectedTab) {
-        tabsInError.push(TabValues.PROVIDER_SPECIFIC);
-      }
-      if (errors?.[ADVANCED_PARAMETERS] && TabValues.ADVANCED !== selectedTab) {
-        tabsInError.push(TabValues.ADVANCED);
-      }
-      setTabIndexesWithError(tabsInError);
-    },
-    [selectedTab]
-  );
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: TabValues.GENERAL,
+    tabEnum: TabValues,
+    errors: formMethods.formState.errors,
+    tabFields: TAB_FIELDS
+  });
   const onSaveInline = useCallback(
     (formData) => {
-      setTabIndexesWithError([]);
       updateParameters(formatNewParams(formData));
     },
     [updateParameters, formatNewParams]
@@ -208,7 +194,6 @@ const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parameter
   const onSaveDialog = useCallback(
     (formData) => {
       if (parametersUuid) {
-        setTabIndexesWithError([]);
         updateParameter(
           parametersUuid,
           formatNewParams(formData),

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-dialog.js

@@ -62,6 +62,7 @@ function NetworkVisualizationsParametersEditionDialog({
       open,
       onClose,
       onSave: networkVisuMethods.onSaveDialog,
+      onValidationError: networkVisuMethods.onValidationError,
       formContext: {
         ...networkVisuMethods.formMethods,
         validationSchema: networkVisuMethods.formSchema,

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-inline.js

@@ -91,7 +91,7 @@ function NetworkVisualizationParametersInline({
             parameterFormatter: (newParams) => newParams
           },
           selectParameterHandler: handleLoadParameters,
-          validateHandler: handleSubmit(networkVisuMethods.onSaveInline),
+          validateHandler: handleSubmit(networkVisuMethods.onSaveInline, networkVisuMethods.onValidationError),
           children: /* @__PURE__ */ jsx(NetworkVisualizationParametersForm, { userProfile, networkVisuMethods })
         }
       )

package/dist/features/parameters/network-visualizations/use-network-visualizations-parameters-form.d.ts

@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
 import { SyntheticEvent } from 'react';
 import { UUID } from 'node:crypto';
 import { NetworkVisualizationTabValues as TabValues } from './constants';
@@ -12,6 +12,8 @@ export interface UseNetworkVisualizationParametersFormReturn {
     paramsLoading: boolean;
     onSaveInline: (formData: Record<string, any>) => void;
     onSaveDialog: (formData: Record<string, any>) => void;
+    tabIndexesWithError: TabValues[];
+    onValidationError: (errors: FieldErrors) => void;
 }
 type UseNetworkVisualizationParametersFormProps = {
     parametersUuid: UUID;

package/dist/features/parameters/network-visualizations/use-network-visualizations-parameters-form.js

@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import * as yup from "yup";
 import "react/jsx-runtime";
 import "@mui/material";
@@ -39,6 +39,11 @@ import "react-papaparse";
 import { NetworkVisualizationTabValues, PARAM_NAD_POSITIONS_GENERATION_MODE, PARAM_STATE_ESTIMATION, PARAM_COMPONENT_LIBRARY, PARAM_SUBSTATION_LAYOUT, PARAM_CENTER_LABEL, PARAM_DIAGONAL_LABEL, PARAM_MAP_BASEMAP, PARAM_MAP_MANUAL_REFRESH, PARAM_LINE_FLOW_MODE, PARAM_LINE_PARALLEL_PATH, PARAM_LINE_FULL_PATH } from "./constants.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import "../common/widget/parameter-line-slider.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
 const useNetworkVisualizationParametersForm = ({
   parametersUuid,
   name,
@@ -46,12 +51,8 @@ const useNetworkVisualizationParametersForm = ({
   studyUuid,
   parameters
 }) => {
-  const [selectedTab, setSelectedTab] = useState(NetworkVisualizationTabValues.MAP);
   const [paramsLoading, setParamsLoading] = useState(false);
   const { snackError } = useSnackMessage();
-  const handleTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const formSchema = useMemo(() => {
     return yup.object({
       [NetworkVisualizationTabValues.MAP]: yup.object().shape({
@@ -97,6 +98,16 @@ const useNetworkVisualizationParametersForm = ({
     resolver: yupResolver(formSchema)
   });
   const { reset } = formMethods;
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: NetworkVisualizationTabValues.MAP,
+    tabEnum: NetworkVisualizationTabValues,
+    errors: formMethods.formState.errors
+  });
   const onSaveInline = useCallback(
     (formData) => {
       if (studyUuid) {
@@ -150,7 +161,9 @@ const useNetworkVisualizationParametersForm = ({
     handleTabChange,
     paramsLoading,
     onSaveInline,
-    onSaveDialog
+    onSaveDialog,
+    tabIndexesWithError,
+    onValidationError
   };
 };
 export {

package/dist/features/parameters/security-analysis/constants.d.ts

@@ -10,7 +10,7 @@ export declare const LOW_VOLTAGE_ABSOLUTE_THRESHOLD = "lowVoltageAbsoluteThresho
 export declare const HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD = "highVoltageProportionalThreshold";
 export declare const HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = "highVoltageAbsoluteThreshold";
 export declare enum TabValues {
-    Contingencies = 0,
-    Aggravation = 1,
-    LimitReductions = 2
+    Contingencies = "Contingencies",
+    Aggravation = "Aggravation",
+    LimitReductions = "LimitReductions"
 }

package/dist/features/parameters/security-analysis/constants.js

@@ -4,9 +4,9 @@ const LOW_VOLTAGE_ABSOLUTE_THRESHOLD = "lowVoltageAbsoluteThreshold";
 const HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD = "highVoltageProportionalThreshold";
 const HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = "highVoltageAbsoluteThreshold";
 var TabValues = /* @__PURE__ */ ((TabValues2) => {
-  TabValues2[TabValues2["Contingencies"] = 0] = "Contingencies";
-  TabValues2[TabValues2["Aggravation"] = 1] = "Aggravation";
-  TabValues2[TabValues2["LimitReductions"] = 2] = "LimitReductions";
+  TabValues2["Contingencies"] = "Contingencies";
+  TabValues2["Aggravation"] = "Aggravation";
+  TabValues2["LimitReductions"] = "LimitReductions";
   return TabValues2;
 })(TabValues || {});
 export {

package/dist/features/parameters/security-analysis/security-analysis-parameters-content.d.ts

@@ -1,12 +1,10 @@
 import { ForwardedRef } from 'react';
 import { UUID } from 'node:crypto';
-import { ILimitReductionsByVoltageLevel, ContingencyTableApi } from '../common';
+import { ContingencyTableApi } from '../common';
 import { ContingencyCount } from '../common/contingency-table/types';
-import { SAParametersEnriched } from '../../../utils/types';
-export declare function SecurityAnalysisParametersContent({ params, currentProvider, defaultLimitReductions, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, }: Readonly<{
-    params: SAParametersEnriched | null;
-    currentProvider?: string;
-    defaultLimitReductions: ILimitReductionsByVoltageLevel[];
+import { UseSecurityAnalysisParametersFormReturn } from './use-security-analysis-parameters-form';
+export declare function SecurityAnalysisParametersContent({ securityAnalysisMethods, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, }: Readonly<{
+    securityAnalysisMethods: UseSecurityAnalysisParametersFormReturn;
     showContingencyCount: boolean;
     fetchContingencyCount?: (contingencyListIds: UUID[] | null, abortSignal: AbortSignal) => Promise<ContingencyCount>;
     contingencyTableApiRef?: ForwardedRef<ContingencyTableApi>;