Some reorganization

Author: ArnavG-it

client/src/api/experiment.js

@@ -1,15 +1,16 @@
 // 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`
+    if (key === 'temperature') endpoint += `/temp`
+    else if (key === 'luminosity') endpoint += `/lumin`
 
     const params = new URLSearchParams({start: dateToRFC(start), end: dateToRFC(end)})
 
@@ -32,8 +33,3 @@ export const fetchExperiment = async (start, end) => {
     ]);
     return { temperature, luminosity };
 };
-
-const dateToRFC = (d) => {
-    // removes the fractional seconds from the ISO string
-    return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
-}

client/src/components/ExperimentData.jsx client/src/api/testData.jsclient/src/components/ExperimentData.jsx renamed to client/src/api/testData.js

@@ -1,5 +1,12 @@
+/* 
+* 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, 
@@ -14,11 +21,9 @@ export const testLuminosityData = Array.from({ length: 4 }, () =>
   ])
 );
 
-export const wellActivity = [
+export const testWellActivity = [
   1, 1, 0, 1, 
   1, 1, 0, 1,
   1, 1, 0, 1,
   1, 1, 0, 1
 ]
-
-export const labels = Array.from({length: 16}, (_, i) => `Well ${i + 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/pages/ExperimentTab.js

@@ -1,14 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import {
-  labels, wellActivity
-} from '../components/ExperimentData.jsx';
 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;
 
@@ -17,6 +15,8 @@ const chartSize = {
   height: 400 
 }
 
+const chartLabels = Array.from({length: 16}, (_, i) => `Well ${i + 1}`)
+
 export default function ExperimentTab() {
   const { timeRange } = useTimeContext();
 
@@ -44,8 +44,8 @@ export default function ExperimentTab() {
   }, [data]);
 
   const chartProps = {
-    labels: labels,
-    seriesActivity: !showInactiveWells ? wellActivity : undefined,
+    labels: chartLabels,
+    seriesActivity: !showInactiveWells ? testWellActivity : undefined,
     xmin: timeRange.start,
     xmax: timeRange.end,
     style: {...chartSize}