@gridsuite/commons-ui 0.98.0 → 0.99.0

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

@@ -0,0 +1,263 @@
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { TabValues, getDefaultSpecificParamsValues, getSpecificLoadFlowParametersFormSchema, getCommonLoadFlowParametersFormSchema, getDialogLoadFlowParametersFormSchema, mapLimitReductions, setSpecificParameters, setLimitReductions } from "./load-flow-parameters-utils.js";
+import { ParameterType } from "../../../utils/types/parameters.type.js";
+import { PROVIDER } from "../common/constant.js";
+import "react/jsx-runtime";
+import "@mui/material";
+import "react-intl";
+import "../../../utils/types/equipmentType.js";
+import { updateParameter } from "../../../services/explore.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "@mui/icons-material";
+import { ElementType } from "../../../utils/types/elementType.js";
+import "../../treeViewFinder/TreeViewFinder.js";
+import { DESCRIPTION_INPUT, NAME } from "../../inputs/reactHookForm/DirectoryItemsInput.js";
+import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
+import "../../customAGGrid/customAggrid.js";
+import "ag-grid-community";
+import "react-papaparse";
+import "react-csv-downloader";
+import * as yup from "yup";
+import "../../inputs/reactHookForm/numbers/RangeInput.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/yupConfig.js";
+import "@react-querybuilder/material";
+import "../../filter/expert/expertFilterConstants.js";
+import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
+import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
+import "../common/widget/parameter-line-slider.js";
+import { getLimitReductionsFormSchema, LIMIT_REDUCTIONS_FORM } from "../common/limitreductions/columns-definitions.js";
+import { toFormValuesLimitReductions } from "../common/limitreductions/limit-reductions-form-util.js";
+import { PARAM_LIMIT_REDUCTION, SPECIFIC_PARAMETERS, COMMON_PARAMETERS, PARAM_PROVIDER_OPENLOADFLOW } from "./constants.js";
+const useLoadFlowParametersForm = (parametersBackend, enableDeveloperMode, parametersUuid, name, description) => {
+  const [
+    providers,
+    provider,
+    ,
+    ,
+    ,
+    params,
+    ,
+    updateParameters,
+    ,
+    specificParamsDescriptions,
+    defaultLimitReductions
+  ] = parametersBackend;
+  const [currentProvider, setCurrentProvider] = useState(params == null ? void 0 : params.provider);
+  const [selectedTab, setSelectedTab] = useState(TabValues.GENERAL);
+  const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
+  const handleTabChange = useCallback((event, newValue) => {
+    setSelectedTab(newValue);
+  }, []);
+  const specificParametersValues = useMemo(() => {
+    const specificParams = currentProvider ? specificParamsDescriptions == null ? void 0 : specificParamsDescriptions[currentProvider] : void 0;
+    return getDefaultSpecificParamsValues(specificParams);
+  }, [currentProvider, specificParamsDescriptions]);
+  const specificParameters = useMemo(() => {
+    const specificParams = currentProvider ? specificParamsDescriptions == null ? void 0 : specificParamsDescriptions[currentProvider] : void 0;
+    return specificParams == null ? void 0 : specificParams.map((param) => ({
+      name: param.name,
+      type: param.type,
+      label: param.label,
+      description: param.description,
+      possibleValues: param.possibleValues,
+      defaultValue: param.defaultValue
+    }));
+  }, [currentProvider, specificParamsDescriptions]);
+  const formSchema = useMemo(() => {
+    var _a;
+    return yup.object({
+      ...getDialogLoadFlowParametersFormSchema(name),
+      [PROVIDER]: yup.string().required(),
+      [PARAM_LIMIT_REDUCTION]: yup.number().nullable(),
+      ...getCommonLoadFlowParametersFormSchema().fields,
+      ...getLimitReductionsFormSchema(
+        (params == null ? void 0 : params.limitReductions) ? (_a = params.limitReductions[0]) == null ? void 0 : _a.temporaryLimitReductions.length : 0
+      ).fields,
+      ...getSpecificLoadFlowParametersFormSchema(specificParameters).fields
+    });
+  }, [name, params == null ? void 0 : params.limitReductions, specificParameters]);
+  const formMethods = useForm({
+    defaultValues: {
+      [NAME]: name,
+      [DESCRIPTION_INPUT]: description,
+      [PROVIDER]: provider,
+      [PARAM_LIMIT_REDUCTION]: null,
+      [COMMON_PARAMETERS]: {
+        ...params == null ? void 0 : params.commonParameters
+      },
+      [SPECIFIC_PARAMETERS]: {
+        ...specificParametersValues
+      },
+      [LIMIT_REDUCTIONS_FORM]: []
+    },
+    resolver: yupResolver(formSchema)
+  });
+  const { watch, reset } = formMethods;
+  const watchProvider = watch("provider");
+  const toLimitReductions = useCallback(
+    (formLimits) => {
+      if ((formLimits == null ? void 0 : formLimits.length) === 0) {
+        return [];
+      }
+      if (watchProvider === PARAM_PROVIDER_OPENLOADFLOW) {
+        if (!(params == null ? void 0 : params.limitReductions)) {
+          return defaultLimitReductions.map(
+            (vlLimits, indexVl) => mapLimitReductions(vlLimits, formLimits, indexVl)
+          );
+        }
+        return params == null ? void 0 : params.limitReductions.map(
+          (vlLimits, indexVl) => mapLimitReductions(vlLimits, formLimits, indexVl)
+        );
+      }
+      return [];
+    },
+    [defaultLimitReductions, params == null ? void 0 : params.limitReductions, watchProvider]
+  );
+  const getSpecificParametersPerProvider = (formData, _specificParametersValues) => {
+    return Object.keys(formData[SPECIFIC_PARAMETERS]).reduce(
+      (acc, key) => {
+        if (_specificParametersValues[key].toString() !== formData[SPECIFIC_PARAMETERS][key].toString()) {
+          acc[key] = formData[SPECIFIC_PARAMETERS][key].toString();
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const formatNewParams = useCallback(
+    (formData) => {
+      return {
+        provider: formData[PROVIDER],
+        limitReduction: formData[PARAM_LIMIT_REDUCTION],
+        commonParameters: {
+          ...formData[COMMON_PARAMETERS]
+        },
+        specificParametersPerProvider: {
+          [formData.provider]: getSpecificParametersPerProvider(formData, specificParametersValues)
+        },
+        limitReductions: toLimitReductions(formData[LIMIT_REDUCTIONS_FORM])
+      };
+    },
+    [specificParametersValues, toLimitReductions]
+  );
+  const toLoadFlowFormValues = useCallback(
+    (_params) => {
+      const specificParams = _params.provider ? specificParamsDescriptions == null ? void 0 : specificParamsDescriptions[_params.provider] : void 0;
+      const specificParamsPerProvider = _params.specificParametersPerProvider[_params.provider];
+      const formatted = specificParams == null ? void 0 : specificParams.reduce((acc, param) => {
+        if (specificParamsPerProvider && Object.prototype.hasOwnProperty.call(specificParamsPerProvider, param.name)) {
+          if (param.type === ParameterType.BOOLEAN) {
+            acc[param.name] = specificParamsPerProvider[param.name] === "true";
+          } else if (param.type === ParameterType.STRING_LIST) {
+            acc[param.name] = specificParamsPerProvider[param.name] !== "" ? specificParamsPerProvider[param.name].split(",") : [];
+          } else {
+            acc[param.name] = specificParamsPerProvider[param.name];
+          }
+        } else {
+          acc[param.name] = getDefaultSpecificParamsValues([param])[param.name];
+        }
+        return acc;
+      }, {});
+      return {
+        [PROVIDER]: _params.provider,
+        [PARAM_LIMIT_REDUCTION]: _params.limitReduction,
+        [COMMON_PARAMETERS]: {
+          ..._params.commonParameters
+        },
+        [SPECIFIC_PARAMETERS]: {
+          ...formatted
+        },
+        ...toFormValuesLimitReductions(_params.limitReductions)
+      };
+    },
+    [specificParamsDescriptions]
+  );
+  const paramsLoaded = useMemo(() => !!params && !!currentProvider, [currentProvider, params]);
+  const formattedProviders = useMemo(() => {
+    return Object.entries(providers).filter(([key]) => !key.includes("DynaFlow") || enableDeveloperMode).map(([key, value]) => ({
+      id: key,
+      label: value
+    }));
+  }, [providers, enableDeveloperMode]);
+  const onValidationError = useCallback(
+    (errors) => {
+      const tabsInError = [];
+      if ((errors == null ? void 0 : errors[LIMIT_REDUCTIONS_FORM]) && TabValues.LIMIT_REDUCTIONS !== selectedTab) {
+        tabsInError.push(TabValues.LIMIT_REDUCTIONS);
+      }
+      if (((errors == null ? void 0 : errors[SPECIFIC_PARAMETERS]) || (errors == null ? void 0 : errors[COMMON_PARAMETERS]) || (errors == null ? void 0 : 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_INPUT] ?? ""
+        );
+      }
+    },
+    [parametersUuid, formatNewParams]
+  );
+  useEffect(() => {
+    if (!params) {
+      return;
+    }
+    reset(toLoadFlowFormValues(params));
+  }, [paramsLoaded, params, reset, specificParamsDescriptions, toLoadFlowFormValues]);
+  useEffect(() => {
+    if (watchProvider !== currentProvider) {
+      setCurrentProvider(watchProvider);
+      setSpecificParameters(watchProvider, specificParamsDescriptions, formMethods);
+      setLimitReductions(watchProvider, defaultLimitReductions, formMethods);
+    }
+  }, [currentProvider, defaultLimitReductions, formMethods, specificParamsDescriptions, watchProvider]);
+  return {
+    formMethods,
+    formSchema,
+    selectedTab,
+    handleTabChange,
+    tabIndexesWithError,
+    formattedProviders,
+    specificParameters,
+    defaultLimitReductions,
+    toLoadFlowFormValues,
+    formatNewParams,
+    params,
+    currentProvider,
+    setCurrentProvider,
+    paramsLoaded,
+    onValidationError,
+    onSaveInline,
+    onSaveDialog
+  };
+};
+export {
+  useLoadFlowParametersForm
+};

package/dist/components/parameters/parameters-style.d.ts

@@ -0,0 +1,150 @@
+import { Theme } from '@mui/material';
+/**
+ * Styles use in parameter forms
+ * @deprecated to discourage its use outside of intended components
+ */
+export declare const parametersStyles: {
+    title: (theme: Theme) => {
+        padding: string;
+    };
+    minWidthMedium: (theme: Theme) => {
+        minWidth: string;
+    };
+    parameterName: (theme: Theme) => {
+        fontWeight: string;
+        marginTop: string;
+    };
+    controlItem: {
+        justifyContent: string;
+        flexGrow: number;
+    };
+    controlParametersItem: {
+        justifyContent: string;
+        flexGrow: number;
+        height: string;
+        paddingBottom: number;
+    };
+    button: (theme: Theme) => {
+        marginBottom: string;
+        marginLeft: string;
+    };
+    subgroupParameters: (theme: Theme) => {
+        marginTop: string;
+        marginBottom: string;
+    };
+    subgroupParametersAccordion: {
+        '&:before': {
+            display: string;
+        };
+        background: string;
+    };
+    subgroupParametersAccordionSummary: (theme: Theme) => {
+        flexDirection: string;
+        '& .MuiAccordionSummary-expandIconWrapper': {
+            transform: string;
+        };
+        '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+            transform: string;
+        };
+        '& .MuiAccordionSummary-content': {
+            marginLeft: string;
+        };
+    };
+    subgroupParametersAccordionDetails: (theme: Theme) => {
+        padding: string;
+    };
+    marginTopButton: {
+        marginTop: string;
+        position: string;
+        bottom: number;
+    };
+    scrollableGrid: (theme: Theme) => {
+        overflowY: string;
+        overflowX: string;
+        maxHeight: string;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
+        flexGrow: number;
+    };
+    singleItem: (theme: Theme) => {
+        display: string;
+        flex: string;
+        alignItems: string;
+        justifyContent: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    firstTextField: (theme: Theme) => {
+        marginLeft: string;
+    };
+    secondTextField: (theme: Theme) => {
+        marginLeft: string;
+        marginRight: string;
+    };
+    singleTextField: (theme: Theme) => {
+        display: string;
+        marginRight: string;
+        marginLeft: string;
+    };
+    tooltip: (theme: Theme) => {
+        marginLeft: string;
+    };
+    text: (theme: Theme) => {
+        display: string;
+        marginBottom: string;
+        marginTop: string;
+    };
+    multipleItems: (theme: Theme) => {
+        display: string;
+        flex: string;
+        alignItems: string;
+        justifyContent: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    tabWithError: (theme: Theme) => {
+        '&.Mui-selected': {
+            color: string;
+        };
+        color: string;
+    };
+    tabWithErrorIndicator: (theme: Theme) => {
+        backgroundColor: string;
+    };
+    panel: (theme: Theme) => {
+        marginTop: string;
+        marginBottom: string;
+    };
+    adjustExistingLimitsInfo: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    circularProgress: (theme: Theme) => {
+        marginRight: string;
+        color: string;
+    };
+    icon: (theme: Theme) => {
+        width: string;
+    };
+    modificationsTitle: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        margin: string;
+        padding: string;
+        backgroundColor: string;
+        color: string;
+        overflow: string;
+    };
+};
+export declare function getTabIndicatorStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: Theme) => {
+    backgroundColor: string;
+}) | undefined;
+export declare function getTabStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: Theme) => {
+    '&.Mui-selected': {
+        color: string;
+    };
+    color: string;
+}) | undefined;

package/dist/components/parameters/parameters-style.js

@@ -0,0 +1,146 @@
+const parametersStyles = {
+  title: (theme) => ({
+    padding: theme.spacing(2)
+  }),
+  minWidthMedium: (theme) => ({
+    minWidth: theme.spacing(20)
+  }),
+  parameterName: (theme) => ({
+    fontWeight: "bold",
+    marginTop: theme.spacing(1)
+  }),
+  controlItem: {
+    justifyContent: "flex-end",
+    flexGrow: 1
+  },
+  controlParametersItem: {
+    justifyContent: "flex-start",
+    flexGrow: 1,
+    height: "fit-content",
+    paddingBottom: 4
+  },
+  button: (theme) => ({
+    marginBottom: theme.spacing(2),
+    marginLeft: theme.spacing(1)
+  }),
+  subgroupParameters: (theme) => ({
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1)
+  }),
+  subgroupParametersAccordion: {
+    "&:before": {
+      display: "none"
+    },
+    background: "none"
+  },
+  subgroupParametersAccordionSummary: (theme) => ({
+    flexDirection: "row-reverse",
+    "& .MuiAccordionSummary-expandIconWrapper": {
+      transform: "rotate(-90deg)"
+    },
+    "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+      transform: "rotate(0deg)"
+    },
+    "& .MuiAccordionSummary-content": {
+      marginLeft: theme.spacing(0)
+    }
+  }),
+  subgroupParametersAccordionDetails: (theme) => ({
+    padding: theme.spacing(0)
+  }),
+  marginTopButton: {
+    marginTop: "10px",
+    position: "sticky",
+    bottom: 0
+  },
+  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),
+    flexGrow: 1
+  }),
+  singleItem: (theme) => ({
+    display: "flex",
+    flex: "auto",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }),
+  firstTextField: (theme) => ({
+    marginLeft: theme.spacing(3)
+  }),
+  secondTextField: (theme) => ({
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(2)
+  }),
+  singleTextField: (theme) => ({
+    display: "flex",
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1)
+  }),
+  tooltip: (theme) => ({
+    marginLeft: theme.spacing(1)
+  }),
+  text: (theme) => ({
+    display: "flex",
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1)
+  }),
+  multipleItems: (theme) => ({
+    display: "flex",
+    flex: "auto",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }),
+  tabWithError: (theme) => ({
+    "&.Mui-selected": { color: theme.palette.error.main },
+    color: theme.palette.error.main
+  }),
+  tabWithErrorIndicator: (theme) => ({
+    backgroundColor: theme.palette.error.main
+  }),
+  panel: (theme) => ({
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1)
+  }),
+  adjustExistingLimitsInfo: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }),
+  circularProgress: (theme) => ({
+    marginRight: theme.spacing(2),
+    color: theme.palette.primary.contrastText
+  }),
+  icon: (theme) => ({
+    width: theme.spacing(3)
+  }),
+  modificationsTitle: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    margin: theme.spacing(0),
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    overflow: "hidden"
+  })
+};
+function getTabIndicatorStyle(tabIndexesWithError, index) {
+  return tabIndexesWithError.includes(index) ? parametersStyles.tabWithErrorIndicator : void 0;
+}
+function getTabStyle(tabIndexesWithError, index) {
+  return tabIndexesWithError.includes(index) ? parametersStyles.tabWithError : void 0;
+}
+export {
+  getTabIndicatorStyle,
+  getTabStyle,
+  parametersStyles
+};

package/dist/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from './usePrevious';
 export * from './useSnackMessage';
 export * from './useFormatLabelWithUnit';
 export * from './useSelectAppearance';
+export * from './use-parameters-backend';

package/dist/hooks/index.js

@@ -10,7 +10,9 @@ import { usePrevious } from "./usePrevious.js";
 import { useSnackMessage } from "./useSnackMessage.js";
 import { useFormatLabelWithUnit } from "./useFormatLabelWithUnit.js";
 import { useSelectAppearance } from "./useSelectAppearance.js";
+import { OptionalServicesStatus, useParametersBackend } from "./use-parameters-backend.js";
 export {
+  OptionalServicesStatus,
   getComputedLanguage,
   getSystemLanguage,
   useConfidentialityWarning,
@@ -19,6 +21,7 @@ export {
   useIntlRef,
   useLocalizedCountries,
   useModificationLabelComputer,
+  useParametersBackend,
   usePredefinedProperties,
   usePrevious,
   useSelectAppearance,

package/dist/hooks/use-parameters-backend.d.ts

@@ -0,0 +1,11 @@
+import { UUID } from 'crypto';
+import { User } from 'oidc-client';
+import { ComputingType } from '../components/parameters/common/computing-type';
+import { ILimitReductionsByVoltageLevel } from '../components/parameters/common/limitreductions/columns-definitions';
+import { ParametersInfos, SpecificParametersInfos, UseParametersBackendReturnProps } from '../utils/types/parameters.type';
+export declare enum OptionalServicesStatus {
+    Up = "UP",
+    Down = "DOWN",
+    Pending = "PENDING"
+}
+export declare const useParametersBackend: <T extends ComputingType>(user: User | null, studyUuid: UUID | null, type: T, optionalServiceStatus: OptionalServicesStatus | undefined, backendFetchProviders: () => Promise<string[]>, backendFetchProvider: ((studyUuid: UUID) => Promise<string>) | null, backendFetchDefaultProvider: () => Promise<string>, backendUpdateProvider: ((studyUuid: UUID, newProvider: string) => Promise<void>) | null, backendFetchParameters: (studyUuid: UUID) => Promise<ParametersInfos<T>>, backendUpdateParameters?: (studyUuid: UUID, newParam: ParametersInfos<T> | null) => Promise<any>, backendFetchSpecificParametersDescription?: () => Promise<SpecificParametersInfos>, backendFetchDefaultLimitReductions?: () => Promise<ILimitReductionsByVoltageLevel[]>) => UseParametersBackendReturnProps<T>;