From c8f6c9fe4941185c285dcd624429ee79ccea7ee6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:24:41 +0000 Subject: [PATCH 01/10] Bump cookie and express Bumps [cookie](https://github.com/jshttp/cookie) and [express](https://github.com/expressjs/express). These dependencies needed to be updated together. Updates `cookie` from 0.6.0 to 0.7.1 - [Release notes](https://github.com/jshttp/cookie/releases) - [Commits](https://github.com/jshttp/cookie/compare/v0.6.0...v0.7.1) Updates `express` from 4.21.0 to 4.21.1 - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/4.21.1/History.md) - [Commits](https://github.com/expressjs/express/compare/4.21.0...4.21.1) --- updated-dependencies: - dependency-name: cookie dependency-type: indirect - dependency-name: express dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 15d9003..63c6bcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3857,11 +3857,10 @@ "license": "MIT" }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -4781,18 +4780,17 @@ } }, "node_modules/express": { - "version": "4.21.0", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", - "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dev": true, - "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", From b05b62ff9e6c26f42f7fbd134e12deb52e8c463c Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Sun, 20 Oct 2024 23:36:08 +0900 Subject: [PATCH 02/10] commit changes for file upload and layout edits --- package-lock.json | 1 - src/components/DataTable.tsx | 39 ++++++------ src/components/FileUpload.tsx | 94 ++++++++++++++++++++++++++++ src/components/Navbar.tsx | 5 ++ src/css/FileUpload.css | 67 ++++++++++++++++++++ src/css/Root.css | 25 ++++++-- src/data/sampledata.ts | 114 +++++++++++++++++++++++++++++++++- src/routes/root.tsx | 12 ++-- 8 files changed, 327 insertions(+), 30 deletions(-) create mode 100644 src/components/FileUpload.tsx create mode 100644 src/css/FileUpload.css diff --git a/package-lock.json b/package-lock.json index 5af33f5..3bc2a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7350,7 +7350,6 @@ "version": "6.27.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", - "license": "MIT", "dependencies": { "@remix-run/router": "1.20.0", "react-router": "6.27.0" diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx index b1aee79..c68adac 100644 --- a/src/components/DataTable.tsx +++ b/src/components/DataTable.tsx @@ -39,23 +39,26 @@ export default function DataTable({ data }: DataTableProps) { ); return ( - - 0} - highlightOnHoverColor={theme.primaryColor} - > - - - Name - Date - Location - Notes - - - {rows} -
- + //should work +
+ + 0} + highlightOnHoverColor={theme.primaryColor} + > + + + Name + Date + Location + Notes + + + {rows} +
+ +
); } diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx new file mode 100644 index 0000000..4e87d72 --- /dev/null +++ b/src/components/FileUpload.tsx @@ -0,0 +1,94 @@ +import React, { useState } from 'react'; +import '@/css/FileUpload.css'; + +interface FileUploadProps { + uploadUrl: string; +} + +const FileUpload: React.FC = ({ uploadUrl }) => { + const [showModal, setShowModal] = useState(false); + const [selectedFiles, setSelectedFiles] = useState([]); + + const handleFileChange = (event: React.ChangeEvent) => { + if (event.target.files) { + const newFiles = Array.from(event.target.files); + setSelectedFiles((prevFiles) => [...prevFiles, ...newFiles]); + } + }; + + const handleUpload = async () => { + // Once POST API req is out -- Currently WIP so cannot make any progress here + 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) { + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + console.log('Upload successful:', data); + + setSelectedFiles([]); + handleClose(); + } catch (error) { + console.error('Upload failed:', error); + } + } else { + alert('Please select files to upload'); + } + }; + + const toggleModal = () => { + setShowModal(!showModal); + }; + + const handleClose = () => { + setShowModal(false); + setSelectedFiles([]); + }; + + return ( +
+ + + {showModal && ( +
+
+ × +

Select files to upload

+
+ + {selectedFiles.length > 0 && ( +
+

Chosen Files:

+
    + {selectedFiles.map((file, index) => ( +
  • {file.name}
    • + ))} +
+
+ )} +
+ + +
+
+ )} +
+ ); +}; + +export default FileUpload; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index a9f385a..753f735 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -2,6 +2,7 @@ import "@mantine/core/styles.css"; import {} from "@mantine/core"; import "@/css/Navbar.css"; import { NavLink } from "react-router-dom"; +import FileUpload from "@/components/FileUpload" const BASE_URL = import.meta.env.BASE_URL; @@ -24,6 +25,10 @@ export default function Navbar() { diff --git a/src/css/FileUpload.css b/src/css/FileUpload.css new file mode 100644 index 0000000..859df32 --- /dev/null +++ b/src/css/FileUpload.css @@ -0,0 +1,67 @@ +.modal { + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 500px; + text-align: center; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +button { + padding: 10px 10px; + 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; +} \ No newline at end of file diff --git a/src/css/Root.css b/src/css/Root.css index cfa9c85..1322a37 100644 --- a/src/css/Root.css +++ b/src/css/Root.css @@ -12,11 +12,6 @@ z-index: 1000; } -.search-bar { - background-color: #e0e0e0; - border-radius: 0; -} - .main-content { display: flex; flex: 1; @@ -27,7 +22,10 @@ .results-container { display: flex; - flex-direction: row; + flex-direction: column; + flex-grow: 1; + overflow-x: auto; + } .footer { @@ -36,3 +34,18 @@ color: white; } +/* Made sure the height of search bar and data table matches up */ +.table-search-wrapper { + display: flex; + align-items: flex-start; + bottom: 0; + overflow: hidden; +} + +.search-contain { + max-height: calc(100vh - 300px); + overflow-y: auto; +} + + + diff --git a/src/data/sampledata.ts b/src/data/sampledata.ts index e90d100..58f8403 100644 --- a/src/data/sampledata.ts +++ b/src/data/sampledata.ts @@ -10,7 +10,119 @@ export const data: MCAPFileInformation[] = [ velocity_plot_path: "/path/to/s3/object", date: "08-22-2024", location: "MRDC", - notes: "car ran!", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", + event_type: "acceleration", + }, + { + id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", + mcap_file_name: "file1.mcap", + matlab_file_name: "file1.mat", + aws_bucket: "bucket", + mcap_path: "/path/to/s3/object", + mat_path: "/path/to/s3/object", + vn_lat_lon_path: "/path/to/s3/object", + velocity_plot_path: "/path/to/s3/object", + date: "08-22-2024", + location: "MRDC", + notes: "car ran!!!", event_type: "acceleration", }, { diff --git a/src/routes/root.tsx b/src/routes/root.tsx index db987bd..75ee1f8 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -10,12 +10,16 @@ export default function Root() { return ( <>
-
- +
+
+ +
+
+ +
- -
+
From 2ad86246bbc88cac298718ffbbe91123c36e3db2 Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Sun, 20 Oct 2024 23:40:08 +0900 Subject: [PATCH 03/10] commit changes for file upload and layout edits --- src/css/Root.css | 25 ++++++------------------- src/routes/root.tsx | 12 ++++-------- 2 files changed, 10 insertions(+), 27 deletions(-) diff --git a/src/css/Root.css b/src/css/Root.css index 1322a37..cfa9c85 100644 --- a/src/css/Root.css +++ b/src/css/Root.css @@ -12,6 +12,11 @@ z-index: 1000; } +.search-bar { + background-color: #e0e0e0; + border-radius: 0; +} + .main-content { display: flex; flex: 1; @@ -22,10 +27,7 @@ .results-container { display: flex; - flex-direction: column; - flex-grow: 1; - overflow-x: auto; - + flex-direction: row; } .footer { @@ -34,18 +36,3 @@ color: white; } -/* Made sure the height of search bar and data table matches up */ -.table-search-wrapper { - display: flex; - align-items: flex-start; - bottom: 0; - overflow: hidden; -} - -.search-contain { - max-height: calc(100vh - 300px); - overflow-y: auto; -} - - - diff --git a/src/routes/root.tsx b/src/routes/root.tsx index 75ee1f8..db987bd 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -10,16 +10,12 @@ export default function Root() { return ( <>
-
-
- -
-
- -
+
+
-
+ +
From 548123f4c17b9890fa4436f5b69eed93f7c291db Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:01:13 +0900 Subject: [PATCH 04/10] took out hardcoding, added catch to exception, simplified code w mantine compon... --- src/components/DataTable.tsx | 39 ++++++------ src/components/FileUpload.tsx | 78 +++++++++++++----------- src/css/FileUpload.css | 41 +------------ src/css/Root.css | 16 ++--- src/css/SearchBar.css | 18 +----- src/data/sampledata.ts | 108 ++++++++-------------------------- 6 files changed, 101 insertions(+), 199 deletions(-) diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx index c68adac..9dda95c 100644 --- a/src/components/DataTable.tsx +++ b/src/components/DataTable.tsx @@ -39,26 +39,23 @@ export default function DataTable({ data }: DataTableProps) { ); return ( - //should work -
- - 0} - highlightOnHoverColor={theme.primaryColor} - > - - - Name - Date - Location - Notes - - - {rows} -
- -
+ + 0} + highlightOnHoverColor={theme.primaryColor} + > + + + Name + Date + Location + Notes + + + {rows} +
+ ); } diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 4e87d72..fa86f4d 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Modal, Button, Notification, FileInput } from '@mantine/core'; import '@/css/FileUpload.css'; interface FileUploadProps { @@ -8,16 +9,15 @@ interface FileUploadProps { const FileUpload: React.FC = ({ uploadUrl }) => { const [showModal, setShowModal] = useState(false); const [selectedFiles, setSelectedFiles] = useState([]); + const [error, setError] = useState(null); - const handleFileChange = (event: React.ChangeEvent) => { - if (event.target.files) { - const newFiles = Array.from(event.target.files); - setSelectedFiles((prevFiles) => [...prevFiles, ...newFiles]); + const handleFileChange = (files: File[]) => { + if (files.length > 0) { + setSelectedFiles((prevFiles) => [...prevFiles, ...files]); } }; const handleUpload = async () => { - // Once POST API req is out -- Currently WIP so cannot make any progress here if (selectedFiles.length > 0) { const formData = new FormData(); selectedFiles.forEach((file) => { @@ -31,7 +31,8 @@ const FileUpload: React.FC = ({ uploadUrl }) => { }); if (!response.ok) { - throw new Error('Network response was not ok'); + setError('Upload failed. Network response was not ok.'); + return; } const data = await response.json(); @@ -41,9 +42,10 @@ const FileUpload: React.FC = ({ uploadUrl }) => { handleClose(); } catch (error) { console.error('Upload failed:', error); + setError('An error occurred while uploading. Please try again.'); } } else { - alert('Please select files to upload'); + setError('Please select files to upload.'); } }; @@ -54,39 +56,49 @@ const FileUpload: React.FC = ({ uploadUrl }) => { const handleClose = () => { setShowModal(false); setSelectedFiles([]); + setError(null); }; return (
- + - {showModal && ( -
-
- × -

Select files to upload

-
- - {selectedFiles.length > 0 && ( -
-

Chosen Files:

-
    - {selectedFiles.map((file, index) => ( -
  • {file.name}
    • - ))} -
-
- )} + +
+ + {selectedFiles.length > 0 && ( +
+

Chosen Files:

+
    + {selectedFiles.map((file, index) => ( +
  • {file.name}
    • + ))} +
- - -
+ )}
- )} + + + + {error && ( + setError(null)} style={{ marginTop: 10 }}> + {error} + + )} +
); }; diff --git a/src/css/FileUpload.css b/src/css/FileUpload.css index 859df32..d02a437 100644 --- a/src/css/FileUpload.css +++ b/src/css/FileUpload.css @@ -1,44 +1,6 @@ -.modal { - position: fixed; - z-index: 1; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: rgba(0, 0, 0, 0.4); -} - -.modal-content { - background-color: #fefefe; - padding: 20px; - border: 1px solid #888; - width: 80%; - max-width: 500px; - text-align: center; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; - cursor: pointer; -} - -.close:hover, -.close:focus { - color: black; - text-decoration: none; - cursor: pointer; -} - button { padding: 10px 10px; + margin: 3px 3px; border: none; border-radius: 5px; background-color: #b39e63; @@ -64,4 +26,5 @@ h3 { display: flex; flex-direction: column; text-align: center; + justify-content: center; } \ No newline at end of file diff --git a/src/css/Root.css b/src/css/Root.css index cfa9c85..ea633f3 100644 --- a/src/css/Root.css +++ b/src/css/Root.css @@ -8,18 +8,13 @@ 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; @@ -27,12 +22,19 @@ .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; } - diff --git a/src/css/SearchBar.css b/src/css/SearchBar.css index 1ac2651..8832748 100644 --- a/src/css/SearchBar.css +++ b/src/css/SearchBar.css @@ -1,24 +1,8 @@ -.results-container { - flex: 1; - display: flex; - flex-direction: column; -} - - -.table-contain-result { - text-align: center; - flex: 1; -} - -.preview-contain-result { - text-align: center; -} - .Search { display: flex; max-width: 360px; font-size: 15px; - + overflow: auto; } diff --git a/src/data/sampledata.ts b/src/data/sampledata.ts index 58f8403..66aa41c 100644 --- a/src/data/sampledata.ts +++ b/src/data/sampledata.ts @@ -10,111 +10,55 @@ export const data: MCAPFileInformation[] = [ velocity_plot_path: "/path/to/s3/object", date: "08-22-2024", location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", - }, - { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", - aws_bucket: "bucket", - mcap_path: "/path/to/s3/object", - mat_path: "/path/to/s3/object", - vn_lat_lon_path: "/path/to/s3/object", - velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", - }, - { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", - aws_bucket: "bucket", - mcap_path: "/path/to/s3/object", - mat_path: "/path/to/s3/object", - vn_lat_lon_path: "/path/to/s3/object", - velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", - }, - { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", - aws_bucket: "bucket", - mcap_path: "/path/to/s3/object", - mat_path: "/path/to/s3/object", - vn_lat_lon_path: "/path/to/s3/object", - velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", - }, - { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", - aws_bucket: "bucket", - mcap_path: "/path/to/s3/object", - mat_path: "/path/to/s3/object", - vn_lat_lon_path: "/path/to/s3/object", - velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", + notes: "car ran!", event_type: "acceleration", }, { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", + id: "0723984238489-21312-4e75e6f76", + mcap_file_name: "file5.3.mcap", + matlab_file_name: "file5.3.mat", aws_bucket: "bucket", mcap_path: "/path/to/s3/object", mat_path: "/path/to/s3/object", vn_lat_lon_path: "/path/to/s3/object", velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", + date: "08-16-2024", + location: "rome", + notes: "car performed nice", + event_type: "autocross", }, { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", + id: "091823792-2321312-a081", + mcap_file_name: "file7.1.mcap", + matlab_file_name: "file7.1.mat", aws_bucket: "bucket", mcap_path: "/path/to/s3/object", mat_path: "/path/to/s3/object", vn_lat_lon_path: "/path/to/s3/object", velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", + date: "08-29-2024", location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", + notes: "car did jk turn on", + event_type: null, }, { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", + id: "07a0sdjwne-597f-4637-8b61-6134e75e6f76", + mcap_file_name: "file2.3.mcap", + matlab_file_name: "file2.3.mat", aws_bucket: "bucket", mcap_path: "/path/to/s3/object", mat_path: "/path/to/s3/object", vn_lat_lon_path: "/path/to/s3/object", velocity_plot_path: "/path/to/s3/object", - date: "08-22-2024", - location: "MRDC", - notes: "car ran!!!", - event_type: "acceleration", + date: "08-16-2024", + location: "rome", + notes: "car did not latch", + event_type: "autocross", }, { - id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd", - mcap_file_name: "file1.mcap", - matlab_file_name: "file1.mat", + id: "605deb4b-44a8-4801-9da6-a671c1d3eccd", + mcap_file_name: "file1.3.mcap", + matlab_file_name: "file1.3.mat", aws_bucket: "bucket", mcap_path: "/path/to/s3/object", mat_path: "/path/to/s3/object", @@ -122,7 +66,7 @@ export const data: MCAPFileInformation[] = [ velocity_plot_path: "/path/to/s3/object", date: "08-22-2024", location: "MRDC", - notes: "car ran!!!", + notes: "car failed", event_type: "acceleration", }, { @@ -209,4 +153,4 @@ export const data: MCAPFileInformation[] = [ notes: "car did not turn on", event_type: null, }, -]; +]; \ No newline at end of file From 1103bcbc4dbfc29c3bfd823b042a6e08cbf33657 Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:02:30 +0900 Subject: [PATCH 05/10] fixed merge conflicts --- src/components/PreviewCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 6beee2f..b19738e 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -185,7 +185,7 @@ export const SchemaTable = () => { }} /> - {/* Scrollable area with height limit */} + {/* Scrollable area with height limit */} From a028bc39865e91d03cb8c7d51c9a4fb31f31d39c Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:05:57 +0900 Subject: [PATCH 06/10] fixed layout --- src/components/PreviewCard.tsx | 6 ++++-- src/css/PreviewCard.css | 8 ++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index b19738e..72574d0 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -77,8 +77,10 @@ function PreviewCard() { gap: "10px", }} > - - +
+ + +
diff --git a/src/css/PreviewCard.css b/src/css/PreviewCard.css index 7d0a795..2c4e75e 100644 --- a/src/css/PreviewCard.css +++ b/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; + + } + } \ No newline at end of file From f59e3e6a5802e7ab0f5cd323059d301727054f1e Mon Sep 17 00:00:00 2001 From: Alex Chen Date: Tue, 22 Oct 2024 19:53:33 -0400 Subject: [PATCH 07/10] Created schema search feature --- src/components/SchemaSearch.tsx | 68 +++++++++++++++++++++++++++++++++ src/components/SearchBar.tsx | 5 +++ src/css/SchemaSearch.css | 10 +++++ 3 files changed, 83 insertions(+) create mode 100644 src/components/SchemaSearch.tsx create mode 100644 src/css/SchemaSearch.css diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx new file mode 100644 index 0000000..a2cf012 --- /dev/null +++ b/src/components/SchemaSearch.tsx @@ -0,0 +1,68 @@ +import React, { useState } from "react"; +import { Autocomplete } from "@mantine/core"; +import "@/css/SchemaSearch.css"; + +///Add feature to select multiple schemas + +// 1. Once there is a valid schema in input and we press enter again, append selected schema onto +// might wanna store it into some variable so that later, you can request these files with these +// schemas from the server +// 2. Look at FileUpload Branch functionality for logic to see and unhide +// 3. Look at API POST requst in FileUpload branch to see the logic and syntax + +interface SchemaSearch { + schemas: string[]; +} + +const SchemaSearch: React.FC = ({ schemas }) => { + const [value, setValue] = useState(""); + const [selectedSchema, setSelected] = useState([]); //will contain the selected schemas + + const filteredSchemas = schemas.filter((schema) => + schema.toLowerCase().includes(value.toLowerCase()), + ); + + const addSchema = (newSchema: string) => { + //adds selected schema to a string array + if (!selectedSchema.includes(newSchema)) { + setSelected([...selectedSchema, newSchema]); + } else { + alert("Schema already selected!"); + } + }; + + const clearSchema = () => { + setSelected([]); + }; + + //Allows us to press enter and autocomplete + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === "Enter" && filteredSchemas.length > 0) { + setValue(filteredSchemas[0]); + addSchema(filteredSchemas[0]); //add it to the list that contains the schemas selected + } + }; + + return ( +
+ +
+

Selected Schema

+ {selectedSchema.map((str, index) => ( +

{str}

+ ))} + +
+ ); +}; +//gotta figure out a way to hide the selected schema section until after a schema has been selected +export default SchemaSearch; diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index d130fa5..ea1185a 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import { data } from "@/data/sampledata"; import { eventType, location } from "@/data/dataFilters"; import "@/css/SearchBar.css"; +import SchemaSearch from "@/components/SchemaSearch"; interface SearchBarWithFilterProps { setFilteredData: React.Dispatch>; @@ -36,6 +37,8 @@ function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) { return true; }; + const schemas = ["Schema1", "Schema2", "Schema3", "Schema4"]; + // Filter logic const handleSearch = () => { const filtered = data.filter((item) => { @@ -150,6 +153,8 @@ function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) { placeholder="Filter by date" /> + + diff --git a/src/css/SchemaSearch.css b/src/css/SchemaSearch.css new file mode 100644 index 0000000..b0ccd00 --- /dev/null +++ b/src/css/SchemaSearch.css @@ -0,0 +1,10 @@ +.schema-autocomplete { + padding: 10px; + border-radius: 10px; + border: 1px solid #ddd; + background-color: #fff; + } +.cancel-button { + background-color: #978750; + +} \ No newline at end of file From befcdec6f17965f178f12db109cae8602cff2288 Mon Sep 17 00:00:00 2001 From: Alex Chen Date: Thu, 24 Oct 2024 00:05:00 -0400 Subject: [PATCH 08/10] Added functionality that unhides selected schema section and switched to mantine button. --- src/components/SchemaSearch.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx index a2cf012..7b4d37d 100644 --- a/src/components/SchemaSearch.tsx +++ b/src/components/SchemaSearch.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Autocomplete } from "@mantine/core"; +import { Autocomplete, Button } from "@mantine/core"; import "@/css/SchemaSearch.css"; ///Add feature to select multiple schemas @@ -54,13 +54,19 @@ const SchemaSearch: React.FC = ({ schemas }) => { onKeyDown={handleKeyDown} />
-

Selected Schema

- {selectedSchema.map((str, index) => ( -

{str}

- ))} - + {selectedSchema.length > 0 && ( +
+

Selected Schema

+
    + {selectedSchema.map((str, index) => ( +
  • {str}
    • + ))} +
+ +
+ )} ); }; From 9779ec8420e7af77dfdd59722451c58f25fffe8d Mon Sep 17 00:00:00 2001 From: Ryan Lau <47727459+ryanlau@users.noreply.github.com> Date: Thu, 24 Oct 2024 00:05:05 -0400 Subject: [PATCH 09/10] add gh action to make sure repo is buildable on pr --- .github/workflows/build-on-pr.yml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 .github/workflows/build-on-pr.yml diff --git a/.github/workflows/build-on-pr.yml b/.github/workflows/build-on-pr.yml new file mode 100644 index 0000000..d4c2ba5 --- /dev/null +++ b/.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 From da3f0d53fa9b19b1996838afcc4022da38a3d6a3 Mon Sep 17 00:00:00 2001 From: Alex Chen Date: Thu, 24 Oct 2024 00:29:37 -0400 Subject: [PATCH 10/10] Deleted unnecessary comments. --- src/components/SchemaSearch.tsx | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx index 7b4d37d..9577c88 100644 --- a/src/components/SchemaSearch.tsx +++ b/src/components/SchemaSearch.tsx @@ -2,28 +2,19 @@ import React, { useState } from "react"; import { Autocomplete, Button } from "@mantine/core"; import "@/css/SchemaSearch.css"; -///Add feature to select multiple schemas - -// 1. Once there is a valid schema in input and we press enter again, append selected schema onto -// might wanna store it into some variable so that later, you can request these files with these -// schemas from the server -// 2. Look at FileUpload Branch functionality for logic to see and unhide -// 3. Look at API POST requst in FileUpload branch to see the logic and syntax - interface SchemaSearch { schemas: string[]; } const SchemaSearch: React.FC = ({ schemas }) => { const [value, setValue] = useState(""); - const [selectedSchema, setSelected] = useState([]); //will contain the selected schemas + const [selectedSchema, setSelected] = useState([]); const filteredSchemas = schemas.filter((schema) => schema.toLowerCase().includes(value.toLowerCase()), ); const addSchema = (newSchema: string) => { - //adds selected schema to a string array if (!selectedSchema.includes(newSchema)) { setSelected([...selectedSchema, newSchema]); } else { @@ -35,11 +26,10 @@ const SchemaSearch: React.FC = ({ schemas }) => { setSelected([]); }; - //Allows us to press enter and autocomplete const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter" && filteredSchemas.length > 0) { setValue(filteredSchemas[0]); - addSchema(filteredSchemas[0]); //add it to the list that contains the schemas selected + addSchema(filteredSchemas[0]); } }; @@ -56,7 +46,7 @@ const SchemaSearch: React.FC = ({ schemas }) => {
{selectedSchema.length > 0 && (
-

Selected Schema

+
    {selectedSchema.map((str, index) => (
  • {str}
    • @@ -70,5 +60,5 @@ const SchemaSearch: React.FC = ({ schemas }) => {
); }; -//gotta figure out a way to hide the selected schema section until after a schema has been selected + export default SchemaSearch;