upload-preview-button

liberty-rising · Dec 21, 2023 · facbb23 · facbb23
1 parent 9927be1
commit facbb23
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 14 deletions.
diff --git a/backend/routes/data_profile_routes.py b/backend/routes/data_profile_routes.py
@@ -1,5 +1,7 @@
 from fastapi import APIRouter, HTTPException, Depends
 
+# from starlette.responses import JSONResponse
+
 from databases.database_manager import DatabaseManager
 from databases.data_profile_manager import DataProfileManager
 from models.data_profile import (
@@ -55,3 +57,23 @@ async def get_data_profile(
         if data_profile is None:
             raise HTTPException(status_code=404, detail="Data Profile not found")
         return data_profile
+
+
+# @data_profile_router.post("/data-profiles/preview-endpoint/")
+# async def preview_data_profile(
+#     file: UploadFile = File(...),
+#     instructions: str = Form(...),
+#     current_user: User = Depends(get_current_user),
+# ):
+#     # Read the file's content
+#     file_content = await file.read()
+
+#     # Process the file content, perhaps to convert it into a string
+#     # if it's a binary file, like a PDF or an image.
+#     text_content = process_file_content(file_content)
+
+#     # Use Langchain to send a request to your LLM
+#     # Here you can customize the request as needed
+#     response = llm.generate(text_content, instructions)
+
+#     return JSONResponse(content=response)
diff --git a/frontend/src/pages/data-profiling/DataProfiling.jsx b/frontend/src/pages/data-profiling/DataProfiling.jsx
@@ -1,12 +1,31 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
-import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Link, Button } from '@mui/material';
+import {
+  Box,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Link,
+  Button,
+  TextField
+} from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../../utils/constants';
 
 function DataProfilingPage() {
   const [dataProfiles, setDataProfiles] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedFileName, setSelectedFileName] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewData, setPreviewData] = useState(null); 
   const navigate = useNavigate();
+  const fileInputRef = useRef(null);
 
   useEffect(() => {
     axios.get(`${API_URL}data-profiles/`)
@@ -21,25 +40,129 @@ function DataProfilingPage() {
       .catch(error => console.error('Error fetching data profiles:', error));
   }, []);
 
-  const handleProfileClick = (dataProfileId) => {
-    navigate(`/data-profiling/${dataProfileId}`);
+  const handleProfileCreate = () => {
+    navigate('/data-profiling/create');
   };
 
-  const handleCreateNewProfile = () => {
-    navigate('/data-profiling/create');
+  const handleUploadClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      setSelectedFileName(file.name);
+    }
+  };
+
+  const handleInstructionsChange = (event) => {
+    setInstructions(event.target.value);
+  };
+
+  const handleUpload = () => {
+    if (selectedFile) {
+      setIsUploading(true);
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+      formData.append('instructions', instructions);
+
+      axios.post(`${API_URL}upload-url`, formData)
+        .then(response => {
+          console.log(response);
+          setIsUploading(false);
+          // Reset states after upload
+          setSelectedFile(null);
+          setSelectedFileName('');
+          setInstructions('');
+        })
+        .catch(error => {
+          console.error('Error uploading file:', error);
+          setIsUploading(false);
+        });
+    }
+  };
+
+  const handlePreview = () => {
+    if (selectedFile && instructions) {
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+      formData.append('instructions', instructions);
+
+      axios.post(`${API_URL}data-profiles/preview-endpoint/`, formData, { 
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+        .then(response => {
+          setPreviewData(response.data); // Store the preview data
+        })
+        .catch(error => console.error('Error on preview:', error));
+    }
   };
 
   return (
     <Box>
       <Typography variant="h4" gutterBottom>🔍 Data Profiling</Typography>
-      <Button 
-        variant="contained" 
-        color="primary" 
-        onClick={handleCreateNewProfile} 
-        sx={{ mb: 2 }}
-      >
-        Create New Data Profile
-      </Button>
+      <Box display="flex" justifyContent="space-between" mb={2}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleProfileCreate}
+        >
+          Create New Data Profile
+        </Button>
+
+        <Button
+          variant="contained"
+          onClick={handleUploadClick}
+          disabled={isUploading}
+          sx={{ bgcolor: isUploading ? 'secondary.main' : 'grey.500' }}
+        >
+          Upload File
+        </Button>
+
+        <Button
+          variant="contained"
+          color="info"
+          onClick={handlePreview}
+          disabled={!selectedFile || !instructions} // Disable if no file or instructions
+        >
+          Preview
+        </Button>
+
+        {/* Hidden File Input */}
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      </Box>
+
+      <TextField
+        label="Instructions"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={instructions}
+        onChange={handleInstructionsChange}
+        helperText="Write any special instructions here"
+      />
+
+      {selectedFileName && (
+        <Typography variant="subtitle1" gutterBottom>
+          File selected: {selectedFileName}
+        </Typography>
+      )}
+
+      {/* Display preview data if available */}
+      {previewData && (
+        <Typography variant="subtitle1" gutterBottom>
+          Preview Data: {JSON.stringify(previewData)}
+        </Typography>
+      )}
+
       <TableContainer component={Paper}>
         <Table>
           <TableHead>