Spaces:
Runtime error
Runtime error
File size: 4,861 Bytes
b68f453 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
import { Backdrop, Box, Button, CircularProgress, Container, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import React, { useContext, useEffect, useState } from "react";
import { TopicsContext } from "./UploadFileContext";
const bunkaDocs = "bunka_docs.json";
const bunkaTopics = "bunka_topics.json";
const { REACT_APP_API_ENDPOINT } = process.env;
function DocsView() {
const [docs, setDocs] = useState(null);
const [topics, setTopics] = useState(null);
const { data: apiData, isLoading } = useContext(TopicsContext);
useEffect(() => {
if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
// Fetch the JSON data locally
fetch(`/${bunkaDocs}`)
.then((response) => response.json())
.then((localData) => {
setDocs(localData);
// Fetch the topics data and merge it with the existing data
fetch(`/${bunkaTopics}`)
.then((response) => response.json())
.then((topicsData) => {
// Set the topics data with the existing data
setTopics(topicsData);
})
.catch((error) => {
console.error("Error fetching topics data:", error);
});
})
.catch((error) => {
console.error("Error fetching JSON data:", error);
});
} else {
// Call the function to create the scatter plot with the data provided by TopicsContext
setDocs(apiData.docs);
setTopics(apiData.topics);
}
}, [apiData]);
const docsWithTopics =
docs && topics
? docs.map((doc) => ({
...doc,
topic_name: topics.find((topic) => topic.topic_id === doc.topic_id)?.name || "Unknown",
}))
: [];
const downloadCSV = () => {
// Create a CSV content string from the data
const csvContent = `data:text/csv;charset=utf-8,${[
["Doc ID", "Topic ID", "Topic Name", "Content"], // CSV header
...docsWithTopics.map((doc) => [doc.doc_id, doc.topic_id, doc.topic_name, doc.content]), // CSV data
]
.map((row) => row.map((cell) => `"${cell}"`).join(",")) // Wrap cells in double quotes
.join("\n")}`; // Join rows with newline
// Create a Blob containing the CSV data
const blob = new Blob([csvContent], { type: "text/csv" });
// Create a download URL for the Blob
const url = URL.createObjectURL(blob);
// Create a temporary anchor element to trigger the download
const a = document.createElement("a");
a.href = url;
a.download = "docs.csv"; // Set the filename for the downloaded file
a.click();
// Revoke the URL to free up resources
URL.revokeObjectURL(url);
};
return (
<Container fixed>
<div className="docs-view">
<h2>Data</h2>
{isLoading ? (
<Backdrop open={isLoading} style={{ zIndex: 9999 }}>
<CircularProgress color="primary" />
</Backdrop>
) : (
<div>
<Button variant="contained" color="primary" onClick={downloadCSV} sx={{ marginBottom: "1em" }}>
Download CSV
</Button>
<Box
sx={{
height: "1000px", // Set the height of the table
overflow: "auto", // Add scroll functionality
}}
>
<TableContainer component={Paper}>
<Table>
<TableHead
sx={{
backgroundColor: "lightblue", // Set background color
position: "sticky", // Make the header sticky
top: 0, // Stick to the top
}}
>
<TableRow>
<TableCell>Doc ID</TableCell>
<TableCell>Topic ID</TableCell>
<TableCell>Topic Name</TableCell>
<TableCell>Content</TableCell>
</TableRow>
</TableHead>
<TableBody>
{docsWithTopics.map((doc, index) => (
<TableRow
key={doc.doc_id}
sx={{
borderBottom: "1px solid lightblue", // Add light blue border
}}
>
<TableCell>{doc.doc_id}</TableCell>
<TableCell>{doc.topic_id}</TableCell>
<TableCell>{doc.topic_name}</TableCell>
<TableCell>{doc.content}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</div>
)}
</div>
</Container>
);
}
export default DocsView;
|