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

feat: output preview revamp

Browse Source
This commit is contained in:
amhsirak
2025-10-13 17:59:48 +05:30
parent 6108629ff9
commit da50be7d8c
1 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,9 +22,10 @@ import { useBrowserSteps } from '../../context/browserSteps';
interface InterpretationLogProps { interface InterpretationLogProps {
isOpen: boolean; isOpen: boolean;
setIsOpen: (isOpen: boolean) => void; setIsOpen: (isOpen: boolean) => void;
tutorialMode?: boolean;
} }
export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen }) => { export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen, tutorialMode = false }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [captureListData, setCaptureListData] = useState<any[]>([]); const [captureListData, setCaptureListData] = useState<any[]>([]);
@@ -68,6 +69,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
} }
}, [captureListData.length, captureTextData.length, screenshotData.length]); }, [captureListData.length, captureTextData.length, screenshotData.length]);
useEffect(() => { useEffect(() => {
const textSteps = browserSteps.filter(step => step.type === 'text'); const textSteps = browserSteps.filter(step => step.type === 'text');
if (textSteps.length > 0) { if (textSteps.length > 0) {
@@ -144,6 +146,16 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
} }
}, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]); }, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
useEffect(() => {
if (
tutorialMode &&
(hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction)
) {
setShowPreviewData(true);
setIsOpen(true); // auto-open drawer
}
}, [tutorialMode, hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
const { darkMode } = useThemeMode(); const { darkMode } = useThemeMode();
const getCaptureTextColumns = captureTextData.length > 0 ? Object.keys(captureTextData[0]) : []; const getCaptureTextColumns = captureTextData.length > 0 ? Object.keys(captureTextData[0]) : [];
@@ -216,6 +228,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
sx={{ sx={{
display: 'flex', display: 'flex',
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: darkMode ? '#080808ff' : '#dee2e6',
backgroundColor: darkMode ? '#080808ff' : '#f8f9fa'
}} }}
> >
{availableTabs.map((tab, index) => ( {availableTabs.map((tab, index) => (
@@ -226,15 +240,15 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
px: 4, px: 4,
py: 2, py: 2,
cursor: 'pointer', cursor: 'pointer',
borderBottom: activeTab === index ? '2px solid' : 'none', // borderBottom: activeTab === index ? '2px solid' : 'none',
borderColor: activeTab === index ? (darkMode ? '#ff00c3' : '#ff00c3') : 'transparent', borderColor: activeTab === index ? (darkMode ? '#ff00c3' : '#ff00c3') : 'transparent',
backgroundColor: activeTab === index ? (darkMode ? '#34404d' : '#e9ecef') : 'transparent', backgroundColor: activeTab === index ? (darkMode ? '#121111ff' : '#e9ecef') : 'transparent',
color: darkMode ? 'white' : 'black', color: darkMode ? 'white' : 'black',
fontWeight: activeTab === index ? 500 : 400, fontWeight: activeTab === index ? 500 : 400,
textAlign: 'center', textAlign: 'center',
position: 'relative', position: 'relative',
'&:hover': { '&:hover': {
backgroundColor: activeTab !== index ? (darkMode ? '#303b49' : '#e2e6ea') : undefined backgroundColor: activeTab !== index ? (darkMode ? '#121111ff' : '#e2e6ea') : undefined
} }
}} }}
> >
@@ -286,8 +300,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
key={index} key={index}
sx={{ sx={{
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6', borderColor: darkMode ? '#080808ff' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa' backgroundColor: darkMode ? '#080808ff' : '#f8f9fa'
}} }}
> >
{field.label} {field.label}
@@ -297,16 +311,16 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableHead> </TableHead>
<TableBody> <TableBody>
{(captureListData[captureListPage]?.data || []) {(captureListData[captureListPage]?.data || [])
.slice(0, Math.min(captureListData[captureListPage]?.limit || 10, 5)) .slice(0, tutorialMode ? (captureListData[captureListPage]?.data?.length || 0) : Math.min(captureListData[captureListPage]?.limit || 10, 5))
.map((row: any, rowIndex: any) => ( .map((row: any, rowIndex: any) => (
<TableRow <TableRow
key={rowIndex} key={rowIndex}
sx={{ sx={{
borderBottom: rowIndex < Math.min( borderBottom: rowIndex < (tutorialMode
(captureListData[captureListPage]?.data?.length || 0), ? (captureListData[captureListPage]?.data?.length || 0)
Math.min(captureListData[captureListPage]?.limit || 10, 5) : Math.min((captureListData[captureListPage]?.data?.length || 0), Math.min(captureListData[captureListPage]?.limit || 10, 5))
) - 1 ? '1px solid' : 'none', ) - 1 ? '1px solid' : 'none',
borderColor: darkMode ? '#3a4453' : '#dee2e6' borderColor: darkMode ? '#080808ff' : '#dee2e6'
}} }}
> >
{Object.values(captureListData[captureListPage]?.fields || {}).map((field: any, colIndex) => ( {Object.values(captureListData[captureListPage]?.fields || {}).map((field: any, colIndex) => (
@@ -317,7 +331,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
py: 2 py: 2
}} }}
> >
{row[field.label]} {typeof row[field.label] === 'object' ? JSON.stringify(row[field.label]) : String(row[field.label] || '')}
</TableCell> </TableCell>
))} ))}
</TableRow> </TableRow>
@@ -377,7 +391,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
)} )}
{(activeTab === availableTabs.findIndex(tab => tab.id === 'captureText') || singleContentType === 'captureText') && captureTextData.length > 0 && ( {(activeTab === availableTabs.findIndex(tab => tab.id === 'captureText') || singleContentType === 'captureText') && captureTextData.length > 0 && (
<Box sx={{ p: 2 }}> <Box sx={{ mt: 2 }}>
<TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}> <TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
<Table> <Table>
<TableHead> <TableHead>
@@ -385,8 +399,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
<TableCell <TableCell
sx={{ sx={{
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6', borderColor: darkMode ? '#080808ff' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa', backgroundColor: darkMode ? '#080808ff' : '#f8f9fa',
}} }}
> >
Label Label
@@ -394,8 +408,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
<TableCell <TableCell
sx={{ sx={{
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6', borderColor: darkMode ? '#080808ff' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa', backgroundColor: darkMode ? '#080808ff' : '#f8f9fa',
}} }}
> >
Value Value
@@ -408,7 +422,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
key={column} key={column}
sx={{ sx={{
borderBottom: index < getCaptureTextColumns.length - 1 ? '1px solid' : 'none', borderBottom: index < getCaptureTextColumns.length - 1 ? '1px solid' : 'none',
borderColor: darkMode ? '#3a4453' : '#dee2e6' borderColor: darkMode ? '#080808ff' : '#dee2e6'
}} }}
> >
<TableCell <TableCell
@@ -426,7 +440,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
py: 2 py: 2
}} }}
> >
{captureTextData[0][column]} {typeof captureTextData[0][column] === 'object' ? JSON.stringify(captureTextData[0][column]) : String(captureTextData[0][column] || '')}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@@ -445,7 +459,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
<Typography variant="h6" gutterBottom align="left"> <Typography variant="h6" gutterBottom align="left">
{t('interpretation_log.messages.successful_training')} {t('interpretation_log.messages.successful_training')}
</Typography> </Typography>
<SidePanelHeader onPreviewClick={() => setShowPreviewData(true)} /> {!tutorialMode && (
<SidePanelHeader onPreviewClick={() => setShowPreviewData(true)} />
)}
</> </>
) : ( ) : (
<Typography variant="h6" gutterBottom align="left"> <Typography variant="h6" gutterBottom align="left">