@gridsuite/commons-ui 0.214.0 → 0.215.0

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

@@ -0,0 +1,108 @@
+import { COMMON_PARAMETERS } from "../common/constants.js";
+import "react/jsx-runtime";
+import "@mui/material";
+import "react-intl";
+import "react";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "react-hook-form";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import * as yup from "yup";
+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/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "../common/widget/parameter-line-slider.js";
+import { LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions, IST_FORM, LIMIT_DURATION_FORM } from "../common/limitreductions/columns-definitions.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+import { HVDC_AC_EMULATION, CONNECTED_MODE, COUNTRIES_TO_BALANCE, BALANCE_TYPE, DC, PHASE_SHIFTER_REGULATION_ON, DC_POWER_FACTOR, DC_USE_TRANSFORMER_RATIO, SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON, DISTRIBUTED_SLACK, WRITE_SLACK_BUS, READ_SLACK_BUS, TWT_SPLIT_SHUNT_ADMITTANCE, USE_REACTIVE_LIMITS, VOLTAGE_INIT_MODE, PARAM_PROVIDER_OPENLOADFLOW, PARAM_LIMIT_REDUCTION, DEFAULT_LIMIT_REDUCTION_VALUE } from "./constants.js";
+var TabValues = /* @__PURE__ */ ((TabValues2) => {
+  TabValues2["GENERAL"] = "General";
+  TabValues2["LIMIT_REDUCTIONS"] = "LimitReductions";
+  return TabValues2;
+})(TabValues || {});
+const getBasicLoadFlowParametersFormSchema = () => {
+  return yup.object().shape({
+    [PHASE_SHIFTER_REGULATION_ON]: yup.boolean().required(),
+    [DC]: yup.boolean().required(),
+    [BALANCE_TYPE]: yup.string().required(),
+    [COUNTRIES_TO_BALANCE]: yup.array().of(yup.string()).required(),
+    [CONNECTED_MODE]: yup.string().required(),
+    [HVDC_AC_EMULATION]: yup.boolean().required()
+  });
+};
+const getAdvancedLoadFlowParametersFormSchema = () => {
+  return yup.object().shape({
+    [VOLTAGE_INIT_MODE]: yup.string().required(),
+    [USE_REACTIVE_LIMITS]: yup.boolean().required(),
+    [TWT_SPLIT_SHUNT_ADMITTANCE]: yup.boolean().required(),
+    [READ_SLACK_BUS]: yup.boolean().required(),
+    [WRITE_SLACK_BUS]: yup.boolean().required(),
+    [DISTRIBUTED_SLACK]: yup.boolean().required(),
+    [SHUNT_COMPENSATOR_VOLTAGE_CONTROL_ON]: yup.boolean().required(),
+    [DC_USE_TRANSFORMER_RATIO]: yup.boolean().required(),
+    [DC_POWER_FACTOR]: yup.number().required().positive("dcPowerFactorGreaterThan0").max(1, "dcPowerFactorLessOrEqualThan1")
+  });
+};
+const getCommonLoadFlowParametersFormSchema = () => {
+  return yup.object().shape({
+    [COMMON_PARAMETERS]: yup.object().shape({
+      ...getBasicLoadFlowParametersFormSchema().fields,
+      ...getAdvancedLoadFlowParametersFormSchema().fields
+    })
+  });
+};
+const setLimitReductions = (provider, defaultLimitReductions, formMethods) => {
+  if (provider === PARAM_PROVIDER_OPENLOADFLOW) {
+    formMethods.setValue(
+      LIMIT_REDUCTIONS_FORM,
+      toFormValuesLimitReductions(defaultLimitReductions)[LIMIT_REDUCTIONS_FORM]
+    );
+    formMethods.setValue(PARAM_LIMIT_REDUCTION, null);
+  } else {
+    formMethods.setValue(PARAM_LIMIT_REDUCTION, DEFAULT_LIMIT_REDUCTION_VALUE);
+    formMethods.setValue(LIMIT_REDUCTIONS_FORM, []);
+    formMethods.clearErrors(LIMIT_REDUCTIONS_FORM);
+  }
+};
+const mapLimitReductions = (vlLimits, formLimits, indexVl) => {
+  const vlLNewLimits = {
+    ...vlLimits,
+    permanentLimitReduction: formLimits[indexVl][IST_FORM]
+  };
+  vlLimits.temporaryLimitReductions.forEach((temporaryLimit, index) => {
+    vlLNewLimits.temporaryLimitReductions[index] = {
+      ...temporaryLimit,
+      reduction: formLimits[indexVl][LIMIT_DURATION_FORM + index]
+    };
+  });
+  return vlLNewLimits;
+};
+export {
+  TabValues,
+  getAdvancedLoadFlowParametersFormSchema,
+  getBasicLoadFlowParametersFormSchema,
+  getCommonLoadFlowParametersFormSchema,
+  mapLimitReductions,
+  setLimitReductions
+};

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

@@ -0,0 +1,251 @@
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useState, useRef, useCallback, useMemo, useEffect, useEffectEvent } from "react";
+import { TabValues, getCommonLoadFlowParametersFormSchema, mapLimitReductions, setLimitReductions } from "./load-flow-parameters-utils.js";
+import { PROVIDER, SPECIFIC_PARAMETERS, COMMON_PARAMETERS, VERSION_PARAMETER } from "../common/constants.js";
+import "react/jsx-runtime";
+import "@mui/material";
+import "react-intl";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import { ElementType } from "../../../utils/types/elementType.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../../utils/yupConfig.js";
+import { updateParameter } from "../../../services/explore.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import * as yup from "yup";
+import { DESCRIPTION, NAME } from "../../../components/ui/reactHookForm/constants.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/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+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 "../../../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]);
+  const formSchema = useMemo(() => {
+    return yup.object({
+      [PROVIDER]: yup.string().required(),
+      [PARAM_LIMIT_REDUCTION]: yup.number().nullable(),
+      ...getCommonLoadFlowParametersFormSchema().fields,
+      ...getLimitReductionsFormSchema(limitReductionNumber).fields,
+      ...getSpecificParametersFormSchema(specificParametersDescriptionForProvider).fields
+    }).concat(getNameElementEditorSchema(name));
+  }, [name, limitReductionNumber, specificParametersDescriptionForProvider]);
+  const formMethods = useForm({
+    defaultValues: {
+      ...getNameElementEditorEmptyFormData(name, description),
+      [PROVIDER]: params?.provider,
+      [PARAM_LIMIT_REDUCTION]: null,
+      [COMMON_PARAMETERS]: {
+        ...params?.commonParameters
+      },
+      [SPECIFIC_PARAMETERS]: {
+        ...specificParametersDefaultValues
+      },
+      [LIMIT_REDUCTIONS_FORM]: []
+    },
+    resolver: yupResolver(formSchema)
+  });
+  const { watch, reset } = formMethods;
+  const watchProvider = watch(PROVIDER);
+  useEffect(() => {
+    const provider = watchProvider ?? params?.provider;
+    if (!provider || !specificParamsDescription) {
+      setSpecificParametersDescriptionForProvider([]);
+      return;
+    }
+    setSpecificParametersDescriptionForProvider(specificParamsDescription[provider] ?? []);
+  }, [watchProvider, params?.provider, specificParamsDescription]);
+  const toLimitReductions = useCallback(
+    (formLimits) => {
+      if (formLimits?.length === 0) {
+        return [];
+      }
+      if (watchProvider === PARAM_PROVIDER_OPENLOADFLOW) {
+        if (!params?.limitReductions) {
+          return defaultLimitReductions.map(
+            (vlLimits, indexVl) => mapLimitReductions(vlLimits, formLimits, indexVl)
+          );
+        }
+        return params?.limitReductions.map(
+          (vlLimits, indexVl) => mapLimitReductions(vlLimits, formLimits, indexVl)
+        );
+      }
+      return [];
+    },
+    [defaultLimitReductions, params?.limitReductions, watchProvider]
+  );
+  const formatNewParams = useCallback(
+    (formData) => {
+      return {
+        provider: formData[PROVIDER],
+        limitReduction: formData[PARAM_LIMIT_REDUCTION],
+        commonParameters: {
+          [VERSION_PARAMETER]: formData[COMMON_PARAMETERS][VERSION_PARAMETER],
+          // PowSyBl requires that "version" appears first
+          ...formData[COMMON_PARAMETERS]
+        },
+        specificParametersPerProvider: specificParametersDefaultValues ? {
+          [formData.provider]: getAllSpecificParametersValues(
+            formData,
+            specificParametersDefaultValues
+          )
+        } : {},
+        limitReductions: toLimitReductions(formData[LIMIT_REDUCTIONS_FORM])
+      };
+    },
+    [specificParametersDefaultValues, toLimitReductions]
+  );
+  const toLoadFlowFormValues = useCallback(
+    (_params) => {
+      const specificParamsListForCurrentProvider = _params.specificParametersPerProvider[_params.provider];
+      const specificParametersForLoadedProvider = specificParamsDescription?.[_params.provider] ?? [];
+      return {
+        [PROVIDER]: _params.provider,
+        [PARAM_LIMIT_REDUCTION]: _params.limitReduction,
+        [COMMON_PARAMETERS]: {
+          ..._params.commonParameters
+        },
+        [SPECIFIC_PARAMETERS]: {
+          ...formatSpecificParameters(
+            specificParametersForLoadedProvider,
+            specificParamsListForCurrentProvider
+          )
+        },
+        ...toFormValuesLimitReductions(_params.limitReductions)
+      };
+    },
+    [specificParamsDescription]
+  );
+  const paramsLoaded = useMemo(() => !!params && !!watchProvider, [watchProvider, params]);
+  const formattedProviders = useMemo(() => {
+    return Object.entries(providers).filter(([key]) => !key.includes("DynaFlow") || isDeveloperMode).map(([key, value]) => ({
+      id: key,
+      label: value
+    }));
+  }, [providers, isDeveloperMode]);
+  const onValidationError = useCallback(
+    (errors) => {
+      const tabsInError = [];
+      if (errors?.[LIMIT_REDUCTIONS_FORM] && TabValues.LIMIT_REDUCTIONS !== selectedTab) {
+        tabsInError.push(TabValues.LIMIT_REDUCTIONS);
+      }
+      if ((errors?.[SPECIFIC_PARAMETERS] || errors?.[COMMON_PARAMETERS] || errors?.[PROVIDER]) && TabValues.GENERAL !== selectedTab) {
+        tabsInError.push(TabValues.GENERAL);
+      }
+      setTabIndexesWithError(tabsInError);
+    },
+    [selectedTab]
+  );
+  const onSaveInline = useCallback(
+    (formData) => {
+      setTabIndexesWithError([]);
+      updateParameters(formatNewParams(formData));
+    },
+    [updateParameters, formatNewParams]
+  );
+  const onSaveDialog = useCallback(
+    (formData) => {
+      if (parametersUuid) {
+        setTabIndexesWithError([]);
+        updateParameter(
+          parametersUuid,
+          formatNewParams(formData),
+          formData[NAME],
+          ElementType.LOADFLOW_PARAMETERS,
+          formData[DESCRIPTION] ?? ""
+        ).catch((error) => {
+          snackWithFallback(snackError, error, { headerId: "updateLoadFlowParametersError" });
+        });
+      }
+    },
+    [parametersUuid, formatNewParams, snackError]
+  );
+  const resetForm = useEffectEvent((_params) => {
+    previousWatchProviderRef.current = _params.provider;
+    setSpecificParametersDescriptionForProvider(specificParamsDescription?.[_params.provider] ?? []);
+    if (_params.provider === PARAM_PROVIDER_OPENLOADFLOW) {
+      setLimitReductionNumber(_params.limitReductions?.at(0)?.temporaryLimitReductions?.length ?? 0);
+    } else {
+      setLimitReductionNumber(0);
+    }
+    reset(toLoadFlowFormValues(_params));
+  });
+  useEffect(() => {
+    if (!params) {
+      return;
+    }
+    resetForm(params);
+  }, [paramsLoaded, params, specificParamsDescription]);
+  useEffect(() => {
+    if (!watchProvider || watchProvider === previousWatchProviderRef.current) {
+      return;
+    }
+    setSpecificParameters(watchProvider, specificParamsDescription, formMethods);
+    setLimitReductions(watchProvider, defaultLimitReductions, formMethods);
+    if (watchProvider === PARAM_PROVIDER_OPENLOADFLOW) {
+      setLimitReductionNumber(defaultLimitReductions?.at(0)?.temporaryLimitReductions?.length ?? 0);
+    } else {
+      setLimitReductionNumber(0);
+    }
+    previousWatchProviderRef.current = watchProvider;
+  }, [defaultLimitReductions, formMethods, specificParamsDescription, watchProvider]);
+  return {
+    formMethods,
+    formSchema,
+    selectedTab,
+    handleTabChange,
+    tabIndexesWithError,
+    formattedProviders,
+    specificParametersDescriptionForProvider,
+    defaultLimitReductions,
+    toLoadFlowFormValues,
+    formatNewParams,
+    params,
+    watchProvider,
+    paramsLoaded,
+    onValidationError,
+    onSaveInline,
+    onSaveDialog
+  };
+};
+export {
+  useLoadFlowParametersForm
+};

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

@@ -0,0 +1,113 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Grid } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { useState, useEffect } from "react";
+import { MAP_BASE_MAP, NetworkVisualizationTabValues, PARAM_MAP_BASEMAP, PARAM_LINE_FULL_PATH, PARAM_LINE_PARALLEL_PATH, INTL_LINE_FLOW_MODE_OPTIONS, LINE_FLOW_MODE, PARAM_LINE_FLOW_MODE, MAP_MANUAL_REFRESH, PARAM_MAP_MANUAL_REFRESH } from "./constants.js";
+import { LineSeparator } from "../common/line-separator.js";
+import { parametersStyles } from "../parameters-style.js";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../../utils/yupConfig.js";
+import { fetchStudyMetadata } from "../../../services/appsMetadata.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import "react-hook-form";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "yup";
+import { SwitchInput } from "../../../components/ui/reactHookForm/booleans/SwitchInput.js";
+import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.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/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "../common/widget/parameter-line-slider.js";
+import "../common/limitreductions/columns-definitions.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+const fetchMapBaseOption = async () => {
+  const studyMetadata = await fetchStudyMetadata();
+  return studyMetadata.baseMapOptions;
+};
+function MapParameters() {
+  const [baseMapOptions, setBaseMapOptions] = useState([]);
+  const { snackError } = useSnackMessage();
+  useEffect(() => {
+    fetchMapBaseOption().then((p) => {
+      if (p !== void 0) {
+        setBaseMapOptions(p);
+      }
+    }).catch((error) => {
+      snackWithFallback(snackError, error);
+    });
+  }, [setBaseMapOptions, snackError]);
+  const lineSwitch = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.MAP}.${name}` }) })
+  ] });
+  const lineFlow = (name, label, options) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+      MuiSelectInput,
+      {
+        fullWidth: true,
+        name: `${NetworkVisualizationTabValues.MAP}.${name}`,
+        size: "small",
+        options: Object.values(options)?.map((option) => option)
+      }
+    ) })
+  ] });
+  const mapBaseMap = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: MAP_BASE_MAP }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+      MuiSelectInput,
+      {
+        fullWidth: true,
+        name: `${NetworkVisualizationTabValues.MAP}.${PARAM_MAP_BASEMAP}`,
+        size: "small",
+        options: Object.values(baseMapOptions)?.map((option) => option)
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      spacing: 1,
+      sx: parametersStyles.scrollableGrid,
+      marginTop: -3,
+      justifyContent: "space-between",
+      children: [
+        lineSwitch(PARAM_LINE_FULL_PATH, PARAM_LINE_FULL_PATH),
+        /* @__PURE__ */ jsx(LineSeparator, {}),
+        lineSwitch(PARAM_LINE_PARALLEL_PATH, PARAM_LINE_PARALLEL_PATH),
+        /* @__PURE__ */ jsx(LineSeparator, {}),
+        lineFlow(PARAM_LINE_FLOW_MODE, LINE_FLOW_MODE, INTL_LINE_FLOW_MODE_OPTIONS),
+        /* @__PURE__ */ jsx(LineSeparator, {}),
+        lineSwitch(PARAM_MAP_MANUAL_REFRESH, MAP_MANUAL_REFRESH),
+        /* @__PURE__ */ jsx(LineSeparator, {}),
+        mapBaseMap
+      ]
+    },
+    "mapParameters"
+  );
+}
+export {
+  MapParameters
+};

package/dist/features/parameters/network-visualizations/network-area-diagram-parameters.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { NAD_POSITIONS_GENERATION_MODE_LABEL, NetworkVisualizationTabValues, PARAM_NAD_POSITIONS_GENERATION_MODE, NAD_POSITIONS_GENERATION_MODE } from "./constants.js";
+import { parametersStyles } from "../parameters-style.js";
+import "@mui/icons-material";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "../../../utils/yupConfig.js";
+import "react";
+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 "yup";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.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 "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+function NetworkAreaDiagramParameters() {
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      spacing: 1,
+      sx: parametersStyles.scrollableGrid,
+      marginTop: -3,
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: NAD_POSITIONS_GENERATION_MODE_LABEL }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+          MuiSelectInput,
+          {
+            fullWidth: true,
+            name: `${NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM}.${PARAM_NAD_POSITIONS_GENERATION_MODE}`,
+            size: "small",
+            options: Object.values(NAD_POSITIONS_GENERATION_MODE)?.map((option) => option)
+          }
+        ) })
+      ]
+    },
+    "networkAreaDiagramParameters"
+  );
+}
+export {
+  NetworkAreaDiagramParameters
+};

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

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid, LinearProgress, Tabs, Tab } from "@mui/material";
+import { useState, useEffect } from "react";
+import { FormattedMessage } from "react-intl";
+import "@mui/icons-material";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "../../../utils/yupConfig.js";
+import "react-hook-form";
+import { getAvailableComponentLibraries } from "../../../services/study.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+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 "@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 { NetworkVisualizationTabValues } from "./constants.js";
+import { MapParameters } from "./map-parameters.js";
+import { SingleLineDiagramParameters } from "./single-line-diagram-parameters.js";
+import { NetworkAreaDiagramParameters } from "./network-area-diagram-parameters.js";
+import { TabPanel } from "../common/parameters.js";
+import "../common/widget/parameter-line-slider.js";
+import "../common/limitreductions/columns-definitions.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+const useGetAvailableComponentLibraries = (user) => {
+  const [componentLibraries, setComponentLibraries] = useState([]);
+  useEffect(() => {
+    if (user !== null) {
+      getAvailableComponentLibraries().then((libraries) => {
+        if (libraries != null) {
+          setComponentLibraries(libraries);
+        }
+      });
+    }
+  }, [user]);
+  return componentLibraries;
+};
+function NetworkVisualizationParametersForm({
+  networkVisuMethods,
+  renderTitleFields,
+  renderActions,
+  user
+}) {
+  const componentLibraries = useGetAvailableComponentLibraries(user);
+  const { formMethods, formSchema, selectedTab, handleTabChange, paramsLoading } = networkVisuMethods;
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
+    paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", children: [
+      /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: handleTabChange, children: [
+        /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "Map" }), value: NetworkVisualizationTabValues.MAP }),
+        /* @__PURE__ */ jsx(
+          Tab,
+          {
+            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "SingleLineDiagram" }),
+            value: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tab,
+          {
+            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "NetworkAreaDiagram" }),
+            value: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.MAP, children: /* @__PURE__ */ jsx(MapParameters, {}) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM, children: /* @__PURE__ */ jsx(SingleLineDiagramParameters, { componentLibraries }) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM, children: /* @__PURE__ */ jsx(NetworkAreaDiagramParameters, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Grid,
+      {
+        item: true,
+        container: true,
+        direction: "column",
+        sx: {
+          position: "absolute",
+          bottom: "30px"
+        },
+        children: renderActions?.()
+      }
+    )
+  ] }) });
+}
+export {
+  NetworkVisualizationParametersForm
+};