Commit ea026ff0 authored by Taylor Hanayik's avatar Taylor Hanayik
Browse files

Merge branch 'fix-sockets' into 'master'

update sockets

See merge request !7
parents 287c5dfd e72d3650
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 { Button, Card, CardContent, Slider, Input, Collapse, Snackbar, FormControlLabel, Checkbox, Switch } from '@mui/material'
import { Container, CssBaseline, TextField, Typography, Grid, Divider } from '@mui/material'
import { Niivue } from '@niivue/niivue'
import { io } from "socket.io-client";
import "./App.css"
// get web socket connection info from url before rendering anything
let urlParams = new URLSearchParams(window.location.search)
let host = urlParams.get('host')
let socketServerPort = urlParams.get('socketServerPort')
let fileServerPort = urlParams.get('fileServerPort')
console.log(host, socketServerPort, fileServerPort)
// different socket clients for different widgets
const inFileSocket = io(`ws://${host}:${socketServerPort}`)
const runSocket = io(`ws://${host}:${socketServerPort}`)
const nv = new Niivue()
const NiiVue = ({images}) => {
......@@ -21,7 +33,14 @@ const NiiVue = ({images}) => {
)
}
function InputField({text, updateBetOptsValue, socket}) {
function InputField({text, updateBetOptsValue}) {
useEffect(()=>{
inFileSocket.on('files', (data) => {
console.log(data)
updateOptsValue('input', data[0])
})
}, [])
return (
<Grid container item xs={12} alignItems='center' spacing={0}>
<Grid item xs={9}>
......@@ -29,7 +48,7 @@ function InputField({text, updateBetOptsValue, socket}) {
fullWidth
size="small"
label='input file'
onChange={(e) => {updateBetOptsValue('input', e.target.value)}}
onInput={(e) => {updateBetOptsValue('input', e.target.value)}}
value={text}>
</TextField>
</Grid>
......@@ -37,7 +56,7 @@ function InputField({text, updateBetOptsValue, socket}) {
<Button
variant='contained'
style={{margin:0, marginLeft: 12}}
onClick={()=>{socket.emit('files')}}
onClick={()=>{inFileSocket.emit('files')}}
>
Choose
</Button>
......@@ -54,7 +73,7 @@ function Title({text}) {
)
}
function OutputField({text, updateBetOptsValue, socket}) {
function OutputField({text, updateBetOptsValue}) {
return (
<Grid container item xs={12} alignItems='center' spacing={0}>
<Grid item xs={9}>
......@@ -62,7 +81,7 @@ function OutputField({text, updateBetOptsValue, socket}) {
fullWidth
size="small"
label='output file'
onChange={(e) => {updateBetOptsValue('output', e.target.value)}}
onInput={(e) => {updateBetOptsValue('output', e.target.value)}}
value={text}
>
</TextField>
......@@ -99,7 +118,7 @@ function GvalueField({g, updateBetOptsValue}) {
max: 1,
type: 'number'
}}
onChange={(e) => {updateBetOptsValue('-g', e.target.value)}}
onInput={(e) => {updateBetOptsValue('-g', e.target.value)}}
/>
</Grid>
</Grid>
......@@ -132,18 +151,18 @@ function FvalueField({f, updateBetOptsValue}) {
max: 1,
type: 'number'
}}
onChange={(e) => {updateBetOptsValue('-f', e.target.value)}}
onInput={(e) => {updateBetOptsValue('-f', e.target.value)}}
/>
</Grid>
</Grid>
)
}
function ActionButtons({handleMoreOptions, commandString, socket, isRunning, setIsRunning}) {
function ActionButtons({handleMoreOptions, commandString, isRunning, setIsRunning}) {
return (
<Grid container item xs={12} alignItems='center' justifyContent='center' spacing={0} direction='row'>
<LoadingButton
onClick={()=>{socket.emit('run', {'run': commandString}); setIsRunning(true)}}
onClick={()=>{runSocket.emit('run', {'run': commandString}); setIsRunning(true)}}
loading={isRunning}
loadingPosition="end"
variant="contained"
......@@ -232,6 +251,21 @@ function CommandStringPreview({commandString}) {
)
}
function UseCrosshairsSwitch({useCrosshairs, setUseCrosshairs}) {
return (
<Grid
container
item
xs={12}
alignItems='left'
spacing={0}
direction='row'
>
<FormControlLabel control={<Switch checked={useCrosshairs} onChange={()=>{setUseCrosshairs(!useCrosshairs)}} />} label="use crosshair position to set starting point" />
</Grid>
)
}
export default function Bet() {
const title = "BET"
const defaultBetOpts = {
......@@ -258,6 +292,7 @@ export default function Bet() {
'-d': false
}
const [betOpts, setBetOpts] = useState(defaultBetOpts)
const [useCrosshairs, setUseCrosshairs] = useState(false) // unused for now since it causes too many slow rerenderings
// the boolean variable to show or hide the snackbar
const [showSnackBar, setShowSnackBar] = useState(false)
// the message, and message setter for the snackbar
......@@ -266,21 +301,10 @@ export default function Bet() {
const [commandString, setCommandString] = useState('')
const [isRunning, setIsRunning] = useState(false)
let urlParams
let host = ''
let socketServerPort = ''
let fileServerPort = ''
urlParams = new URLSearchParams(window.location.search)
host = urlParams.get('host')
socketServerPort = urlParams.get('socketServerPort')
fileServerPort = urlParams.get('fileServerPort')
console.log(host, socketServerPort, fileServerPort)
if (host === null || socketServerPort === null || fileServerPort === null){
setSnackBarMessage('unable to contact backend application')
}
const socket = io(`ws://${host}:${socketServerPort}`)
socket.on('files', (data) => {
inFileSocket.on('files', (data) => {
console.log(data)
updateBetOptsValue('input', data[0])
nv.loadVolumes([
......@@ -288,7 +312,7 @@ export default function Bet() {
])
})
socket.on('run', (data) => {
runSocket.on('run', (data) => {
console.log('run', data)
setIsRunning(false)
nv.loadVolumes([
......@@ -374,7 +398,6 @@ export default function Bet() {
<InputField
updateBetOptsValue={updateBetOptsValue}
text={betOpts['input']}
socket={socket}
/>
<OutputField
updateBetOptsValue={updateBetOptsValue}
......@@ -391,7 +414,6 @@ export default function Bet() {
<ActionButtons
handleMoreOptions={handleMoreOptions}
commandString={commandString}
socket={socket}
isRunning={isRunning}
setIsRunning={setIsRunning}
/>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment