From 0814b89817d05c689e0381b049f32f52258b7629 Mon Sep 17 00:00:00 2001
From: Salam Dalloul <salam@leannode.com>
Date: Mon, 5 Jun 2023 17:59:07 +0200
Subject: [PATCH] #57 implement open modal dialog

---
 src/client/assets/styles/variables.js         |   4 +-
 .../components/common/CondaSelectionDialog.js |  12 +-
 src/client/components/common/CustomSelect.js  |  26 +--
 src/client/components/common/Layout.js        |  54 +++++-
 .../components/common/RunModalDialog.js       | 183 ++++++++++++++++++
 src/theme.js                                  |  12 +-
 6 files changed, 268 insertions(+), 23 deletions(-)
 create mode 100644 src/client/components/common/RunModalDialog.js

diff --git a/src/client/assets/styles/variables.js b/src/client/assets/styles/variables.js
index 228d4126..4a400c77 100644
--- a/src/client/assets/styles/variables.js
+++ b/src/client/assets/styles/variables.js
@@ -110,7 +110,9 @@ const vars = {
 
   lightBlack: 'rgba(0, 0, 0, 0.8)',
   lightgray: "#F4F4F4",
-  optionTextColor: '#1A1A1A'
+  optionTextColor: '#1A1A1A',
+
+  disabledButtonBG: 'rgba(0, 122, 255, 0.2)'
 };
 
 export default vars;
diff --git a/src/client/components/common/CondaSelectionDialog.js b/src/client/components/common/CondaSelectionDialog.js
index 5085aab2..552a5ef7 100644
--- a/src/client/components/common/CondaSelectionDialog.js
+++ b/src/client/components/common/CondaSelectionDialog.js
@@ -11,6 +11,9 @@ const {
 } = vars;
 
 export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
+  const onSelectChange = (event) => {
+    setState({condaEnv: event.target.value})
+  }
 
   return <Paper
     id='pnl-wall'
@@ -74,7 +77,14 @@ export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
           >
             {'Select conda environment:'}
           </Typography>
-          <CustomSelect state={state} setState={(val) => setState(val)} getMenuItems={getMenuItems} />
+          <CustomSelect
+            setState={(val) => setState(val)}
+            getMenuItems={getMenuItems}
+            placeholder="Conda environment"
+            value={state.condaEnv}
+            options={state.condaEnvs}
+            onSelectChange={(val) => onSelectChange(val)}
+          />
         </Box>
 
         <Button
diff --git a/src/client/components/common/CustomSelect.js b/src/client/components/common/CustomSelect.js
index 6527758c..2a8c5b85 100644
--- a/src/client/components/common/CustomSelect.js
+++ b/src/client/components/common/CustomSelect.js
@@ -5,11 +5,8 @@ const {
   breadcrumbTextColor,
 } = vars;
 
-export const CustomSelect = ({state, setState, getMenuItems}) => {
+export const CustomSelect = ({setState, getMenuItems, placeholder, value, options, onSelectChange, showShrunkLabel = true}) => {
 
-  const onSelectChange = (event) => {
-    setState({condaEnv: event.target.value})
-  }
   return <FormControl
     fullWidth
     sx={{
@@ -29,24 +26,28 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
 
         "&.Mui-focused": {
           color: '#8F8F8F'
-        }
+        },
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: '0 !important',
       },
-
       "& .MuiInputLabel-shrink":  {
         transform: 'translateY(-150%)',
         fontSize: '10px',
-        color: '#8F8F8F'
+        color: '#8F8F8F',
+        display: !showShrunkLabel && value ? 'none' : 'block'
       },
     }}>
-    <InputLabel id="conda-environment-select-label">Conda environment</InputLabel>
+    <InputLabel id="conda-environment-select-label">{placeholder}</InputLabel>
     <Select
       labelId="conda-environment-select-label"
       id="conda-environment-select"
-      value={state.condaEnv}
-      label="Conda environment"
+      value={value}
       onChange={onSelectChange}
       renderValue={(selected) => selected}
       sx={{
+        color: breadcrumbTextColor,
+
         "& .MuiOutlinedInput-notchedOutline": {
           border: 0
         },
@@ -55,9 +56,8 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
             border: 0
           }
         },
-        color: breadcrumbTextColor,
         "& .MuiInput-input": {
-          paddingLeft: '17px'
+          paddingLeft: '17px',
         },
         "&:before, &:after": {
           border: "none",
@@ -69,7 +69,7 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
         },
       }}
     >
-      {getMenuItems()}
+      {getMenuItems(options, value)}
     </Select>
   </FormControl>
 }
diff --git a/src/client/components/common/Layout.js b/src/client/components/common/Layout.js
index e4b808ed..46773925 100644
--- a/src/client/components/common/Layout.js
+++ b/src/client/components/common/Layout.js
@@ -13,6 +13,7 @@ import {Box, LinearProgress, MenuItem, Paper} from "@mui/material";
 import {CondaSelectionDialog} from "./CondaSelectionDialog";
 import {DependenciesDialog} from "./DependenciesDialog";
 import vars from "../../assets/styles/variables";
+import {RunModalDialog} from "./RunModalDialog";
 const {
   listItemActiveBg,
   optionTextColor
@@ -24,16 +25,28 @@ const stateTransitions = require('../../../messageTypes').stateTransitions;
 
 const isFrontendDev = process.env.REACT_APP_FRONTEND_DEV === 'true';
 
+const selectModalOptions = {
+  PNL_input: 'Insert the PNL model input' ,
+  file_path: 'Use a file',
+  python_object_name: 'Type the name of a Python object contained in the PNL model'
+}
+
 class Layout extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       electronState: appStates.FRONTEND_STARTED,
       condaEnv: '',
+      modalDialogValue: '',
       condaEnvs: undefined,
       dependenciesFound: true,
       condaEnvSelection: false,
+      showRunModalDialog: false,
       spinnerEnabled: !isFrontendDev,
+      modalDialogOptions: Object.values(selectModalOptions),
+      PNL_input: "",
+      file_path: "",
+      python_object_name: ""
     };
 
     this.pnlFound = this.pnlFound.bind(this);
@@ -44,6 +57,7 @@ class Layout extends React.Component {
     this.setServerStarted = this.setServerStarted.bind(this);
     this.displayDependenciesDialog = this.displayDependenciesDialog.bind(this);
     this.displayCondaSelectionDialog = this.displayCondaSelectionDialog.bind(this);
+    this.displayRunModalDialog = this.displayRunModalDialog.bind(this);
   }
 
   async componentDidMount() {
@@ -94,22 +108,28 @@ class Layout extends React.Component {
     });
   }
 
+  openRunModalDialog(data) {
+    this.setState({
+      showRunModalDialog: true,
+    });
+  }
+
   onCloseCondaSelectionDialog() {
     console.log('you are closing CondaSelectionDialog')
   }
 
-  getMenuItems() {
-    return this.state.condaEnvs?.map((env) => {
+  getMenuItems(options, selectedOption) {
+    return options?.map((option) => {
       return (
-        <MenuItem id={`${env}-id`} value={env}>
+        <MenuItem id={`${option}-id`} value={option}>
         <Box width={1} sx={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
           color: optionTextColor
         }}>
-          {env}
-          {env === this.state.condaEnv && <CheckIcon style={{ fontSize: '1rem', color: listItemActiveBg }} />}
+          {option}
+          {option === selectedOption && <CheckIcon style={{ fontSize: '1rem', color: listItemActiveBg }} />}
         </Box>
       </MenuItem>
       )
@@ -154,6 +174,29 @@ class Layout extends React.Component {
   }
 
 
+  displayRunModalDialog() {
+    return (
+      this.state.showRunModalDialog && this.state.spinnerEnabled === false
+        ? <Rnd
+          size={{ width: '100%', height: '100%' }}
+          position={{ x: 0, y: 0 }}
+          disableDragging={true}
+          enableResizing={false}
+          style={{ zIndex: 1305 }}
+        >
+          <RunModalDialog
+            state={this.state}
+            setState={(val) => this.setState(val)}
+            getMenuItems={this.getMenuItems}
+            onCloseCondaSelectionDialog={this.onCloseCondaSelectionDialog}
+            selectModalOptions={selectModalOptions}
+          />
+        </Rnd>
+        : <></>
+    );
+  }
+
+
   displaySpinner() {
     return (
       this.state.spinnerEnabled
@@ -196,6 +239,7 @@ class Layout extends React.Component {
         {this.displaySpinner()}
         {this.displayDependenciesDialog()}
         {this.displayCondaSelectionDialog()}
+        {this.displayRunModalDialog()}
 
         {viewState === GUIViews.EDIT ? (
           <Box>
diff --git a/src/client/components/common/RunModalDialog.js b/src/client/components/common/RunModalDialog.js
new file mode 100644
index 00000000..d8d41148
--- /dev/null
+++ b/src/client/components/common/RunModalDialog.js
@@ -0,0 +1,183 @@
+import React  from "react";
+import { Box, Button, IconButton, Paper, Typography, TextField } from "@mui/material";
+import {messageTypes} from "../../../messageTypes";
+import vars from "../../assets/styles/variables";
+import {CloseModalIcon} from "../views/visualiseView/icons/layoutIcons";
+import {CustomSelect} from "./CustomSelect";
+import {Stack} from "@mui/system";
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+const {
+  lightBlack,
+  listItemActiveBg,
+  elementBorderColor,
+  textBlack,
+  textWhite
+} = vars;
+
+export const RunModalDialog = ({state, setState, getMenuItems, selectModalOptions}) => {
+
+  const onSelectChange = (event) => {
+    setState({ modalDialogValue: event.target.value })
+  }
+
+  const onOpenFile = () => {
+    console.log('you clicked open file')
+  }
+
+  const onInputChange = (event, field) => {
+    setState({ [field]: event.target.value })
+  }
+
+  return <Paper
+    id='pnl-wall'
+    open={true}
+    sx={{
+      position: 'absolute',
+      top: 50,
+      left: 0,
+      width: 'calc(100VW)',
+      maxWidth: 'calc(100VW)',
+      height: 'calc(100Vh)',
+      border: '0px transparent',
+      background: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    <Paper
+      elevation={4}
+      id='pnl-wall'
+      open={true}
+      hideBackdrop
+      sx={{
+        position: 'fixed',
+        background: "#fff",
+        borderRadius: '0.75rem',
+        zIndex: 1305,
+        width: '640px',
+        height: '640px',
+      }}
+    >
+      <IconButton
+        sx={{
+          padding: 0,
+          margin: '1rem'
+        }}
+      >
+        <CloseModalIcon />
+      </IconButton>
+      <Box
+        height={.895}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'inherit',
+          justifyContent: 'space-between',
+          padding: '80px',
+          paddingTop: '25px',
+
+          "& .MuiInputBase-root": {
+            "&:hover": {
+              border: 0,
+
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: '2px solid #18A0FB',
+
+              }
+            }
+          }
+        }}
+      >
+          <Stack spacing={2}>
+            <Typography
+              sx={{
+                fontSize: '2.5rem',
+                fontWeight: 600,
+                color: lightBlack,
+                lineHeight: 1.2
+              }}
+            >
+              {'Run your model'}
+            </Typography>
+            <CustomSelect
+              setState={(val) => setState(val)}
+              getMenuItems={getMenuItems}
+              placeholder="Select an option"
+              value={state.modalDialogValue}
+              showShrunkLabel={false}
+              options={state.modalDialogOptions}
+              onSelectChange={(val) => onSelectChange(val)}
+            />
+            {
+              state.modalDialogValue === selectModalOptions.PNL_input &&
+              <TextField
+                id="PNL_input"
+                placeholder="Insert the PNL"
+                multiline
+                rows={10}
+                onChange={(e) => onInputChange(e, 'PNL_input')}
+              />
+            }
+            {
+              state.modalDialogValue === selectModalOptions.file_path &&
+              <Button
+                variant="contained"
+                width={1}
+                onClick={onOpenFile}
+                sx={{
+                  height: '2.5rem',
+                  boxShadow: 'none',
+                  backgroundColor: elementBorderColor,
+                  border: 0,
+                  color: textBlack,
+
+                  "&:hover": {
+                    color: textWhite,
+                    boxShadow: 'none',
+                  }
+                }}
+              >
+                Open File
+              </Button>
+            }
+            {
+              state.modalDialogValue === selectModalOptions.python_object_name &&
+              <TextField
+                id="python_object_name"
+                placeholder="Name of a Python object"
+                onChange={(e) => onInputChange(e, 'python_object_name')}
+              />
+            }
+          </Stack>
+
+        <Button
+          size="small"
+          variant="contained"
+          width={1}
+          disabled={!state.PNL_input && !state.file_path && !state.python_object_name}
+          sx={{
+            height: '2.5rem',
+            boxShadow: 'none',
+            backgroundColor: listItemActiveBg,
+            border: '2px solid rgba(0, 0, 0, 0.1)'
+          }}
+          startIcon={<PlayArrowRoundedIcon />}
+          onClick={() => {
+            window.api.send("toMain", {
+              type: messageTypes.CONDA_ENV_SELECTED,
+              payload: state.condaEnv
+            });
+            setState({
+              openCondaDialog: false,
+              dependenciesFound: true,
+              spinnerEnabled: true,
+            });
+          }}
+        >
+          Run your model
+        </Button>
+      </Box>
+    </Paper>
+  </Paper>
+}
diff --git a/src/theme.js b/src/theme.js
index 2b1f8163..05228958 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -51,7 +51,8 @@ const {
   elementBorderColor,
   elementBgColor,
   tabDividerBgColor,
-  lightgray
+  lightgray,
+  disabledButtonBG
 } = vars;
 
 const theme = {
@@ -149,13 +150,18 @@ const theme = {
         containedPrimary: {
           backgroundColor: buttonPrimaryBgColor,
           '&.Mui-disabled': {
-            background: buttonPrimaryDisabledBgColor,
             color: textWhite,
+            background: disabledButtonBG,
+            border: '2px solid rgba(0, 0, 0, 0.02)',
           },
           '&:hover': {
             backgroundColor: buttonPrimaryBgHoverColor,
           },
         },
+
+        "& .Mui-disabled": {
+          background: 'red'
+        }
       },
     },
 
@@ -675,7 +681,7 @@ const theme = {
 
           "& .MuiMenuItem-root": {
             "&.Mui-selected": {
-              backgroundColor: lightgray
+              backgroundColor: `${lightgray} !important`
             }
           }
         }