Merge branch 'main' into route-connection

.github/workflows/build-on-pr.yml

@@ -0,0 +1,25 @@
+name: Build on Pull Request
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20' # Use the Node.js version you're working with
+        cache: 'npm' # Use the Node.js version you're working with
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build
+      run: npm run build

src/components/DataTable.tsx

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

src/components/FileUpload.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Modal, Button, Notification, FileInput } from '@mantine/core';
+import '@/css/FileUpload.css';
+
+interface FileUploadProps {
+  uploadUrl: string;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (files: File[]) => {
+    if (files.length > 0) {
+      setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
+    }
+  };
+
+  const handleUpload = async () => {
+    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);
+
+        setSelectedFiles([]);
+        handleClose();
+      } catch (error) {
+        console.error('Upload failed:', error);
+        setError('An error occurred while uploading. Please try again.');
+      }
+    } else {
+      setError('Please select files to upload.');
+    }
+  };
+
+  const toggleModal = () => {
+    setShowModal(!showModal);
+  };
+
+  const handleClose = () => {
+    setShowModal(false);
+    setSelectedFiles([]);
+    setError(null);
+  };
+
+  return (
+    <div>
+      <Button onClick={toggleModal}>Upload Files</Button>
+
+      <Modal
+        opened={showModal}
+        onClose={handleClose}
+        title="Select files to upload"
+        centered
+        style={{ textAlign: "center" }} 
+      >
+        <div className="files">
+          <FileInput
+            multiple
+            accept=".mcap"
+            onChange={handleFileChange}
+            placeholder="Select files to upload"
+            label="Choose files"
+            style={{ display: 'block', margin: '0 auto' }}
+          />
+          {selectedFiles.length > 0 && (
+            <div>
+              <h3>Chosen Files:</h3>
+              <ul>
+                {selectedFiles.map((file, index) => (
+                  <li key={index}>{file.name}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
+
+        {error && (
+          <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+            {error}
+          </Notification>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default FileUpload;

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 import "@mantine/core/styles.css";
 import "@/css/Navbar.css";
 import { NavLink } from "react-router-dom";
+import FileUpload from "@/components/FileUpload"
 
 const mainLinksData = [
   { name: "Files", url: "/" },
@@ -25,6 +26,10 @@ export default function Navbar() {
         className="navbar-icon"
       />
       {links}
+
+      {/* Once POST API is out -- Currently WIP */}
+      <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload"/>
+
       {/* Optionally render active link or other content here */}
       <h3 className="hytechName">{hytechName}</h3>
     </nav>

src/components/PreviewCard.tsx

@@ -226,7 +226,6 @@ export const SchemaTable = () => {
           handleSearch(e.target.value);
         }}
       />
-
       <ScrollArea style={{ height: 200, width: 250 }}>
         {" "}
         {/* Scrollable area with height limit */}

src/components/SchemaSearch.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { Autocomplete, Button } from "@mantine/core";
+import "@/css/SchemaSearch.css";
+
+interface SchemaSearch {
+  schemas: string[];
+}
+
+const SchemaSearch: React.FC<SchemaSearch> = ({ schemas }) => {
+  const [value, setValue] = useState<string>("");
+  const [selectedSchema, setSelected] = useState<string[]>([]);
+
+  const filteredSchemas = schemas.filter((schema) =>
+    schema.toLowerCase().includes(value.toLowerCase()),
+  );
+
+  const addSchema = (newSchema: string) => {
+    if (!selectedSchema.includes(newSchema)) {
+      setSelected([...selectedSchema, newSchema]);
+    } else {
+      alert("Schema already selected!");
+    }
+  };
+
+  const clearSchema = () => {
+    setSelected([]);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter" && filteredSchemas.length > 0) {
+      setValue(filteredSchemas[0]);
+      addSchema(filteredSchemas[0]);
+    }
+  };
+
+  return (
+    <div>
+      <Autocomplete
+        label="Search by Schema"
+        placeholder="Start typing a schema name"
+        data={filteredSchemas}
+        value={value}
+        onChange={setValue}
+        onKeyDown={handleKeyDown}
+      />
+      <br />
+      {selectedSchema.length > 0 && (
+        <div>
+          <label>Selected Schema</label>
+          <ul>
+            {selectedSchema.map((str, index) => (
+              <li key={index}>{str}</li>
+            ))}
+          </ul>
+          <Button className="cancel-button" onClick={clearSchema}>
+            Cancel
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SchemaSearch;

src/components/SearchBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { eventType, location } from "@/data/dataFilters";
 import "@/css/SearchBar.css";
+import SchemaSearch from "@/components/SchemaSearch";
 
 interface SearchBarWithFilterProps {
   setFilteredData: React.Dispatch<
@@ -34,6 +35,8 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
   //   return true;
   // };
 
+  const schemas = ["Schema1", "Schema2", "Schema3", "Schema4"];
+
   // Filter logic
   // const handleSearch = () => {
   //   const filtered = data.filter((item) => {
@@ -171,6 +174,8 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
               placeholder="Filter by date"
             />
           </label>
+
+          <SchemaSearch schemas={schemas} />
         </div>
       </div>
     </div>

src/css/FileUpload.css

@@ -0,0 +1,30 @@
+button {
+    padding: 10px 10px;
+    margin: 3px 3px;
+    border: none;
+    border-radius: 5px;
+    background-color:  #b39e63;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color:  #d4bc79;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+h3 {
+    margin-top: 20px;
+}
+
+.files {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+}

src/css/PreviewCard.css

@@ -23,3 +23,11 @@
     height: auto; /* Maintains aspect ratio */
     margin: 20px;
 }
+
+@media (max-width: 600px) {
+    .previewFileButtons {
+        display: flex;
+        flex-direction: column;
+
+    }
+  }

src/css/Root.css

@@ -8,31 +8,33 @@
     background-color: #f0f0f0;
     width: 100%;
     position: fixed;
-    /*so table doesn't cover it - make sure it stays on top of other elements*/
     z-index: 1000;
 }
 
-.search-bar {
-    background-color: #e0e0e0;
-    border-radius: 0;
-}
-
 .main-content {
     display: flex;
     flex: 1;
+    overflow: hidden;
     height: 500px;
     padding-top: 50px;
     flex-direction: column;
 }
 
 .results-container {
     display: flex;
+    flex: 1;
+    overflow: hidden;
     flex-direction: row;
 }
 
+.table-contain-result {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding-bottom: 10px;
+  }
+
 .footer {
     text-align: center;
     background: #9b8b5de5;
     color: white;
 }
-