Merge branch 'fix-canvas-render' into 'master'

fix multiple niivue rendering

See merge request !8

src/App.jsx

@@ -20,11 +20,13 @@ const runSocket = io(`ws://${host}:${socketServerPort}`)
 
 const nv = new Niivue()
 
-const NiiVue = ({images}) => {
+const NiiVue = ({url}) => {
+	// 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])
 
 	return (
 		<Grid container item xs={12} m={2} alignItems='center' justifyContent='center' spacing={0} direction='row'>
@@ -300,6 +302,7 @@ export default function Bet() {
 	const [moreOptions, setMoreOptions] = useState(false)
 	const [commandString, setCommandString] = useState('')
 	const [isRunning, setIsRunning] = useState(false)
+	const [niivueImage, setNiivueImage] = useState('')
 	
 	if (host === null || socketServerPort === null || fileServerPort === null){
 		setSnackBarMessage('unable to contact backend application')
@@ -307,26 +310,29 @@ export default function Bet() {
 	inFileSocket.on('files', (data) => {
 		console.log(data)
 		updateBetOptsValue('input', data[0])
+		setNiivueImage(`http://${host}:${fileServerPort}/file/?filename=${data[0]}`)
+		/*
 		nv.loadVolumes([
 			{url: `http://${host}:${fileServerPort}/file/?filename=${data[0]}`}
 		])
+		*/
 	})
 
 	runSocket.on('run', (data) => {
 		console.log('run', data)
 		setIsRunning(false)
+		setNiivueImage(`http://${host}:${fileServerPort}/file/?filename=${betOpts['output']}`)
+		/*
 		nv.loadVolumes([
 			{url: `http://${host}:${fileServerPort}/file/?filename=${betOpts['output']}`}
 		])
+		*/
 	})
 
-
 	function handleSnackBarClose() {
 		setShowSnackBar(false)
 	}
 
-	
-
 	function showSnackBarIfMsg() {
 		if (snackBarMessage !== '') {
 			setShowSnackBar(true)
@@ -371,13 +377,13 @@ export default function Bet() {
 
 
 	function updateBetOptsValue(option, value) {
-		setBetOpts(betOpts => ({
-			...betOpts,
+		setBetOpts(defaultBetOpts => ({
+			...defaultBetOpts,
 			...{[option]: value}
 		}))
 		if (option === 'input') {
-			setBetOpts(betOpts => ({
-				...betOpts,
+			setBetOpts(defaultBetOpts => ({
+				...defaultBetOpts,
 				...{'output': setOutputName(value)}
 			}))
 		}
@@ -423,7 +429,7 @@ export default function Bet() {
 						updateBetOptsValue={updateBetOptsValue}
 					/>
 					<CommandStringPreview commandString={commandString}/>
-					<NiiVue images={[]}/>
+					<NiiVue url={niivueImage}/>
 					<Snackbar
 						anchorOrigin={{horizontal:'center', vertical:'bottom'}}
 						open={showSnackBar}