Secrets and Route connection

.github/workflows/main.yml

@@ -39,6 +39,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build
+        env:
+          VITE_API_URL: ${{ secrets.VITE_API_URL }}
         run: npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v4

package.json

@@ -54,7 +54,7 @@
     "storybook": "^8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.8"
+    "vite": "^5.4.10"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

src/components/DataTable.tsx

@@ -17,7 +17,7 @@ export default function DataTable({
   setSelectedData,
 }: DataTableProps) {
   const theme = useMantineTheme();
-
+  
   const setPreviewData = (file: MCAPFileInformation) => {
     if (selectedRow === file.id) {
       setSelectedRow("");
@@ -28,6 +28,12 @@ export default function DataTable({
     }
   };
 
+  // Take out when API server team implements filename id in their get route
+  const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
+    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
+    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+  };
+
   const rows = !data ? (
     <Table.Tr>
       <Table.Td colSpan={100} ta="center">
@@ -45,17 +51,18 @@ export default function DataTable({
       <Table.Tr
         key={file.id}
         onClick={() => setPreviewData(file)}
-        /*fw={selectedRow === file.id ? "bold" : ""}*/
+
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>{file.mcap_file_name}</Table.Td>
+        <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
         <Table.Td>{file.date}</Table.Td>
         <Table.Td>{file.location}</Table.Td>
-        <Table.Td>{file.notes}</Table.Td>
+
+        {/* Change back to notes once notes field is implemented in the server */}
+        <Table.Td>{file.car_model}</Table.Td>
       </Table.Tr>
     ))
   );
-
   return (
     <Table.ScrollContainer h="100%" minWidth={800} style={{ overflowY: 'auto' }}>
       <Table

src/components/PreviewCard.tsx

@@ -24,8 +24,7 @@ interface PreviewCardProps {
 
 function PreviewCard({ selectedData }: PreviewCardProps) {
   const formatDate = (dateString: string) => {
-    const [month, day, year] = dateString.split("-");
-    const date = new Date(`${year}-${month}-${day}`);
+    const date = new Date(dateString);
     return date.toLocaleDateString("en-US", {
       weekday: "short",
       year: "numeric",
@@ -34,22 +33,29 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
     });
   };
 
+  // Take out when API server team implements filename id in their get route
+  const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
+    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
+    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+  };
+
+  const imageUrl = selectedData?.content_files?.vn_lat_lon_plot?.[0]?.signed_url ?? "https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"; // Fallback to a default image if none exists.
+
   const formatTime = (dateString: string) => {
-    const [month, day, year] = dateString.split("-");
-    const date = new Date(`${year}-${month}-${day}T00:00:00`);
+    const date = new Date(dateString);
     return date.toLocaleTimeString("en-US", {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true, 
     });
   };
-
   return (
     <div className="preview-container">
       <Grid>
         <Grid.Col span={3} className="image-column">
           <img
-            src="https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"
+            src={imageUrl}
             alt="Preview"
             className="preview-image"
           />
@@ -67,10 +73,10 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
         <Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
           {selectedData ? (
             <>
-              <PreviewDataDiv name={selectedData.mcap_file_name} val={""} />
+              <PreviewDataDiv name={getFileNameWithoutExtension(selectedData.mcap_files[0].file_name)} val={""} />
               <PreviewDataDiv
-                name={"Date"}
-                val={formatDate(selectedData.date)}
+                name={"Car Model"}
+                val={selectedData.car_model ?? "NA"}
               />
               <PreviewDataDiv
                 name={"Time"}
@@ -100,13 +106,14 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
               >
                 <DownloadButton
                   buttonText="MCAP"
-                  fileName={selectedData.mcap_file_name}
-                  signedUrl={selectedData.signed_url ?? null}
+                  //One file for now -- can make it dynamically read several files at a time
+                  fileName={selectedData.mcap_files[0].file_name}
+                  signedUrl={selectedData.mcap_files[0].signed_url ?? null}
                 />
                 <DownloadButton
                   buttonText="MAT"
-                  fileName={selectedData.mcap_file_name}
-                  signedUrl={"#"}
+                  fileName={selectedData.mat_files[0].file_name}
+                  signedUrl={selectedData.mat_files[0].signed_url}
                 />
               </div>
             </>
@@ -175,6 +182,9 @@ export function DownloadButton({
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item
+          style={{
+            fontSize: '10px',
+          }}
           leftSection={
             <IconFile
               style={{ width: rem(16), height: rem(16) }}
@@ -226,7 +236,7 @@ export const SchemaTable = () => {
           handleSearch(e.target.value);
         }}
       />
-      <ScrollArea style={{ height: 200, width: 250 }}>
+      <ScrollArea style={{ height: 180, width: 250 , padding: 10}}>
         {" "}
         {/* Scrollable area with height limit */}
         <Table

src/components/SchemaSearch.tsx

@@ -9,32 +9,22 @@ interface SchemaSearch {
 
 const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
   const [value, setValue] = useState<string>("");
-  //const [selectedSchema, setSelected] = useState<string[]>([]);
+  const [selectedSchemas, setSelectedSchemas] = 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([]);
     setValue("");
+    setSelectedSchemas([])
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter" && filteredSchemas.length > 0) {
       setValue(filteredSchemas[0]);
-      //addSchema(filteredSchemas[0]);
+      setValue("")
     }
   };
 
@@ -43,29 +33,17 @@ const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
   }, [clear]);
 
   return (
-    <div>
+    <div className="schemasearchbutton">
       <MultiSelect
         label="Schema"
         placeholder="Schema name"
         data={filteredSchemas}
         onKeyDown={handleKeyDown}
+        value={selectedSchemas}
+        onChange={setSelectedSchemas}
         searchable
         size="xs"
       />
-      <br />
-      {/*
-      {selectedSchema.length > 0 && (
-        <div>
-          <label>Selected Schema</label>
-          <ul>
-            {selectedSchema.map((str, index) => (
-              <li key={index}>{str}</li>
-            ))}
-          </ul>
-
-        </div>
-      )}
-      */}
     </div>
   );
 };

src/components/SearchBar.tsx

@@ -19,67 +19,9 @@ function SearchBarWithFilter({
   const [beforeDate, setBeforeDate] = useState("");
   const [afterDate, setAfterDate] = useState("");
   const [clearSchemas, setClearSchemas] = useState(false);
-  // const [filters] = useState({
-  //   location: "",
-  //   eventType: "",
-  //   beforeDate: "",
-  //   afterDate: "",
-  // });
-
-  // Check if a date is in the valid range
-  // const isDateInRange = (
-  //   dateStr: string,
-  //   beforeDate: string,
-  //   afterDate: string,
-  // ) => {
-  //   const itemDate = new Date(dateStr);
-  //   const before = beforeDate ? new Date(beforeDate) : null;
-  //   const after = afterDate ? new Date(afterDate) : null;
-
-  //   if (before && itemDate > before) return false;
-  //   if (after && itemDate < after) return false;
-
-  //   return true;
-  // };
 
   const schemas = ["Schema1", "Schema2", "Schema3", "Schema4"];
 
-  // Filter logic
-  // const handleSearch = () => {
-  //   const filtered = data.filter((item) => {
-  //     // Match search term in multiple fields
-  //     const matchesSearch =
-  //       item.mcap_file_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-  //       item.matlab_file_name
-  //         .toLowerCase()
-  //         .includes(searchTerm.toLowerCase()) ||
-  //       item.notes?.toLowerCase().includes(searchTerm.toLowerCase());
-
-  //     // Match filters
-  //     const matchesLocation =
-  //       filters.location === "" ||
-  //       item.location.toLowerCase() === filters.location.toLowerCase();
-  //     const matchesEventType =
-  //       filters.eventType.toLowerCase() === "" ||
-  //       item.event_type?.toLowerCase() === filters.eventType.toLowerCase();
-  //     const matchesDate = isDateInRange(
-  //       item.date,
-  //       filters.beforeDate,
-  //       filters.afterDate,
-  //     );
-
-  //     return (
-  //       matchesSearch && matchesLocation && matchesEventType && matchesDate
-  //     );
-  //   });
-  //   setFilteredData(filtered);
-  // };
-
-  // Trigger search on filter or search term change
-  // useEffect(() => {
-  //   handleSearch();
-  // }, [searchTerm, filters]);
-
   // Handle filter changes
   function handleFilterChange(
     e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>,
@@ -97,8 +39,6 @@ function SearchBarWithFilter({
       filt.filename = value;
     }
 
-    // console.log("search", filt);
-
     setSearchFilters((prevFilters) => ({
       ...prevFilters,
       notes: filt.notes,
@@ -231,6 +171,7 @@ function SearchBarWithFilter({
           style={{
             display: "flex",
             gap: "10px",
+            marginTop: "10px"
           }}
         >
           {/* Clear Button */}

src/css/SchemaSearch.css

@@ -1,10 +1,4 @@
-.schema-autocomplete {
-    padding: 10px;
-    border-radius: 10px;
-    border: 1px solid #ddd;
-    background-color: #fff;
-  }
-.cancel-button {
-  background-color: #978750;
-
+.schemasearchbutton {
+  display: "flex";
+
 }