vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: revamp output preview log ui

Browse Source
This commit is contained in:
Rohit
2025-04-29 00:27:35 +05:30
parent 42b56d7132
commit 82d6f70920
1 changed files with 399 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
src/components/run/InterpretationLog.tsx
View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import Typography from '@mui/material/Typography';
import { Button, Grid } from '@mui/material';
import { Button, Grid, Tabs, Tab, Box } from '@mui/material';
import { useCallback, useEffect, useRef, useState } from "react";
import { useSocketStore } from "../../context/socket";
import { Buffer } from 'buffer';
@@ -29,9 +29,18 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const { t } = useTranslation();
const [log, setLog] = useState<string>('');
const [customValue, setCustomValue] = useState('');
const [tableData, setTableData] = useState<any[]>([]);
const [binaryData, setBinaryData] = useState<string | null>(null);
const [captureListData, setCaptureListData] = useState<any[]>([]);
const [captureTextData, setCaptureTextData] = useState<any[]>([]);
const [screenshotData, setScreenshotData] = useState<string[]>([]);
const [otherData, setOtherData] = useState<any[]>([]);
const [captureListPage, setCaptureListPage] = useState<number>(0);
const [screenshotPage, setScreenshotPage] = useState<number>(0);
const [otherPage, setOtherPage] = useState<number>(0);
const [activeTab, setActiveTab] = useState(0);
const logEndRef = useRef<HTMLDivElement | null>(null);
const { browserWidth, outputPreviewHeight, outputPreviewWidth } = useBrowserDimensionsStore();
@@ -62,34 +71,68 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
setLog((prevState) => prevState + '\n' + `[${new Date().toLocaleString()}] ` + msg);
}
scrollLogToBottom();
}, [log, scrollLogToBottom]);
}, []);
const handleSerializableCallback = useCallback((data: any) => {
const handleSerializableCallback = useCallback(({ type, data }: { type: string, data: any }) => {
setLog((prevState) =>
prevState + '\n' + t('interpretation_log.data_sections.serializable_received') + '\n'
+ JSON.stringify(data, null, 2) + '\n' + t('interpretation_log.data_sections.separator'));
if (Array.isArray(data)) {
setTableData(data);
if (type === 'captureList' && Array.isArray(data)) {
setCaptureListData(prev => [...prev, data]);
if (captureListData.length === 0) {
const availableTabs = getAvailableTabs();
const tabIndex = availableTabs.findIndex(tab => tab.id === 'captureList');
if (tabIndex !== -1) setActiveTab(tabIndex);
}
} else if (type === 'captureText') {
if (Array.isArray(data)) {
setCaptureTextData(data);
} else {
setCaptureTextData([data]);
}
if (captureTextData.length === 0) {
const availableTabs = getAvailableTabs();
const tabIndex = availableTabs.findIndex(tab => tab.id === 'captureText');
if (tabIndex !== -1) setActiveTab(tabIndex);
}
} else if (type === 'other') {
if (Array.isArray(data)) {
setOtherData(prev => [...prev, data]);
} else {
setOtherData(prev => [...prev, [data]]);
}
if (otherData.length === 0) {
const availableTabs = getAvailableTabs();
const tabIndex = availableTabs.findIndex(tab => tab.id === 'other');
if (tabIndex !== -1) setActiveTab(tabIndex);
}
}
scrollLogToBottom();
}, [log, scrollLogToBottom, t]);
const handleBinaryCallback = useCallback(({ data, mimetype }: any) => {
}, [captureListData.length, captureTextData.length, otherData.length, t]);
const handleBinaryCallback = useCallback(({ data, mimetype, type }: { data: any, mimetype: string, type: string }) => {
const base64String = Buffer.from(data).toString('base64');
const imageSrc = `data:${mimetype};base64,${base64String}`;
setLog((prevState) =>
prevState + '\n' + t('interpretation_log.data_sections.binary_received') + '\n'
+ t('interpretation_log.data_sections.mimetype') + mimetype + '\n'
+ t('interpretation_log.data_sections.image_below') + '\n'
+ t('interpretation_log.data_sections.separator'));
setBinaryData(imageSrc);
if (type === 'captureScreenshot') {
setScreenshotData(prev => [...prev, imageSrc]);
if (screenshotData.length === 0) {
const availableTabs = getAvailableTabs();
const tabIndex = availableTabs.findIndex(tab => tab.id === 'captureScreenshot');
if (tabIndex !== -1) setActiveTab(tabIndex);
}
}
scrollLogToBottom();
}, [log, scrollLogToBottom, t]);
}, [screenshotData.length, t]);
const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setCustomValue(event.target.value);
@@ -98,8 +141,14 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
useEffect(() => {
if (shouldResetInterpretationLog) {
setLog('');
setTableData([]);
setBinaryData(null);
setCaptureListData([]);
setCaptureTextData([]);
setScreenshotData([]);
setOtherData([]);
setActiveTab(0);
setCaptureListPage(0);
setScreenshotPage(0);
setOtherPage(0);
}
}, [shouldResetInterpretationLog]);
@@ -114,10 +163,37 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
};
}, [socket, handleLog, handleSerializableCallback, handleBinaryCallback]);
// Extract columns dynamically from the first item of tableData
const columns = tableData.length > 0 ? Object.keys(tableData[0]) : [];
const getAvailableTabs = useCallback(() => {
const tabs = [];
if (captureListData.length > 0) {
tabs.push({ id: 'captureList', label: 'Lists' });
}
if (captureTextData.length > 0) {
tabs.push({ id: 'captureText', label: 'Texts' });
}
if (screenshotData.length > 0) {
tabs.push({ id: 'captureScreenshot', label: 'Screenshots' });
}
if (otherData.length > 0) {
tabs.push({ id: 'other', label: 'Other' });
}
return tabs;
}, [captureListData.length, captureTextData.length, screenshotData.length, otherData.length]);
const { hasScrapeListAction, hasScreenshotAction, hasScrapeSchemaAction } = currentWorkflowActionsState
const availableTabs = getAvailableTabs();
useEffect(() => {
if (activeTab >= availableTabs.length && availableTabs.length > 0) {
setActiveTab(0);
}
}, [activeTab, availableTabs.length]);
const { hasScrapeListAction, hasScreenshotAction, hasScrapeSchemaAction } = currentWorkflowActionsState;
useEffect(() => {
if (hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction) {
@@ -127,6 +203,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const { darkMode } = useThemeMode();
const getCaptureTextColumns = captureTextData.length > 0 ? Object.keys(captureTextData[0]) : [];
return (
<Grid container>
<Grid item xs={12} md={9} lg={9}>
@@ -167,6 +245,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
height: outputPreviewHeight,
width: outputPreviewWidth,
display: 'flex',
flexDirection: 'column',
borderRadius: '10px 10px 0 0',
},
}}
@@ -175,67 +254,318 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
<StorageIcon style={{ marginRight: '8px' }} />
{t('interpretation_log.titles.output_preview')}
</Typography>
<div
style={{
height: '50vh',
overflow: 'none',
padding: '10px',
}}
>
{
binaryData ? (
<div style={{ marginBottom: '20px' }}>
<Typography variant="body1" gutterBottom>
{t('interpretation_log.titles.screenshot')}
</Typography>
<img src={binaryData} alt={t('interpretation_log.titles.screenshot')} style={{ maxWidth: '100%' }} />
</div>
) : tableData.length > 0 ? (
<>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
{availableTabs.length > 0 ? (
<>
<Box
sx={{
display: 'flex',
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
{availableTabs.map((tab, index) => (
<Box
key={tab.id}
onClick={() => setActiveTab(index)}
sx={{
px: 4,
py: 2,
cursor: 'pointer',
borderBottom: activeTab === index ? '2px solid' : 'none',
borderColor: activeTab === index ? (darkMode ? '#ff00c3' : '#ff00c3') : 'transparent',
backgroundColor: activeTab === index ? (darkMode ? '#34404d' : '#e9ecef') : 'transparent',
color: darkMode ? 'white' : 'black',
fontWeight: activeTab === index ? 500 : 400,
textAlign: 'center',
position: 'relative',
'&:hover': {
backgroundColor: activeTab !== index ? (darkMode ? '#303b49' : '#e2e6ea') : undefined
}
}}
>
<Typography variant="body1">
{tab.label}
</Typography>
</Box>
))}
</Box>
<Box sx={{ flexGrow: 1, overflow: 'auto', p: 0 }}>
{activeTab === availableTabs.findIndex(tab => tab.id === 'captureList') && captureListData.length > 0 && (
<Box>
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 2,
mt: 2
}}>
<Typography variant="body2">
{`Table ${captureListPage + 1} of ${captureListData.length}`}
</Typography>
<Box>
<Button
onClick={() => setCaptureListPage(prev => Math.max(0, prev - 1))}
disabled={captureListPage === 0}
size="small"
>
Previous
</Button>
<Button
onClick={() => setCaptureListPage(prev => Math.min(captureListData.length - 1, prev + 1))}
disabled={captureListPage >= captureListData.length - 1}
size="small"
sx={{ ml: 1 }}
>
Next
</Button>
</Box>
</Box>
<TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
<Table>
<TableHead>
<TableRow>
{captureListData[captureListPage] && captureListData[captureListPage].length > 0 &&
Object.keys(captureListData[captureListPage][0]).map((column) => (
<TableCell
key={column}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
{column}
</TableCell>
))
}
</TableRow>
</TableHead>
<TableBody>
{captureListData[captureListPage] &&
captureListData[captureListPage].map((row: any, idx: any) => (
<TableRow
key={idx}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6'
}}
>
{Object.keys(row).map((column) => (
<TableCell
key={column}
sx={{
borderBottom: 'none',
py: 2
}}
>
{row[column]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
)}
{activeTab === availableTabs.findIndex(tab => tab.id === 'captureScreenshot') && (
<Box>
{screenshotData.length > 1 && (
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 2,
mt: 2
}}>
<Typography variant="body2">
{`Screenshot ${screenshotPage + 1} of ${screenshotData.length}`}
</Typography>
<Box>
<Button
onClick={() => setScreenshotPage(prev => Math.max(0, prev - 1))}
disabled={screenshotPage === 0}
size="small"
>
Previous
</Button>
<Button
onClick={() => setScreenshotPage(prev => Math.min(screenshotData.length - 1, prev + 1))}
disabled={screenshotPage >= screenshotData.length - 1}
size="small"
sx={{ ml: 1 }}
>
Next
</Button>
</Box>
</Box>
)}
{screenshotData.length > 0 && (
<Box sx={{ p: 3 }}>
<Typography variant="body1" gutterBottom>
{t('interpretation_log.titles.screenshot')} {screenshotPage + 1}
</Typography>
<img
src={screenshotData[screenshotPage]}
alt={`${t('interpretation_log.titles.screenshot')} ${screenshotPage + 1}`}
style={{ maxWidth: '100%' }}
/>
</Box>
)}
</Box>
)}
{activeTab === availableTabs.findIndex(tab => tab.id === 'captureText') && (
<TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
<Table>
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell key={column}>{column}</TableCell>
{getCaptureTextColumns.map((column) => (
<TableCell
key={column}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
{column}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{tableData.slice(0, Math.min(5, tableData.length)).map((row, index) => (
<TableRow key={index}>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
{captureTextData.map((row, idx) => (
<TableRow
key={idx}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6'
}}
>
{getCaptureTextColumns.map((column) => (
<TableCell
key={column}
sx={{
borderBottom: 'none',
py: 2
}}
>
{row[column]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>
{t('interpretation_log.messages.additional_rows')}
</span>
</>
) : (
<Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
<Grid item>
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<>
<Typography variant="h6" gutterBottom align="left">
{t('interpretation_log.messages.successful_training')}
)}
{activeTab === availableTabs.findIndex(tab => tab.id === 'other') && otherData.length > 0 && (
<Box>
{otherData.length > 1 && (
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 2,
mt: 2
}}>
<Typography variant="body2">
{`Dataset ${otherPage + 1} of ${otherData.length}`}
</Typography>
<SidePanelHeader />
</>
) : (
<Typography variant="h6" gutterBottom align="left">
{t('interpretation_log.messages.no_selection')}
</Typography>
<Box>
<Button
onClick={() => setOtherPage(prev => Math.max(0, prev - 1))}
disabled={otherPage === 0}
size="small"
>
Previous
</Button>
<Button
onClick={() => setOtherPage(prev => Math.min(otherData.length - 1, prev + 1))}
disabled={otherPage >= otherData.length - 1}
size="small"
sx={{ ml: 1 }}
>
Next
</Button>
</Box>
</Box>
)}
</Grid>
</Grid>
)}
<div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
</div>
<TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
<Table>
<TableHead>
<TableRow>
{otherData[otherPage] && otherData[otherPage].length > 0 &&
Object.keys(otherData[otherPage][0]).map((column) => (
<TableCell
key={column}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
{column}
</TableCell>
))
}
</TableRow>
</TableHead>
<TableBody>
{otherData[otherPage] &&
otherData[otherPage].map((row: any, idx: any) => (
<TableRow
key={idx}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6'
}}
>
{Object.keys(row).map((column) => (
<TableCell
key={column}
sx={{
borderBottom: 'none',
py: 2
}}
>
{row[column]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
)}
</Box>
</>
) : (
<Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
<Grid item>
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<>
<Typography variant="h6" gutterBottom align="left">
{t('interpretation_log.messages.successful_training')}
</Typography>
<SidePanelHeader />
</>
) : (
<Typography variant="h6" gutterBottom align="left">
{t('interpretation_log.messages.no_selection')}
</Typography>
)}
</Grid>
</Grid>
)}
<div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
</SwipeableDrawer>
</Grid>
</Grid>