Feat: Integrate Backend for Experiment Tab

client/package.json

@@ -8,6 +8,7 @@
     "@fontsource/poppins": "^5.0.14",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.18",
+    "@tanstack/react-query": "^5.68.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -43,5 +44,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:5000"
 }

client/src/api/api.js

@@ -0,0 +1,15 @@
+// A general asynchronous function to fetch data from an endpoint
+export const fetchData = async (endpoint) => {
+    try {
+        const response = await fetch(endpoint);
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.status}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error("API Fetch Error:", error);
+        throw error;
+    }
+};

client/src/api/experiment.js

@@ -0,0 +1,35 @@
+// API functions for the Experiment tab
+
+import { fetchData } from './api';
+import { dateToRFC } from './utils';
+
+const NUMBER_OF_WELLS = 16;
+
+// Queries all wells for either temperature or luminosity
+const queryAllWells = async (start, end, key) => {
+    let endpoint = `/payload/wells`
+
+    if (key === 'temperature') endpoint += `/temp`
+    else if (key === 'luminosity') endpoint += `/lumin`
+
+    const params = new URLSearchParams({start: dateToRFC(start), end: dateToRFC(end)})
+
+    const requests = Array.from({ length: NUMBER_OF_WELLS }, (_, i) =>
+        fetchData(`${endpoint}/${i + 1}?${params.toString()}`)
+    );
+
+    const responses = await Promise.all(requests);
+
+    return responses.map((wellData) =>
+        wellData.map(item => [item.timestamp, item[key]])
+    );
+};
+
+// Returns both temperature and luminosity data
+export const fetchExperiment = async (start, end) => {
+    const [temperature, luminosity] = await Promise.all([
+        queryAllWells(start, end, 'temperature'),
+        queryAllWells(start, end, 'luminosity')
+    ]);
+    return { temperature, luminosity };
+};

client/src/api/testData.js

@@ -0,0 +1,29 @@
+/* 
+* Contains randomly generated datasets, useful
+* for testing data display components without
+* connecting to the database.
+*/
+
+let hour = 1000 * 60 * 60;
+
+/* Payload datasets */
+export const testTemperatureData = Array.from({ length: 4 }, () =>
+  Array.from({ length: 720 }, (_, i) => [
+    Date.now() - i * hour, 
+    (Math.random() * 6 - 3).toFixed(1)
+  ])
+);
+
+export const testLuminosityData = Array.from({ length: 4 }, () =>
+  Array.from({ length: 720 }, (_, i) => [
+    Date.now() - i * hour, 
+    (Math.random() * 200 + 600).toFixed(0)
+  ])
+);
+
+export const testWellActivity = [
+  1, 1, 0, 1, 
+  1, 1, 0, 1,
+  1, 1, 0, 1,
+  1, 1, 0, 1
+]

client/src/api/utils.js

@@ -0,0 +1,6 @@
+// General API utility functions
+
+export const dateToRFC = (d) => {
+    // removes the fractional seconds from the ISO string
+    return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
+}

client/src/components/TimeRangePicker.jsx

@@ -16,7 +16,7 @@ export default function TimeRangePicker() {
 
     const rangeRef = useRef({
         // Min (and maybe max) date should be based on data timestamps
-        min: new Date(timeRange.start.getTime() - 1000 * 3600 * 24 * 30),
+        min: new Date(timeRange.start.getTime() - 1000 * 3600 * 24 * 365),
         max: new Date(timeRange.end.getTime() + 1000 * 3600 * 24)
     });
 

client/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
 import '@fontsource/poppins/400.css';
 import '@fontsource/poppins/500.css';
@@ -17,28 +18,32 @@ import OrientationTab from './pages/OrientationTab';
 import RegistrationPage from './pages/RegistrationPage';
 import LoginPage from "./pages/LoginPage";
 
+const queryClient = new QueryClient();
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <CustomProvider theme="dark">
-      <TimeRangeProvider>
-        <Router>
-          <Routes>
-            <Route element={<PageLayout />}>
-              <Route path="/" element={<Navigate to="/dashboard" replace />} />
-              <Route path="/dashboard" element={<Dashboard />} />
-              <Route path="/experiment" element={<ExperimentTab />} />
-              <Route path="/event-log" element={<EventLogTab />} />
-              <Route path="/temperatures" element={<TemperaturesTab />} />
-              <Route path="/battery" element={<BatteryTab />} />
-              <Route path="/orientation" element={<OrientationTab />} />
-            </Route>
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<RegistrationPage />} />
-          </Routes>
-        </Router>
-      </TimeRangeProvider>
-    </CustomProvider>
+    <QueryClientProvider client={queryClient}>
+      <CustomProvider theme="dark">
+        <TimeRangeProvider>
+          <Router>
+            <Routes>
+              <Route element={<PageLayout />}>
+                <Route path="/" element={<Navigate to="/dashboard" replace />} />
+                <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/experiment" element={<ExperimentTab />} />
+                <Route path="/event-log" element={<EventLogTab />} />
+                <Route path="/temperatures" element={<TemperaturesTab />} />
+                <Route path="/battery" element={<BatteryTab />} />
+                <Route path="/orientation" element={<OrientationTab />} />
+              </Route>
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/signup" element={<RegistrationPage />} />
+            </Routes>
+          </Router>
+        </TimeRangeProvider>
+      </CustomProvider>
+    </QueryClientProvider>
   </React.StrictMode>
 );
 

client/src/pages/ExperimentTab.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import {
-  temperatureData, luminosityData, labels, wellActivity
-} from '../components/ExperimentData.jsx';
+import React, { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { fetchExperiment } from '../api/experiment.js';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import TimeseriesChart from '../components/TimeseriesChart.jsx';
 import { useTimeContext } from "../components/TimeRangeContext.jsx";
+import { testTemperatureData, testLuminosityData, testWellActivity } from '../api/testData.js';
 
 const CHART_WIDTH = 800;
 
@@ -15,14 +15,37 @@ const chartSize = {
   height: 400 
 }
 
+const chartLabels = Array.from({length: 16}, (_, i) => `Well ${i + 1}`)
+
 export default function ExperimentTab() {
   const { timeRange } = useTimeContext();
 
+  const [temperatureData, setTemperatureData] = useState([]);
+  const [luminosityData, setLuminosityData] = useState([]);
+
   const [showInactiveWells, setShowInactiveWells] = useState(true);
 
+  const { data, isError, error } = useQuery({
+    queryKey: ['experiment', timeRange.start, timeRange.end],
+    queryFn: () => fetchExperiment(timeRange.start, timeRange.end)
+  });
+
+  if (isError) console.log(error.message);
+
+  useEffect(() => {
+    if (data) {
+      if (data.temperature) {
+        setTemperatureData(data.temperature);
+      }
+      if (data.luminosity) {
+        setLuminosityData(data.luminosity);
+      }
+    }
+  }, [data]);
+
   const chartProps = {
-    labels: labels,
-    seriesActivity: !showInactiveWells ? wellActivity : undefined,
+    labels: chartLabels,
+    seriesActivity: !showInactiveWells ? testWellActivity : undefined,
     xmin: timeRange.start,
     xmax: timeRange.end,
     style: {...chartSize}
@@ -39,7 +62,7 @@ export default function ExperimentTab() {
       <TimeseriesChart 
         title="Luminosity (lm)"
         dataset={luminosityData}
-        ymin={550} ymax={850}
+        ymin={100} ymax={900}
         {...chartProps}
       />
       <FormControlLabel