feat: buttons ui change, rm render expand

src/components/run/RunContent.tsx

@@ -284,34 +284,44 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
         </AccordionSummary>
         <AccordionDetails>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
-            <ButtonGroup size="small" variant="outlined">
+            <Box>
-              <Button
+              <Button 
-                startIcon={<DownloadIcon />}
+                component="a"
-                onClick={() => {
+                onClick={() => downloadJSON(data, jsonFilename)}
-                  if (isPaginatedList) {
+                sx={{ 
-                    downloadCSV(currentData, currentColumns, `list_table_${currentListIndex + 1}.csv`);
+                  color: '#FF00C3', 
-                  } else {
+                  textTransform: 'none',
-                    downloadCSV(data, columns, csvFilename);
+                  mr: 2,
+                  p: 0,
+                  minWidth: 'auto',
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                    textDecoration: 'underline'
                   }
                 }}
-                sx={{ borderColor: '#FF00C3', color: '#FF00C3' }}
               >
-                CSV
+                Download as JSON
               </Button>
-              <Button
+
-                startIcon={<DataObjectIcon />}
+              <Button 
-                onClick={() => {
+                component="a"
-                  if (isPaginatedList) {
+                onClick={() => downloadCSV(data, columns, csvFilename)}
-                    downloadJSON(currentData, `list_table_${currentListIndex + 1}.json`);
+                sx={{ 
-                  } else {
+                  color: '#FF00C3', 
-                    downloadJSON(data, jsonFilename);
+                  textTransform: 'none',
+                  p: 0,
+                  minWidth: 'auto',
+                  backgroundColor: 'transparent',
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                    textDecoration: 'underline'
                   }
                 }}
-                sx={{ borderColor: '#FF00C3', color: '#FF00C3' }}
               >
-                JSON
+                Download as CSV
               </Button>
-            </ButtonGroup>
+            </Box>
 
             {isPaginatedList && listData.length > 1 && (
               <ButtonGroup size="small">
@@ -370,132 +380,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     );
   };
 
-  const renderExpandedView = (dataTypeWithIndex: string) => {
-    if (expandedView !== dataTypeWithIndex) return null;
-
-    let data: any[] = [];
-    let columns: string[] = [];
-    let title = "";
-    let csvFilename = "";
-    let jsonFilename = "";
-
-    if (dataTypeWithIndex.startsWith('list-')) {
-      const indexStr = dataTypeWithIndex.split('-')[1];
-      const index = parseInt(indexStr, 10);
-
-      if (index >= 0 && index < listData.length) {
-        data = listData[index];
-        columns = listColumns[index];
-        title = `${t('run_content.captured_data.list_title')} - Table ${index + 1}`;
-        csvFilename = `list_table_${index + 1}.csv`;
-        jsonFilename = `list_table_${index + 1}.json`;
-      }
-    } else {
-      switch (dataTypeWithIndex) {
-        case 'schema':
-          data = schemaData;
-          columns = schemaColumns;
-          title = t('run_content.captured_data.schema_title');
-          csvFilename = 'schema_data.csv';
-          jsonFilename = 'schema_data.json';
-          break;
-        case 'list':
-          if (listData.length > 0 && listColumns.length > 0) {
-            data = listData[currentListIndex];
-            columns = listColumns[currentListIndex];
-          }
-          title = t('run_content.captured_data.list_title');
-          csvFilename = 'list_data.csv';
-          jsonFilename = 'list_data.json';
-          break;
-        case 'legacy':
-          data = legacyData;
-          columns = legacyColumns;
-          title = t('run_content.captured_data.title');
-          csvFilename = 'data.csv';
-          jsonFilename = 'data.json';
-          break;
-      }
-    }
-
-    return (
-      <Box sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.7)',
-        zIndex: 9999,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 4
-      }}>
-        <Box sx={{
-          bgcolor: 'background.paper',
-          borderRadius: 1,
-          boxShadow: 24,
-          p: 4,
-          width: '90%',
-          maxWidth: '1200px',
-          maxHeight: '90vh',
-          overflow: 'auto'
-        }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
-            <Typography variant="h5">{title}</Typography>
-            <Box>
-              <ButtonGroup variant="outlined" size="small" sx={{ mr: 2 }}>
-                <Button
-                  onClick={() => downloadCSV(data, columns, csvFilename)}
-                  startIcon={<DownloadIcon />}
-                >
-                  CSV
-                </Button>
-                <Button
-                  onClick={() => downloadJSON(data, jsonFilename)}
-                  startIcon={<DataObjectIcon />}
-                >
-                  JSON
-                </Button>
-              </ButtonGroup>
-              <Button
-                variant="outlined"
-                color="secondary"
-                onClick={() => setExpandedView(null)}
-              >
-                Close
-              </Button>
-            </Box>
-          </Box>
-
-          <TableContainer component={Paper} sx={{ maxHeight: 'calc(90vh - 150px)' }}>
-            <Table stickyHeader aria-label="expanded data table">
-              <TableHead>
-                <TableRow>
-                  {columns.map((column) => (
-                    <TableCell key={column}>{column}</TableCell>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {data.map((row, index) => (
-                  <TableRow key={index}>
-                    {columns.map((column) => (
-                      <TableCell key={column}>
-                        {row[column] === undefined || row[column] === "" ? "-" : row[column]}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </Box>
-      </Box>
-    );
-  };
-
   const hasData = schemaData.length > 0 || listData.length > 0 || legacyData.length > 0;
   const hasScreenshots = row.binaryOutput && Object.keys(row.binaryOutput).length > 0;
 
@@ -613,11 +497,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                   )}
                 </>
               )}
-
-              {renderExpandedView('schema')}
-              {renderExpandedView('legacy')}
-
-              {listData.map((_, index) => renderExpandedView(`list-${index}`))}
             </Box>
           )}
 
@@ -630,8 +509,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                   id="screenshot-header"
                 >
                   <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <ImageIcon sx={{ color: '#FF00C3' }} />
+                    <Typography variant='h6'>
-                    <Typography variant='h6' sx={{ ml: 2 }}>
                       {t('run_content.captured_screenshot.title', 'Screenshots')}
                     </Typography>
                   </Box>
@@ -639,11 +517,20 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 <AccordionDetails>
                   <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
                     <Button
-                      startIcon={<DownloadIcon />}
+                      component="a"
                       href={row.binaryOutput[screenshotKeys[currentScreenshotIndex]]}
                       download={screenshotKeys[currentScreenshotIndex]}
-                      sx={{ borderColor: '#FF00C3', color: '#FF00C3', borderRadius: 1 }}
+                      sx={{ 
-                      variant="outlined"
+                        color: '#FF00C3', 
+                        textTransform: 'none',
+                        p: 0,
+                        minWidth: 'auto',
+                        backgroundColor: 'transparent',
+                        '&:hover': {
+                          backgroundColor: 'transparent',
+                          textDecoration: 'underline'
+                        }
+                      }}
                     >
                       {t('run_content.captured_screenshot.download', 'Download')}
                     </Button>