fix rerender bug

src/App.jsx

@@ -16,26 +16,26 @@ let useShortDisplay = urlParams.get('shortNames') // can be set from global FSL
 console.log(host, socketServerPort, fileServerPort)
 
 // different socket clients for different widgets
-const inFileSocket = io(`ws://${host}:${socketServerPort}`)
-const runSocket = io(`ws://${host}:${socketServerPort}`)
+//const inFileSocket = io(`ws://${host}:${socketServerPort}`)
+//const runSocket = io(`ws://${host}:${socketServerPort}`)
 const fsleyesSocket = io(`ws://${host}:${socketServerPort}`)
 
 
 const nv = new Niivue({clipPlaneColor:[0, 0, 0, 0]})
 
-async function addNiiVueImage(url, color='redyell') {
+async function addNiiVueImage(url, color='gray') {
 	let img = await NVImage.loadFromUrl(url,'',color,1)
 	console.log(img)
 	nv.addVolume(img)
 }
 
-const NiiVue = ({url}) => {
+const NiiVue = () => {
 	// use url string (primative) since object equality will not work with effects
 	const canvas = useRef()
 	useEffect(() => {
 		nv.attachToCanvas(canvas.current)
-		nv.loadVolumes([{url:url}])
-	}, [url])
+		//nv.loadVolumes([{url:url}])
+	}, [])
 
 	return (
 		<Grid container item xs={12} m={2} alignItems='center' justifyContent='center' spacing={0} direction='row'>
@@ -45,13 +45,18 @@ const NiiVue = ({url}) => {
 }
 
 function InputField({text, updateBetOptsValue}) {
-	useEffect(()=>{
-		inFileSocket.on('files', (data) => {
-			console.log(data)
-			updateBetOptsValue('input', data[0])
+	const [inFileSocket, setInFileSocket] = useState({})
+	useEffect(() => {
+		const sock = io(`ws://${host}:${socketServerPort}`)
+		sock.on('files', (data) => {
+			updateBetOptsValue('input', data[0] ? data[0] : '')
+			if (data[0] !== '') {
+				addNiiVueImage(`http://${host}:${fileServerPort}/file/?filename=${data[0]}`)
+			}
 		})
+		setInFileSocket(sock)
 	}, [])
-
+	
 	return (
 		<Grid container item xs={12} alignItems='center' spacing={0}>
 			<Grid item xs={9}>
@@ -108,7 +113,7 @@ function GvalueField({g, updateBetOptsValue}) {
 				<Typography>g value</Typography>
 				<Slider
 					onChange={(e) => {updateBetOptsValue('-g', e.target.value)}}
-					value={g  ?? 0}
+					value={Number(g)  ?? 0}
 					min={-1.0}
 					max={1.0}
 					step={-0.01}
@@ -119,7 +124,7 @@ function GvalueField({g, updateBetOptsValue}) {
 				<Input
 					size='small'
 					style={{margin:0, marginLeft:12}}
-					value={g  ?? 0}
+					value={Number(g)  ?? 0}
 					inputProps={{
 						step: 0.1,
 						min: -1,
@@ -141,7 +146,7 @@ function FvalueField({f, updateBetOptsValue}) {
 				<Typography>f value</Typography>
 				<Slider
 					onChange={(e) => {updateBetOptsValue('-f', e.target.value)}}
-					value={f  ?? 0.5}
+					value={Number(f)  ?? 0.5}
 					min={0.0}
 					max={1.0}
 					step={0.01}
@@ -152,7 +157,7 @@ function FvalueField({f, updateBetOptsValue}) {
 				<Input
 					size='small'
 					style={{margin:0, marginLeft:12}}
-					value={f  ?? 0.5}
+					value={Number(f)  ?? 0.5}
 					inputProps={{
 						step: 0.1,
 						min: 0,
@@ -166,7 +171,7 @@ function FvalueField({f, updateBetOptsValue}) {
 	)
 }
 
-function ActionButtons({handleMoreOptions, commandString, isRunning, setIsRunning, options}) {
+function ActionButtons({handleMoreOptions, commandString, isRunning, setIsRunning, runSocket}) {
 	return (
 		<Grid container item xs={12} alignItems='center' justifyContent='center' spacing={0} direction='row'>
 			<LoadingButton
@@ -316,6 +321,19 @@ export default function Bet() {
 	const [isRunning, setIsRunning] = useState(false)
 	const [niivueImage, setNiivueImage] = useState('')
 	const [voxStr, setVoxStr] = useState('')
+	const [runSocket, setRunSocket] = useState({})
+
+	useEffect(() => {
+		const sock = io(`ws://${host}:${socketServerPort}`)
+		sock.on('run', (data) => {
+			console.log('run', data) 
+			let url = `http://${host}:${fileServerPort}/file/?filename=${betOpts['output']}`
+			console.log(url)
+			addNiiVueImage(url,'red')
+			setIsRunning(false)
+		})
+		setRunSocket(sock)
+	}, [betOpts['output']])
 	
 	if (host === null || socketServerPort === null || fileServerPort === null){
 		setSnackBarMessage('unable to contact backend application')
@@ -326,23 +344,6 @@ export default function Bet() {
 		//updateBetOptsValue('-c', voxStr)
 	})
 
-	inFileSocket.on('files', (data) => {
-		updateBetOptsValue('input', data[0] ? data[0] : '')
-		if (data[0] !== '') {
-			setNiivueImage(`http://${host}:${fileServerPort}/file/?filename=${data[0]}`)
-		}
-	})
-
-	runSocket.on('run', (data) => {
-		console.log('run', data) 
-		let url = `http://${host}:${fileServerPort}/file/?filename=${betOpts['output']}`
-		//let name = betOpts['output'].split('/').pop()
-		if (isRunning){
-			addNiiVueImage(url)
-		}
-		setIsRunning(false)
-	})
-
 	function handleSnackBarClose() {
 		setShowSnackBar(false)
 	}
@@ -450,7 +451,7 @@ export default function Bet() {
 						commandString={commandString}
 						isRunning={isRunning}
 						setIsRunning={setIsRunning}
-						options={betOpts}
+						runSocket={runSocket}
 					/>
 					<OptionsContainer
 						moreOptions={moreOptions}