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

feat: run content

Browse Source
This commit is contained in:
karishmas6
2024-09-27 23:40:01 +05:30
parent 2d886a8259
commit b68d456519
1 changed files with 132 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/molecules/RunContent.tsx
View File

@@ -7,7 +7,7 @@ import { TabPanel, TabContext } from "@mui/lab";
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import ImageIcon from '@mui/icons-material/Image'; import ImageIcon from '@mui/icons-material/Image';
import ArticleIcon from '@mui/icons-material/Article'; import ArticleIcon from '@mui/icons-material/Article';
import {Buffer} from 'buffer'; import { Buffer } from 'buffer';
import { useEffect } from "react"; import { useEffect } from "react";
import AssignmentIcon from '@mui/icons-material/Assignment'; import AssignmentIcon from '@mui/icons-material/Assignment';
@@ -19,7 +19,7 @@ interface RunContentProps {
abortRunHandler: () => void, abortRunHandler: () => void,
} }
export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef, abortRunHandler}: RunContentProps) => { export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRef, abortRunHandler }: RunContentProps) => {
const [tab, setTab] = React.useState<string>('log'); const [tab, setTab] = React.useState<string>('log');
useEffect(() => { useEffect(() => {
@@ -37,7 +37,8 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
</Tabs> </Tabs>
</Box> </Box>
<TabPanel value='log'> <TabPanel value='log'>
<Box sx={{ margin: 1, <Box sx={{
margin: 1,
background: '#19171c', background: '#19171c',
overflowY: 'scroll', overflowY: 'scroll',
overflowX: 'scroll', overflowX: 'scroll',
@@ -49,8 +50,8 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
<Highlight className="javascript"> <Highlight className="javascript">
{interpretationInProgress ? currentLog : row.log} {interpretationInProgress ? currentLog : row.log}
</Highlight> </Highlight>
<div style={{ float:"left", clear: "both" }} <div style={{ float: "left", clear: "both" }}
ref={logEndRef}/> ref={logEndRef} />
</div> </div>
</Box> </Box>
{interpretationInProgress ? <Button {interpretationInProgress ? <Button
@@ -60,9 +61,9 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
Stop Stop
</Button> : null} </Button> : null}
</TabPanel> </TabPanel>
<TabPanel value='input' sx={{width: '700px'}}> <TabPanel value='input' sx={{ width: '700px' }}>
<Typography variant='h6' sx={{display:'flex', alignItems:'center'}}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<SettingsIcon sx={{marginRight: '15px'}}/> <SettingsIcon sx={{ marginRight: '15px' }} />
Interpreter settings Interpreter settings
</Typography> </Typography>
{ {
@@ -70,14 +71,14 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
if (setting === 'params') { if (setting === 'params') {
return ( return (
<div key={`settings-${setting}-${index}`}> <div key={`settings-${setting}-${index}`}>
<Typography variant='h6' sx={{display:'flex', alignItems:'center'}} key={`setting-${index}`}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }} key={`setting-${index}`}>
<AssignmentIcon sx={{marginRight: '15px'}}/> <AssignmentIcon sx={{ marginRight: '15px' }} />
Recording parameters Recording parameters
</Typography> </Typography>
{ {
Object.keys(row.interpreterSettings.params).map((param, index) => { Object.keys(row.interpreterSettings.params).map((param, index) => {
return ( return (
<Typography key={`recording-params-item-${index}`} sx={{margin: '10px'}}> <Typography key={`recording-params-item-${index}`} sx={{ margin: '10px' }}>
{/*@ts-ignore*/} {/*@ts-ignore*/}
{param}: {row.interpreterSettings.params[param].toString()} {param}: {row.interpreterSettings.params[param].toString()}
</Typography> </Typography>
@@ -88,7 +89,7 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
) )
} }
return ( return (
<Typography key={`interpreter-settings-item-${index}`} sx={{margin: '10px'}}> <Typography key={`interpreter-settings-item-${index}`} sx={{ margin: '10px' }}>
{/*@ts-ignore*/} {/*@ts-ignore*/}
{setting}: {row.interpreterSettings[setting].toString()} {setting}: {row.interpreterSettings[setting].toString()}
</Typography> </Typography>
@@ -96,24 +97,24 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
}) })
} }
</TabPanel> </TabPanel>
<TabPanel value='output' sx={{width: '700px'}}> <TabPanel value='output' sx={{ width: '700px' }}>
{ !row || !row.serializableOutput || !row.binaryOutput {!row || !row.serializableOutput || !row.binaryOutput
|| (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0) || (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
? <Typography>The output is empty.</Typography> : null } ? <Typography>The output is empty.</Typography> : null}
{row.serializableOutput && {row.serializableOutput &&
Object.keys(row.serializableOutput).length !== 0 && Object.keys(row.serializableOutput).length !== 0 &&
<div> <div>
<Typography variant='h6' sx={{display:'flex', alignItems:'center'}}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ArticleIcon sx={{marginRight: '15px'}}/> <ArticleIcon sx={{ marginRight: '15px' }} />
Serializable output</Typography> Serializable output</Typography>
{ Object.keys(row.serializableOutput).map((key) => { {Object.keys(row.serializableOutput).map((key) => {
return ( return (
<div key={`number-of-serializable-output-${key}`}> <div key={`number-of-serializable-output-${key}`}>
<Typography> <Typography>
{key}: {key}:
<a href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput[key], null, 2)}`} <a href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput[key], null, 2)}`}
download={key} style={{margin:'10px'}}>Download</a> download={key} style={{ margin: '10px' }}>Download</a>
</Typography> </Typography>
<Box sx={{ <Box sx={{
width: 'fit-content', width: 'fit-content',
@@ -134,10 +135,10 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
{row.binaryOutput {row.binaryOutput
&& Object.keys(row.binaryOutput).length !== 0 && && Object.keys(row.binaryOutput).length !== 0 &&
<div> <div>
<Typography variant='h6' sx={{display:'flex', alignItems:'center'}}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ImageIcon sx={{marginRight:'15px'}}/> <ImageIcon sx={{ marginRight: '15px' }} />
Binary output</Typography> Binary output</Typography>
{ Object.keys(row.binaryOutput).map((key) => { {Object.keys(row.binaryOutput).map((key) => {
try { try {
const binaryBuffer = JSON.parse(row.binaryOutput[key].data); const binaryBuffer = JSON.parse(row.binaryOutput[key].data);
const b64 = Buffer.from(binaryBuffer.data).toString('base64'); const b64 = Buffer.from(binaryBuffer.data).toString('base64');
@@ -148,10 +149,10 @@ export const RunContent = ({row, currentLog, interpretationInProgress, logEndRef
<Typography key={`binary-output-key-${key}`}> <Typography key={`binary-output-key-${key}`}>
{key}: {key}:
<a href={`data:${row.binaryOutput[key].mimetype};base64,${b64}`} <a href={`data:${row.binaryOutput[key].mimetype};base64,${b64}`}
download={key} style={{margin:'10px'}}>Download</a> download={key} style={{ margin: '10px' }}>Download</a>
</Typography> </Typography>
<img key={`image-${key}`} src={`data:${row.binaryOutput[key].mimetype};base64,${b64}`} <img key={`image-${key}`} src={`data:${row.binaryOutput[key].mimetype};base64,${b64}`}
alt={key} height='auto' width='700px'/> alt={key} height='auto' width='700px' />
</Box> </Box>
) )
} catch (e) { } catch (e) {