Dynamic simulation - TapChangerBlocking model for automaton V2

src/components/1-atoms/Autocomplete.jsx

@@ -28,7 +28,8 @@ const Autocomplete = (props) => {
         isMultiple = false,
         ignoreReset = false,
         label,
-        fullWidth,
+        fixedWidth = false,
+        ...rest
     } = props;
 
     const matchMultipleOptions = useCallback(
@@ -66,17 +67,7 @@ const Autocomplete = (props) => {
     );
 
     const classes = useStyles({
-        labelLength:
-            inputValue.length +
-            (isMultiple
-                ? selectedOption.reduce(
-                      (accLength, currentValue) =>
-                          accLength + currentValue.label.length,
-                      0
-                  )
-                : 0),
-        selectedOptions: isMultiple ? value.length : 0,
-        fullWidth: fullWidth,
+        inputLength: fixedWidth ? undefined : inputValue.length,
     });
 
     const [updateFlag, setUpdateFlag] = useState(false);
@@ -184,6 +175,7 @@ const Autocomplete = (props) => {
                     style={{ width: 'fit-content' }}
                 />
             )}
+            {...rest}
         />
     );
 };
@@ -204,7 +196,7 @@ Autocomplete.propTypes = {
     error: PropTypes.bool,
     ignoreReset: PropTypes.bool,
     label: PropTypes.string,
-    fullWidth: PropTypes.bool,
+    fixedWidth: PropTypes.bool,
 };
 
 export default Autocomplete;

src/components/1-atoms/AutocompleteStyles.js

@@ -7,16 +7,13 @@
 
 import makeStyles from '@mui/styles/makeStyles';
 
-const FONT_SIZE = '0.875em';
+const FONT_SIZE = 0.875; // em
 const MINIMUM_WIDTH = '150px';
 export const useStyles = makeStyles((theme) => ({
-    inputWidth: ({ labelLength, selectedOptions, fullWidth }) => {
-        return {
-            width: fullWidth
-                ? '100%'
-                : `max(${MINIMUM_WIDTH},calc(${FONT_SIZE} * ${labelLength} + 80px * ${selectedOptions} +  ${
-                      selectedOptions !== 0 ? 1 : 0
-                  } * 50px))`,
-        };
-    },
+    inputWidth: ({ inputLength }) => ({
+        minWidth: MINIMUM_WIDTH,
+        width: inputLength
+            ? `calc(${inputLength} * ${FONT_SIZE} * 16px)`
+            : 'auto',
+    }),
 }));

src/components/1-atoms/buttons/index.jsx

@@ -17,6 +17,7 @@ import LoopIcon from '@mui/icons-material/Loop';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import DoneIcon from '@mui/icons-material/Done';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import SaveAsIcon from '@mui/icons-material/SaveAs';
 
 export const AddIconButton = (props) => (
     <IconButton icon={<AddCircleIcon />} {...props} />
@@ -55,3 +56,6 @@ export const ApplyOneButton = (props) => (
 export const ApplyAllButton = (props) => (
     <IconButton icon={<DoneAllIcon />} {...props} />
 );
+export const EditButton = (props) => (
+    <IconButton icon={<SaveAsIcon />} {...props} />
+);

src/components/2-molecules/AttachDialog.jsx

@@ -67,6 +67,7 @@ const AttachDialog = (props) => {
                                     }))}
                                     value={networkId}
                                     onChange={setNetworkId}
+                                    fixedWidth
                                 />
                             </Grid>
                             <Grid item xs={2}>
@@ -97,6 +98,7 @@ const AttachDialog = (props) => {
                             <Grid item xs={2}>
                                 <Button
                                     onClick={() => onAttach('file')}
+                                    className={classes.idVerticalAlign}
                                     disabled={file === null}
                                 >
                                     Attach

src/components/2-molecules/AttachDialogStyles.js

@@ -10,6 +10,7 @@ import makeStyles from '@mui/styles/makeStyles';
 export const useStyles = makeStyles({
     idVerticalAlign: {
         marginTop: '1em',
+        marginLeft: '1em',
     },
     margins: {
         padding: '1em',

src/components/2-molecules/ModelSelect.jsx

@@ -1,91 +1,33 @@
-import { Box, Checkbox, Grid, Typography } from '@mui/material';
+/**
+ * Copyright (c) 2021, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Box, Grid, Typography } from '@mui/material';
 import Select from '../1-atoms/Select';
 import { getModelsOptions } from '../../utils/optionsBuilders';
 import { useStyles } from './ModelSelectStyle';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { SetType } from '../../constants/models';
-import { SaveButton } from '../1-atoms/buttons';
 
 const modelLabel = 'should be mapped to';
-const setLabel = 'and use parameters group';
-const editGroupLabel = 'Edit the parameters group and/or the parameters sets';
-const simpledEditLabel =
-    'Cannot edit sets without enabling parameters management';
-const newGroupLabel = 'Create new group';
-const isAbsoluteLabel = 'All equipments share the same .par file';
-
-const parName = (type, name) =>
-    (type === SetType.SUFFIX ? '{id}' : '') +
-    name +
-    (type === SetType.PREFIX ? '{id}' : '');
 
 const ModelSelect = (props) => {
-    const {
-        model,
-        models,
-        changeModel,
-        setGroup,
-        groupType,
-        changeGroup,
-        editGroup,
-        controlledParameters = false,
-        isNetworkAttached,
-    } = props;
-    const mappedModel = models.find(
-        (modelToTest) => modelToTest.name === model
-    );
-
-    const groups = mappedModel ? mappedModel.groups : [];
-
-    const foundGroup = mappedModel?.groups.find(
-        (group) => group.name === setGroup && group.type === groupType
-    );
-
-    const [isAbsolute, setIsAbsolute] = useState(
-        ![SetType.PREFIX, SetType.SUFFIX].includes(groupType)
-    );
+    const { model, models, changeModel } = props;
 
-    useEffect(() => {
-        // Update isAbsolute according to the group type for the rule
-        if (groupType) {
-            setIsAbsolute(
-                ![SetType.PREFIX, SetType.SUFFIX].includes(groupType)
-            );
-        }
-    }, [groupType]);
-
-    const onAbsoluteChange = () => {
-        setIsAbsolute(!isAbsolute);
-        changeGroup({ name: '', type: '' });
-    };
-    const groupOptions = groups
-        .filter((group) =>
-            isAbsolute
-                ? group.type === SetType.FIXED
-                : group.type !== SetType.FIXED
-        )
-        .map((group) => ({
-            label: parName(group.type, group.name),
-            value: group,
-        }));
-    groupOptions.push({ label: newGroupLabel, value: '' });
-
-    const errorInParams =
-        controlledParameters &&
-        (foundGroup === undefined || foundGroup.setsNumber === 0);
-
-    const classes = useStyles({ errorInParams });
+    const classes = useStyles();
 
     return (
         <Box className={classes.box}>
             <Grid container justify={'center'}>
-                <Grid item xs="auto">
+                <Grid item xs={6}>
                     <Grid container justify={'center'}>
                         <Grid item xs="auto">
                             <Typography variant="h4">{`${modelLabel} :`}</Typography>
                         </Grid>
-                        <Grid item xs="auto" className={classes.titleSelect}>
+                        <Grid item xs className={classes.titleSelect}>
                             <Select
                                 options={getModelsOptions(models)}
                                 value={model}
@@ -94,50 +36,6 @@ const ModelSelect = (props) => {
                             />
                         </Grid>
                     </Grid>
-                    <Grid container justify={'center'}>
-                        <Grid item xs="auto">
-                            <Typography variant="h4">{`${isAbsoluteLabel} :`}</Typography>
-                        </Grid>
-                        <Grid item xs="auto">
-                            <Checkbox
-                                checked={isAbsolute}
-                                onChange={onAbsoluteChange}
-                                disabled={!isNetworkAttached}
-                            />
-                        </Grid>
-                    </Grid>
-                    <Grid container justify={'center'}>
-                        <Grid item xs="auto">
-                            <Typography variant="h4">{`${setLabel} :`}</Typography>
-                        </Grid>
-                        <Grid item xs="auto" className={classes.titleSelect}>
-                            <Select
-                                options={groupOptions}
-                                value={foundGroup}
-                                setValue={changeGroup}
-                                error={foundGroup === undefined}
-                            />
-                        </Grid>
-                    </Grid>
-                </Grid>
-                <Grid item xs={2}>
-                    <Grid container className={classes.infoGrid}>
-                        <Grid item xs={3} className={classes.tooltip}></Grid>
-                        <Grid item xs={9} className={classes.button}>
-                            <SaveButton
-                                onClick={editGroup(isAbsolute)}
-                                disabled={
-                                    model === '' ||
-                                    (setGroup && !controlledParameters)
-                                }
-                                tooltip={
-                                    setGroup && !controlledParameters
-                                        ? simpledEditLabel
-                                        : editGroupLabel
-                                }
-                            />
-                        </Grid>
-                    </Grid>
                 </Grid>
             </Grid>
         </Box>
@@ -146,14 +44,8 @@ const ModelSelect = (props) => {
 
 ModelSelect.propTypes = {
     model: PropTypes.string.isRequired,
-    setGroup: PropTypes.string.isRequired,
-    groupType: PropTypes.string.isRequired,
     models: PropTypes.arrayOf(PropTypes.object).isRequired,
     changeModel: PropTypes.func.isRequired,
-    changeGroup: PropTypes.func.isRequired,
-    editGroup: PropTypes.func.isRequired,
-    controlledParameters: PropTypes.bool,
-    isNetworkAttached: PropTypes.bool.isRequired,
 };
 
 export default ModelSelect;

src/components/2-molecules/ModelSelectStyle.js

@@ -8,23 +8,8 @@
 import makeStyles from '@mui/styles/makeStyles';
 
 export const useStyles = makeStyles((theme) => ({
-    titleSelect: {},
-    box: {},
-    infoGrid: {
-        height: '100%',
-    },
-    tooltip: {
-        marginTop: '3em',
-        justifyContent: 'center',
-        display: 'flex',
+    titleSelect: {
+        textAlign: 'right',
     },
-    button: ({ errorInParams }) => ({
-        justifyContent: 'center',
-        display: 'flex',
-        '& .MuiIconButton-root .MuiIconButton-label .MuiSvgIcon-root': {
-            fontSize: '2em',
-            pointerEvents: 'auto',
-            color: errorInParams ? 'red' : 'unset',
-        },
-    }),
+    box: {},
 }));