@gridsuite/commons-ui 0.191.0 → 0.193.0

package/dist/components/parameters/dynamic-simulation/curve/curve-parameters.js

@@ -0,0 +1,177 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTheme, Grid, Typography, Box } from "@mui/material";
+import { useState, useRef, useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { useFormContext, useFieldArray } from "react-hook-form";
+import CurveSelectorDialog from "./dialog/curve-selector-dialog.js";
+import { GridButtons } from "./common/grid-buttons.js";
+import { AGGRID_LOCALES } from "../../../../translations/not-intl/aggrid-locales.js";
+import { GridSearch } from "./common/grid-search.js";
+import { Curve } from "./curve-parameters-constants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { isEmpty } from "../../../../utils/functions.js";
+import "@mui/icons-material";
+import "../../../../utils/yupConfig.js";
+import { fetchDynamicSimulationModels } from "../../../../services/dynamic-mapping.js";
+import { CustomAGGrid } from "../../../customAGGrid/customAggrid.js";
+const styles = {
+  grid: {
+    width: "auto",
+    height: "100%"
+  }
+};
+function CurveParameters({
+  path,
+  mappingPath,
+  voltageLevelsFetcher,
+  countriesFetcher,
+  evaluateFilterFetcher
+}) {
+  const intl = useIntl();
+  const [selectedRowsLength, setSelectedRowsLength] = useState(0);
+  const { control, getValues } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `${path}.${Curve.CURVES}`
+  });
+  const rowData = fields;
+  const gridRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const handleClose = useCallback(() => {
+    setOpen((prevState) => !prevState);
+  }, []);
+  const handleAppend = useCallback(
+    (newCurves) => {
+      const notYetAddedCurves = newCurves.filter(
+        // use functional keys to lookup
+        (curve) => !rowData.some(
+          (elem) => elem[Curve.EQUIPMENT_ID] === curve[Curve.EQUIPMENT_ID] && elem[Curve.VARIABLE_ID] === curve[Curve.VARIABLE_ID]
+        )
+      );
+      append(notYetAddedCurves);
+      setOpen((prevState) => !prevState);
+    },
+    [append, rowData]
+  );
+  const handleAdd = useCallback(() => {
+    setOpen((prevState) => !prevState);
+  }, []);
+  const handleDelete = useCallback(() => {
+    const selectedRows = gridRef.current?.api.getSelectedRows();
+    const indexesToRemove = selectedRows?.map(
+      (elem) => (
+        // use functional keys to lookup
+        rowData.findIndex(
+          (row) => elem[Curve.EQUIPMENT_ID] === row[Curve.EQUIPMENT_ID] && elem[Curve.VARIABLE_ID] === row[Curve.VARIABLE_ID]
+        )
+      )
+    );
+    remove(indexesToRemove);
+    setSelectedRowsLength(0);
+  }, [remove, rowData]);
+  const quickFilterRef = useRef(null);
+  const theme = useTheme();
+  const columnDefs = useMemo(() => {
+    return [
+      {
+        field: Curve.EQUIPMENT_ID,
+        checkboxSelection: true,
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionFilteredOnly: true,
+        minWidth: 80,
+        headerName: intl.formatMessage({
+          id: "DynamicSimulationCurveDynamicModelHeader"
+        })
+      },
+      {
+        field: Curve.VARIABLE_ID,
+        minWidth: 80,
+        headerName: intl.formatMessage({
+          id: "DynamicSimulationCurveVariableHeader"
+        }),
+        valueFormatter: (params) => intl.formatMessage({
+          id: `variables.${params.value}`
+        })
+      }
+    ];
+  }, [intl]);
+  const defaultColDef = useMemo(() => {
+    return {
+      flex: 1,
+      minWidth: 100,
+      filter: true,
+      sortable: true,
+      resizable: true,
+      lockPinned: true,
+      wrapHeaderText: true,
+      autoHeaderHeight: true
+    };
+  }, []);
+  const onSelectionChanged = useCallback(() => {
+    const selectedRows = gridRef.current?.api.getSelectedRows();
+    setSelectedRowsLength(selectedRows?.length ?? 0);
+  }, []);
+  const modelsFetcher = useCallback(() => {
+    const mapping = getValues(mappingPath);
+    return isEmpty(mapping) ? void 0 : fetchDynamicSimulationModels(mapping);
+  }, [getValues, mappingPath]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", sx: { height: 600 }, children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, item: true, sx: { marginBottom: theme.spacing(1) }, children: [
+        /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: "auto", children: /* @__PURE__ */ jsx(GridSearch, { ref: quickFilterRef, gridRef }, "curve-quick-filter") }),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            container: true,
+            item: true,
+            xs: "auto",
+            sx: {
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+              paddingLeft: theme.spacing(1)
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: `${intl.formatMessage({
+              id: "DynamicSimulationCurveSelectedNumber"
+            })} (${selectedRowsLength} / ${rowData.length})` })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GridButtons,
+          {
+            onAddButton: handleAdd,
+            onDeleteButton: handleDelete,
+            disabledDelete: !selectedRowsLength
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+        CustomAGGrid,
+        {
+          ref: gridRef,
+          rowData,
+          columnDefs,
+          defaultColDef,
+          rowSelection: "multiple",
+          onSelectionChanged,
+          overrideLocales: AGGRID_LOCALES
+        }
+      ) }) })
+    ] }),
+    open && /* @__PURE__ */ jsx(
+      CurveSelectorDialog,
+      {
+        open,
+        onClose: handleClose,
+        onSave: handleAppend,
+        voltageLevelsFetcher,
+        countriesFetcher,
+        evaluateFilterFetcher,
+        modelsFetcher
+      }
+    )
+  ] });
+}
+export {
+  CurveParameters as default
+};

package/dist/components/parameters/dynamic-simulation/curve/curve-parameters.type.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2023, 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/.
+ */

package/dist/components/parameters/dynamic-simulation/curve/curve-parameters.type.js

@@ -0,0 +1 @@
+

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-preview.d.ts

@@ -0,0 +1,8 @@
+import { Curve } from '../common/curve.type';
+export type CurvePreviewApi = {
+    addCurves: (curves: Curve[]) => void;
+    removeCurves: () => void;
+    getCurves: () => Curve[];
+};
+declare const CurvePreview: import('react').ForwardRefExoticComponent<import('react').RefAttributes<CurvePreviewApi>>;
+export default CurvePreview;

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-preview.js

@@ -0,0 +1,123 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Grid, Typography, Box } from "@mui/material";
+import { AGGRID_LOCALES } from "../../../../../translations/not-intl/aggrid-locales.js";
+import { CustomAGGrid } from "../../../../customAGGrid/customAggrid.js";
+import "../../../../../utils/conversionUtils.js";
+import "../../../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../../../../utils/yupConfig.js";
+const styles = {
+  grid: {
+    width: "auto",
+    height: "100%"
+  },
+  h6: (theme) => ({
+    marginBottom: theme.spacing(2)
+  })
+};
+function isSameCurve(curve1, curve2) {
+  return curve1.equipmentType === curve2.equipmentType && curve1.equipmentId === curve2.equipmentId && curve1.variableId === curve2.variableId;
+}
+function isCurveAlreadyAdded(curves, curve) {
+  return curves.some((elem) => isSameCurve(elem, curve));
+}
+function isRowSelected(elem, selectedRows) {
+  return selectedRows.some((selectedElem) => isSameCurve(elem, selectedElem));
+}
+const CurvePreview = forwardRef((props, ref) => {
+  const intl = useIntl();
+  const gridRef = useRef(null);
+  const [rowData, setRowData] = useState([]);
+  const [selectedRowsLength, setSelectedRowsLength] = useState(0);
+  const columnDefs = useMemo(() => {
+    return [
+      {
+        field: "equipmentId",
+        minWidth: 80,
+        headerName: intl.formatMessage({
+          id: "DynamicSimulationCurveDynamicModelHeader"
+        })
+      },
+      {
+        field: "variableId",
+        minWidth: 80,
+        headerName: intl.formatMessage({
+          id: "DynamicSimulationCurveVariableHeader"
+        }),
+        valueFormatter: (params) => intl.formatMessage({
+          id: `variables.${params.value}`
+        })
+      }
+    ];
+  }, [intl]);
+  const defaultColDef = useMemo(() => {
+    return {
+      flex: 1,
+      minWidth: 100,
+      filter: true,
+      sortable: true,
+      resizable: true,
+      lockPinned: true,
+      wrapHeaderText: true,
+      autoHeaderHeight: true
+    };
+  }, []);
+  const onSelectionChanged = useCallback(() => {
+    if (!gridRef.current) {
+      return;
+    }
+    const selectedRows = gridRef.current.api.getSelectedRows();
+    setSelectedRowsLength(selectedRows.length);
+  }, []);
+  const addCurves = useCallback((curves) => {
+    setRowData((prev) => {
+      const notYetAddedCurves = curves.filter((curve) => !isCurveAlreadyAdded(prev, curve));
+      return [...prev, ...notYetAddedCurves];
+    });
+  }, []);
+  const removeCurves = useCallback(() => {
+    if (!gridRef.current) {
+      return;
+    }
+    const selectedRows = gridRef.current.api.getSelectedRows();
+    setSelectedRowsLength(0);
+    setRowData((prev) => {
+      const remainingRows = prev.filter((elem) => !isRowSelected(elem, selectedRows));
+      return remainingRows;
+    });
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      addCurves,
+      removeCurves,
+      getCurves: () => {
+        return rowData;
+      }
+    }),
+    [addCurves, removeCurves, rowData]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Typography, { sx: styles.h6, variant: "h6", children: [
+      /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveToAdd" }),
+      ` (${selectedRowsLength} / ${rowData.length})`
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+      CustomAGGrid,
+      {
+        ref: gridRef,
+        rowData,
+        columnDefs,
+        defaultColDef,
+        rowSelection: "multiple",
+        onSelectionChanged,
+        overrideLocales: AGGRID_LOCALES
+      }
+    ) }) })
+  ] });
+});
+export {
+  CurvePreview as default
+};

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-selector-dialog.d.ts

@@ -0,0 +1,15 @@
+import { DynamicSimulationModelInfos } from '../../../../../utils/types/dynamic-simulation.type';
+import { VoltageLevelInfos } from '../../../../../utils/types/equipmentType';
+import { ExpertFilter, IdentifiableAttributes } from '../../../../filter';
+import { Curve } from '../common/curve.type';
+interface CurveSelectorDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onSave: (curves: Curve[]) => void;
+    voltageLevelsFetcher?: () => Promise<VoltageLevelInfos[]>;
+    countriesFetcher?: () => Promise<string[]>;
+    evaluateFilterFetcher?: (filter: ExpertFilter) => Promise<IdentifiableAttributes[]>;
+    modelsFetcher?: () => Promise<DynamicSimulationModelInfos[]> | undefined;
+}
+declare function CurveSelectorDialog({ open, onClose, onSave, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, modelsFetcher, }: Readonly<CurveSelectorDialogProps>): import("react/jsx-runtime").JSX.Element;
+export default CurveSelectorDialog;

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-selector-dialog.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid, Tooltip, IconButton, DialogActions, Button } from "@mui/material";
+import { useRef, useCallback } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { ArrowCircleRight, ArrowCircleLeft } from "@mui/icons-material";
+import CurvePreview from "./curve-preview.js";
+import CurveSelector from "./curve-selector.js";
+import { mergeSx } from "../../../../../utils/styles.js";
+import { parametersStyles } from "../../../parameters-style.js";
+function CurveSelectorDialog({
+  open,
+  onClose,
+  onSave,
+  voltageLevelsFetcher,
+  countriesFetcher,
+  evaluateFilterFetcher,
+  modelsFetcher
+}) {
+  const theme = useTheme();
+  const selectorRef = useRef(null);
+  const previewRef = useRef(null);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const handleAdd = useCallback(() => {
+    if (!previewRef.current) {
+      return;
+    }
+    onSave(previewRef.current.getCurves());
+  }, [onSave]);
+  const intl = useIntl();
+  const handleAddButton = useCallback(() => {
+    if (!selectorRef.current || !previewRef.current) {
+      return;
+    }
+    const selectedEquipments = selectorRef.current.getSelectedEquipments();
+    const selectedVariables = selectorRef.current.getSelectedVariables();
+    const curves = selectedEquipments.flatMap(
+      (equipment) => selectedVariables.map((variable) => ({
+        equipmentType: equipment.type,
+        equipmentId: equipment.id,
+        variableId: variable.variableId
+      }))
+    );
+    previewRef.current.addCurves(curves);
+  }, []);
+  const handleDeleteButton = useCallback(() => {
+    if (!previewRef.current) {
+      return;
+    }
+    previewRef.current.removeCurves();
+  }, []);
+  const hasSelectedRow = false;
+  return /* @__PURE__ */ jsxs(Dialog, { open, "aria-labelledby": "curve-selector-dialog-title", maxWidth: "xl", fullWidth: true, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { id: "curve-selector-dialog-title", children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "h5", sx: parametersStyles.title, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveSelectorDialogTitle" }) }) }),
+    /* @__PURE__ */ jsx(DialogContent, { style: { overflowY: "hidden", height: "60vh" }, children: /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        container: true,
+        sx: mergeSx(parametersStyles.scrollableGrid, {
+          maxWidth: "xl",
+          height: "100%",
+          maxHeight: "100%"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 8, spacing: theme.spacing(1), children: /* @__PURE__ */ jsx(
+            CurveSelector,
+            {
+              ref: selectorRef,
+              voltageLevelsFetcher,
+              countriesFetcher,
+              evaluateFilterFetcher,
+              modelsFetcher
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", justifyContent: "center", alignItems: "center", xs: 0.5, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: intl.formatMessage({
+                  id: "AddRows"
+                }),
+                placement: "top",
+                children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "primary",
+                    onClick: () => handleAddButton(),
+                    disabled: hasSelectedRow,
+                    children: /* @__PURE__ */ jsx(ArrowCircleRight, {})
+                  }
+                ) })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: intl.formatMessage({
+                  id: "DeleteRows"
+                }),
+                placement: "top",
+                children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "primary",
+                    onClick: () => handleDeleteButton(),
+                    disabled: hasSelectedRow,
+                    children: /* @__PURE__ */ jsx(ArrowCircleLeft, {})
+                  }
+                ) })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: true, direction: "column", children: /* @__PURE__ */ jsx(CurvePreview, { ref: previewRef }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: handleAdd, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationAdd" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationClose" }) })
+    ] })
+  ] });
+}
+export {
+  CurveSelectorDialog as default
+};

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-selector-utils.d.ts

@@ -0,0 +1,20 @@
+import { EquipmentType } from '../../../../../utils/types/equipmentType';
+import { CombinatorType, DataType } from '../../../../filter/expert/expertFilter.type';
+import { ExpertFilter } from '../../../../filter/filter.type';
+export declare const CURVE_EQUIPMENT_TYPES: EquipmentType[];
+export declare const getReferencedEquipmentTypeForModel: (equipmentType: EquipmentType) => EquipmentType.SUBSTATION | EquipmentType.VOLTAGE_LEVEL | EquipmentType.BUS | EquipmentType.SWITCH | EquipmentType.LINE | EquipmentType.TWO_WINDINGS_TRANSFORMER | EquipmentType.THREE_WINDINGS_TRANSFORMER | EquipmentType.GENERATOR | EquipmentType.BATTERY | EquipmentType.LOAD | EquipmentType.SHUNT_COMPENSATOR | EquipmentType.STATIC_VAR_COMPENSATOR | EquipmentType.HVDC_LINE | EquipmentType.HVDC_CONVERTER_STATION | EquipmentType.VSC_CONVERTER_STATION | EquipmentType.LCC_CONVERTER_STATION | EquipmentType.DANGLING_LINE | EquipmentType.TIE_LINE | EquipmentType.DISCONNECTOR | EquipmentType.BREAKER;
+export declare const getTopologyKindIfNecessary: (equipmentType: string) => {
+    topologyKind: string;
+} | {
+    topologyKind?: undefined;
+};
+export declare const buildExpertRules: (equipmentType: EquipmentType, voltageLevelIds: string[] | undefined, countries: string[] | undefined, nominalVoltages: number[] | undefined, substationProperties: Record<string, string[]> | undefined, ids: Record<string, string[]> | undefined) => {
+    combinator: CombinatorType;
+    dataType: DataType;
+    rules: any[];
+};
+/** @deprecated The behavior of this local builder function differs from the backend one used by others (analysis results & spreadsheet).
+ *      A new endpoint is now available to evaluate a global-filter on a network. To migrate to it.
+ */
+export declare const buildExpertFilter: (equipmentType: EquipmentType, voltageLevelIds: string[], countries: string[], nominalVoltages: number[], substationProperties?: Record<string, string[]>, ids?: Record<string, string[]>) => ExpertFilter;
+export declare const NOMINAL_VOLTAGE_UNIT = "kV";