Merge branch 'update-ui' into 'master'

Update ui

See merge request !6

README.md

+# BET GUI
+
+The FSL BET GUI
+
+![FSL BET GUI screenshot](ui-screenshot.png)
+

package.json

@@ -12,6 +12,7 @@
     "@emotion/style": "^0.8.0",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.4",
+    "@mui/lab": "^5.0.0-alpha.70",
     "@mui/material": "^5.2.4",
     "@niivue/niivue": "^0.20.1",
     "react": "^17.0.2",

src/App.jsx

 import { useState, useEffect, useRef, useCallback } from 'react'
 import Box from '@mui/material/Box'
+import LoadingButton from '@mui/lab/LoadingButton';
 import { Button, Card, CardContent, Slider, Input, Collapse, Snackbar, FormControlLabel, Checkbox } from '@mui/material'
 import { Container, CssBaseline, TextField, Typography, Grid, Divider } from '@mui/material'
 import { Niivue } from '@niivue/niivue'
@@ -138,17 +139,19 @@ function FvalueField({f, updateBetOptsValue}) {
 	)
 }
 
-function ActionButtons({handleMoreOptions, commandString, socket}) {
+function ActionButtons({handleMoreOptions, commandString, socket, isRunning, setIsRunning}) {
 	return (
 		<Grid container item xs={12} alignItems='center' justifyContent='center' spacing={0} direction='row'>
-				<Button
-					variant='contained' 
-					style={{margin:0}}
-					onClick={()=>{socket.emit('run', {'run': commandString})}}
-				>
-					Run
-				</Button>
-				<Button style={{margin:0}} onClick={handleMoreOptions}>more options</Button>
+			<LoadingButton
+				onClick={()=>{socket.emit('run', {'run': commandString}); setIsRunning(true)}}
+        loading={isRunning}
+        loadingPosition="end"
+        variant="contained"
+				style={{margin:0}}
+      >
+        Run
+      </LoadingButton>
+			<Button style={{margin:0}} onClick={handleMoreOptions}>more options</Button>
 		</Grid>
 	)
 }
@@ -261,7 +264,7 @@ export default function Bet() {
 	const [snackBarMessage, setSnackBarMessage] = useState('')
 	const [moreOptions, setMoreOptions] = useState(false)
 	const [commandString, setCommandString] = useState('')
-	//const [socket, setSocket] = useState(null)
+	const [isRunning, setIsRunning] = useState(false)
 	
 	let urlParams
 	let host = ''
@@ -287,6 +290,7 @@ export default function Bet() {
 
 	socket.on('run', (data) => {
 		console.log('run', data)
+		setIsRunning(false)
 		nv.loadVolumes([
 			{url: `http://${host}:${fileServerPort}/file/?filename=${betOpts['output']}`}
 		])
@@ -388,6 +392,8 @@ export default function Bet() {
 						handleMoreOptions={handleMoreOptions}
 						commandString={commandString}
 						socket={socket}
+						isRunning={isRunning}
+						setIsRunning={setIsRunning}
 					/>
 					<OptionsContainer
 						moreOptions={moreOptions}