99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import * as React from 'react';
|
|
import Accordion from '@mui/material/Accordion';
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
|
import Typography from '@mui/material/Typography';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
import Highlight from 'react-highlight'
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useSocketStore } from "../../context/socket";
|
|
|
|
export const InterpretationLog = () => {
|
|
const [expanded, setExpanded] = useState<boolean>(false);
|
|
const [log, setLog] = useState<string>('');
|
|
|
|
const logEndRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
const handleChange = (isExpanded: boolean) => (event: React.SyntheticEvent) => {
|
|
setExpanded(isExpanded);
|
|
};
|
|
|
|
const { socket } = useSocketStore();
|
|
|
|
const scrollLogToBottom = () => {
|
|
if (logEndRef.current) {
|
|
logEndRef.current.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
}
|
|
|
|
const handleLog = useCallback((msg: string, date: boolean = true) => {
|
|
if (!date){
|
|
setLog((prevState) => prevState + '\n' + msg);
|
|
} else {
|
|
setLog((prevState) => prevState + '\n' + `[${new Date().toLocaleString()}] ` + msg);
|
|
}
|
|
scrollLogToBottom();
|
|
}, [log, scrollLogToBottom])
|
|
|
|
const handleSerializableCallback = useCallback((data: string) => {
|
|
setLog((prevState) =>
|
|
prevState + '\n' + '---------- Serializable output data received ----------' + '\n'
|
|
+ JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------');
|
|
scrollLogToBottom();
|
|
}, [log, scrollLogToBottom])
|
|
|
|
const handleBinaryCallback = useCallback(({data, mimetype}: any) => {
|
|
setLog((prevState) =>
|
|
prevState + '\n' + '---------- Binary output data received ----------' + '\n'
|
|
+ `mimetype: ${mimetype}` + '\n' + `data: ${JSON.stringify(data)}` + '\n'
|
|
+ '------------------------------------------------');
|
|
scrollLogToBottom();
|
|
}, [log, scrollLogToBottom])
|
|
|
|
useEffect(() => {
|
|
socket?.on('log', handleLog);
|
|
socket?.on('serializableCallback', handleSerializableCallback);
|
|
socket?.on('binaryCallback', handleBinaryCallback);
|
|
return () => {
|
|
socket?.off('log', handleLog);
|
|
socket?.off('serializableCallback', handleSerializableCallback);
|
|
socket?.off('binaryCallback', handleBinaryCallback);
|
|
}
|
|
}, [socket, handleLog])
|
|
|
|
return (
|
|
<div>
|
|
<Accordion
|
|
expanded={expanded}
|
|
onChange={handleChange(!expanded)}
|
|
style={{background: '#3f4853', color: 'white', borderRadius: '0px'}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon sx={{color: 'white'}}/>}
|
|
aria-controls="panel1bh-content"
|
|
id="panel1bh-header"
|
|
>
|
|
<Typography sx={{ width: '33%', flexShrink: 0 }}>
|
|
Interpretation Log
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{
|
|
background: '#19171c',
|
|
overflowY: 'scroll',
|
|
width: '100%',
|
|
aspectRatio: '4/1',
|
|
boxSizing: 'border-box',
|
|
}}>
|
|
<div>
|
|
<Highlight className="javascript">
|
|
{log}
|
|
</Highlight>
|
|
<div style={{ float:"left", clear: "both" }}
|
|
ref={logEndRef}/>
|
|
</div>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|