Scroll UI

src/App.tsx

@@ -0,0 +1,45 @@
+import "@mantine/core/styles.css";
+import { MantineProvider } from "@mantine/core";
+import { theme } from "@/theme";
+import { data } from "@/data/sampledata";
+import { useState } from "react";
+import Navbar from "@/components/Navbar";
+import SearchBar from "@/components/SearchBar";
+import "@/css/App.css";
+import DataTable from "@/components/DataTable";
+import PreviewCard from "@/components/PreviewCard";
+
+export default function App() {
+  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
+
+  return (
+    <MantineProvider theme={theme}>
+      <div className="app-container">
+        <header className="navbar">
+          <Navbar />
+        </header>
+
+        <div className="main-content static">
+          <div className="results-container">
+
+            <div className="table-contain-result scrollable-container">
+              <div className="scrollable">
+                <DataTable data={filteredData} />
+              </div>
+            </div>
+
+            <div className="search-container scrollable">
+              <SearchBar setFilteredData={setFilteredData}/>
+            </div>
+
+          </div>
+          <div className="preview-contain-result">
+            <PreviewCard />
+          </div>
+        </div>
+      </div>
+
+      {/* <PreviewCard /> */}
+    </MantineProvider>
+  );
+}

src/components/DataTable.tsx

@@ -64,7 +64,11 @@ export default function DataTable({
     ))
   );
   return (
-    <Table.ScrollContainer h="100%" minWidth={800} style={{ overflowY: 'auto' }}>
+    <Table.ScrollContainer
+      h="100%"
+      minWidth={800}
+      style={{ overflowY: "auto" }}
+    >
       <Table
         stickyHeader
         highlightOnHover={data && data.length > 0}

src/components/FileUpload.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { Modal, Button, Notification, FileInput } from '@mantine/core';
-import '@/css/FileUpload.css';
+import React, { useState } from "react";
+import { Modal, Button, Notification, FileInput } from "@mantine/core";
+import "@/css/FileUpload.css";
 
 interface FileUploadProps {
   uploadUrl: string;
@@ -22,6 +22,24 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     setError(null);
     setSuccess(null)
     if (selectedFiles.length > 0) {
+      const formData = new FormData();
+      selectedFiles.forEach((file) => {
+        formData.append("files", file);
+      });
+
+      try {
+        const response = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          setError("Upload failed. Network response was not ok.");
+          return;
+        }
+
+        const data = await response.json();
+        console.log("Upload successful:", data);
       try {
         const formData = new FormData();
         selectedFiles.forEach(file => {
@@ -54,11 +72,12 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
 
         setSelectedFiles([]);
       } catch (error) {
-        console.error('Upload failed:', error);
-        setError('An error occurred while uploading. Please try again.');
+        console.error("Upload failed:", error);
+        setError("An error occurred while uploading. Please try again.");
       }
-    } else {
-      setError('Please select files to upload.');
+    } catch (error) {
+      setError("Please select files to upload.");
+    }
     }
   };
 
@@ -82,7 +101,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
         onClose={handleClose}
         title="Select files to upload"
         centered
-        style={{ textAlign: "center" }} 
+        style={{ textAlign: "center" }}
       >
         <div className="files">
           <FileInput
@@ -91,7 +110,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             onChange={handleFileChange}
             placeholder="Select files to upload"
             label="Choose files"
-            style={{ display: 'block', margin: '0 auto' }}
+            style={{ display: "block", margin: "0 auto" }}
           />
           {selectedFiles.length > 0 && (
             <div>
@@ -105,14 +124,22 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
           )}
         </div>
 
+        <Button onClick={handleUpload} style={{ marginTop: 10 }}>
+          Upload
+        </Button>
+
         <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
         {success && (
           <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
             {success}
           </Notification>
         )}
         {error && (
-          <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+          <Notification
+            color="red"
+            onClose={() => setError(null)}
+            style={{ marginTop: 10 }}
+          >
             {error}
           </Notification>
         )}

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
 import "@/css/Navbar.css";
 import { NavLink } from "react-router-dom";
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 
 const mainLinksData = [
   { name: "Files", url: "/" },
@@ -27,6 +27,7 @@ export default function Navbar() {
       />
       {links}
 
+      {/* Once POST API is out -- Currently WIP */}
       <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}

src/components/PreviewCard.tsx

@@ -71,6 +71,63 @@
           <SchemaTable></SchemaTable>
         </Grid.Col>
         <Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="md" fw={700}>
+              run 2024-18-10.mcap
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Date:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              Fri, Oct 18, 2024
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Time:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              12:24:02 PM
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Location:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              MRDC
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Sensors:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              aero_sensor_1
+            </Text>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              padding: 20,
+              gap: "10px",
+            }}
+          >
+            <div className="previewFileButtons">
+              <DownloadButton buttonText="MAT" />
+              <DownloadButton buttonText="MCAP" />
+            </div>
+          </div>
           {selectedData ? (
             <>
               <PreviewDataDiv name={getFileNameWithoutExtension(selectedData.mcap_files[0].file_name)} val={""} />

src/css/Root.css

@@ -1,5 +1,6 @@
 .app-container {
     height: 100vh;
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -12,6 +13,8 @@
 }
 
 .main-content {
+    height: 100vh;
+    width: 100%;
     display: flex;
     flex: 1;
     overflow: hidden;
@@ -25,16 +28,46 @@
     flex: 1;
     overflow: hidden;
     flex-direction: row;
+    height: 70%;
+    flex-shrink: 0;
 }
 
 .table-contain-result {
     flex-grow: 1;
     overflow-y: auto;
     padding-bottom: 10px;
+    width: 80%;
+    min-width: 80%;
+    overflow: hidden;
+    word-wrap: break-word; 
+    word-break: break-word;
   }
 
 .footer {
     text-align: center;
     background: #9b8b5de5;
     color: white;
 }
+
+.static {
+    position: fixed;
+}
+
+.scrollable {
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.scrollable-container {
+    overflow-y: auto;
+}
+
+.preview-contain-result {
+    z-index: 1000;
+}
+
+.search-container {
+    width: auto;
+    display: flex;
+    justify-content: center;
+}