feat: revamp cap text run ui

This commit is contained in:
Rohit
2025-07-07 22:57:17 +05:30
parent 54a850b0f3
commit c8b8262818

View File

@@ -27,6 +27,7 @@ import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import 'highlight.js/styles/github.css';
import { useTranslation } from "react-i18next";
import { useThemeMode } from "../../context/theme-provider";
interface RunContentProps {
row: Data,
@@ -54,6 +55,8 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
const [legacyColumns, setLegacyColumns] = useState<string[]>([]);
const [isLegacyData, setIsLegacyData] = useState<boolean>(false);
const { darkMode } = useThemeMode();
useEffect(() => {
setTab(tab);
}, [interpretationInProgress]);
@@ -262,8 +265,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
if (!currentData || currentData.length === 0) return null;
const downloadData = isPaginatedList ? currentData : data;
const downloadColumns = isPaginatedList ? currentColumns : columns;
const isSchemaData = title.toLowerCase().includes('text') || title.toLowerCase().includes('schema');
return (
<Accordion defaultExpanded sx={{ mb: 2 }}>
@@ -283,7 +285,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<Box>
<Button
component="a"
onClick={() => downloadJSON(downloadData, jsonFilename)}
onClick={() => downloadJSON(currentData, jsonFilename)}
sx={{
color: '#FF00C3',
textTransform: 'none',
@@ -297,12 +299,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
}
}}
>
Download as JSON
{t('run_content.captured_data.download_json', 'Download as JSON')}
</Button>
<Button
component="a"
onClick={() => downloadCSV(downloadData, downloadColumns, csvFilename)}
onClick={() => downloadCSV(currentData, currentColumns, csvFilename)}
sx={{
color: '#FF00C3',
textTransform: 'none',
@@ -315,7 +317,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
}
}}
>
Download as CSV
{t('run_content.captured_data.download_csv', 'Download as CSV')}
</Button>
</Box>
@@ -338,6 +340,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
onClick={() => navigateListTable('next')}
disabled={currentListIndex === listData.length - 1}
sx={{
borderColor: '#FF00C3',
color: currentListIndex === listData.length - 1 ? 'gray' : '#FF00C3',
'&.Mui-disabled': {
borderColor: 'rgba(0, 0, 0, 0.12)'
@@ -353,21 +356,66 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{(isPaginatedList ? currentColumns : columns).map((column) => (
<TableCell key={column}>{column}</TableCell>
))}
{isSchemaData ? (
<>
<TableCell
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
Label
</TableCell>
<TableCell
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
Value
</TableCell>
</>
) : (
(isPaginatedList ? currentColumns : columns).map((column) => (
<TableCell
key={column}
sx={{
borderBottom: '1px solid',
borderColor: darkMode ? '#3a4453' : '#dee2e6',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
}}
>
{column}
</TableCell>
))
)}
</TableRow>
</TableHead>
<TableBody>
{(isPaginatedList ? currentData : data).map((row, index) => (
<TableRow key={index}>
{(isPaginatedList ? currentColumns : columns).map((column) => (
<TableCell key={column}>
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
{isSchemaData ? (
currentColumns.map((column) => (
<TableRow key={column}>
<TableCell sx={{ fontWeight: 500 }}>
{column}
</TableCell>
))}
</TableRow>
))}
<TableCell>
{currentData[0][column] === undefined || currentData[0][column] === "" ? "-" : currentData[0][column]}
</TableCell>
</TableRow>
))
) : (
currentData.map((row, index) => (
<TableRow key={index}>
{(isPaginatedList ? currentColumns : columns).map((column) => (
<TableCell key={column}>
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
</TableCell>
))}
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>