feat: display serializable data in table

src/components/molecules/InterpretationLog.tsx

@@ -20,33 +20,17 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import StorageIcon from '@mui/icons-material/Storage';
 
-function createData(
-  name: string,
-  calories: number,
-  fat: number,
-  carbs: number,
-  protein: number,
-) {
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
 export const InterpretationLog = () => {
   const [open, setOpen] = useState<boolean>(false);
   const [log, setLog] = useState<string>('');
   const [selectedOption, setSelectedOption] = useState<string>('10');
   const [customValue, setCustomValue] = useState('');
+  const [tableData, setTableData] = useState<any[]>([]); // State for table data
 
   const logEndRef = useRef<HTMLDivElement | null>(null);
 
   const { width } = useBrowserDimensionsStore();
+  const { socket } = useSocketStore();
 
   const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
@@ -59,8 +43,6 @@ export const InterpretationLog = () => {
     setOpen(newOpen);
   };
 
-  const { socket } = useSocketStore();
-
   const scrollLogToBottom = () => {
     if (logEndRef.current) {
       logEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -76,10 +58,16 @@ export const InterpretationLog = () => {
     scrollLogToBottom();
   }, [log, scrollLogToBottom]);
 
-  const handleSerializableCallback = useCallback((data: string) => {
+  const handleSerializableCallback = useCallback((data: any) => {
     setLog((prevState) =>
       prevState + '\n' + '---------- Serializable output data received ----------' + '\n'
       + JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------');
+    
+    // Set table data
+    if (Array.isArray(data)) {
+      setTableData(data);
+    }
+    
     scrollLogToBottom();
   }, [log, scrollLogToBottom]);
 
@@ -108,8 +96,11 @@ export const InterpretationLog = () => {
       socket?.off('serializableCallback', handleSerializableCallback);
       socket?.off('binaryCallback', handleBinaryCallback);
     };
-  }, [socket, handleLog]);
+  }, [socket, handleLog, handleSerializableCallback, handleBinaryCallback]);
 
+  // Extract columns dynamically from the first item of tableData
+  const columns = tableData.length > 0 ? Object.keys(tableData[0]) : [];
+  
   return (
     <div>
       <button
@@ -151,35 +142,28 @@ export const InterpretationLog = () => {
           <Highlight className="javascript">
             {log}
           </Highlight>
-          <TableContainer component={Paper}>
+          {tableData.length > 0 && (
-            <Table sx={{ minWidth: 650 }} stickyHeader aria-label="simple table">
+            <TableContainer component={Paper}>
-              <TableHead>
+              <Table sx={{ minWidth: 650 }} stickyHeader aria-label="simple table">
-                <TableRow>
+                <TableHead>
-                  <TableCell>Dessert (100g serving)</TableCell>
+                  <TableRow>
-                  <TableCell align="right">Calories</TableCell>
+                    {columns.map((column) => (
-                  <TableCell align="right">Fat&nbsp;(g)</TableCell>
+                      <TableCell key={column}>{column}</TableCell>
-                  <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+                    ))}
-                  <TableCell align="right">Protein&nbsp;(g)</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => (
-                  <TableRow
-                    key={row.name}
-                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                  >
-                    <TableCell component="th" scope="row">
-                      {row.name}
-                    </TableCell>
-                    <TableCell align="right">{row.calories}</TableCell>
-                    <TableCell align="right">{row.fat}</TableCell>
-                    <TableCell align="right">{row.carbs}</TableCell>
-                    <TableCell align="right">{row.protein}</TableCell>
                   </TableRow>
-                ))}
+                </TableHead>
-              </TableBody>
+                <TableBody>
-            </Table>
+                  {tableData.map((row, index) => (
-          </TableContainer>
+                    <TableRow key={index}>
+                      {columns.map((column) => (
+                        <TableCell key={column}>{row[column]}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
           <div style={{ display: 'flex', alignItems: 'flex-start', gap: '200px' }}>
             <FormControl>
               <FormLabel>