Display ADCS Data on Orientation Page.

client/package.json

@@ -45,5 +45,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:5001"
 }

client/src/api/orientation.js

@@ -0,0 +1,51 @@
+// API functions for the Experiment tab
+
+import { fetchData } from './api';
+import { dateToRFC } from './utils';
+
+const NUMBER_OF_VARIANTS = 2;
+
+const queryMagFieldData = async (start, end) => {
+    let endpoint = `adcs/magf`
+
+    const params = new URLSearchParams({start: dateToRFC(start), end: dateToRFC(end)})
+
+    const requests = Array.from({ length: NUMBER_OF_VARIANTS }, (_, i) => 
+        fetchData(`${endpoint}/${i + 1}?${params.toString()}`),
+    );
+
+    const responses = await Promise.all(requests);
+
+    return responses.map((magfieldData) => 
+        magfieldData.map(item => [item.variant, item.timestamp, item.LSB, item.X, item.Y, item.Z])
+    );
+}
+
+const queryAngFieldData = async (start, end) => {
+    let endpoint = `adcs/angv`
+
+    const params = new URLSearchParams({start: dateToRFC(start), end: dateToRFC(end)})
+
+    const requests = Array.from({ length: NUMBER_OF_VARIANTS }, (_, i) => 
+        fetchData(`${endpoint}/${i + 1}?${params.toString()}`),
+    );
+
+    const responses = await Promise.all(requests);
+
+    return responses.map((angFieldData) => 
+        angFieldData.map(item => [item.variant, item.timestamp, item.X, item.Y, item.Z])
+    );
+}
+
+
+export const fetchMagneticField = async (start, end) => {
+
+    const magnetic = await queryMagFieldData(start, end);
+    return { magnetic };
+};
+
+export const fetchAngVelData = async (start, end) => {
+
+    const angvel = await queryAngFieldData(start, end);
+    return { angvel };
+};

client/src/pages/OrientationTab.js

@@ -1,9 +1,228 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { fetchMagneticField, fetchMagField } from '../api/orientation.js';
+import { fetchAngVelData } from '../api/orientation.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';
 
-class OrientationTab extends React.Component {
-  render() {
-    return null;
-  }
+const CHART_WIDTH = 800;
+
+const chartSize = {
+  width: CHART_WIDTH,
+  height: 400 
 }
 
-export default OrientationTab;
+const formatTime = (isoString) => {
+  return new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC",
+  }).format(new Date(isoString));
+};
+
+export default function OrientationTab() {
+  const { timeRange } = useTimeContext();
+
+  // mag field data
+  const [magneticData, setMagneticData] = useState([]);
+  const [magVariants, setMagVariants] = useState([]);
+  const [magLSB, setMagLSB] = useState([]);
+  const [magTime, setMagTime] = useState([]);
+  const [magX, setMagX] = useState([]);
+  const [magY, setMagY] = useState([]);
+  const [magZ, setMagZ] = useState([]);
+
+  // angular velocity data
+  const [angVelData, setAngVelData] = useState([]);
+  const [angVelVariants, setAngVelVariants] = useState([]);
+  const [angVelTime, setAngVelTime] = useState([]);
+  const [angVelX, setAngVelX] = useState([]);
+  const [angVelY, setAngVelY] = useState([]);
+  const [angVelZ, setAngVelZ] = useState([]);
+
+  useEffect(() => {
+    const load = async () => {
+      const start = new Date('2025-09-01T00:00:00Z');
+      const end   = new Date('2025-09-10T00:00:00Z');
+
+      const initialmagvariants = [];
+      const initialmaglsb = [];
+      const initialmagtimes = [];
+      const initialmagx = [];
+      const initialmagy = [];
+      const initialmagz = [];
+
+      const initialAngVelVariants = [];
+      const initialAngVelTimes = [];
+      const initialAngVelX = [];
+      const initialAngVelY = [];
+      const initialAngVelZ = [];
+
+      const { magnetic } = await fetchMagneticField(start, end);
+      const { angvel } = await fetchAngVelData(start, end);
+
+      // variant -> timestamp -> X -> Y -> Z
+      for (let i = 0; i < magnetic.length; i++) {
+        for (let j = 0; j < magnetic[i].length; j++) {
+            if (magnetic[i][j][0] === '1') { initialmagvariants.push("Primary"); }
+            else if (magnetic[i][j][0] === '2') { initialmagvariants.push("Backup"); }
+            initialmaglsb.push(magnetic[i][j][2]);
+            console.log(magnetic[i][j][2]);
+            initialmagtimes.push(magnetic[i][j][1]);
+            initialmagx.push(magnetic[i][j][3]);
+            initialmagy.push(magnetic[i][j][4]);
+            initialmagz.push(magnetic[i][j][5]);
+        }
+      }
+
+      for (let i = 0; i < angvel.length; i++) {
+        for (let j = 0; j < angvel[i].length; j++) {
+            if (angvel[i][j][0] === '1') { initialAngVelVariants.push("Primary"); }
+            else if (angvel[i][j][0] === '2') { initialAngVelVariants.push("Backup"); }
+            initialAngVelTimes.push(angvel[i][j][1]);
+            initialAngVelX.push(angvel[i][j][2]);
+            initialAngVelY.push(angvel[i][j][3]);
+            initialAngVelZ.push(angvel[i][j][4]);
+        }
+      }
+
+      setMagVariants(initialmagvariants);
+      setMagLSB(initialmaglsb);
+      setMagTime(initialmagtimes);
+      setMagX(initialmagx);
+      setMagY(initialmagy);
+      setMagZ(initialmagz);
+
+      setAngVelVariants(initialAngVelVariants);
+      setAngVelTime(initialAngVelTimes);
+      setAngVelX(initialAngVelX);
+      setAngVelY(initialAngVelY);
+      setAngVelZ(initialAngVelZ);
+
+      setMagneticData(magnetic);
+      setAngVelData(angvel);
+    } 
+    load().catch(console.error);
+  }, []);
+
+  // WORK IN PROGRESS
+
+  return (
+    <Box component="section" sx={{ p: 4, background: "#292d33", margin: 5 }}>
+      <Box>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>        
+          <header>
+            Magnetic Field Data (uT)
+          </header>
+          <header>
+            Angular Velocity Data (deg/s)
+          </header>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}} >
+          <div style={{ display: 'flex', flexDirection: 'row', gap: '10px'}} >
+          <p>
+            VARIANT:
+            {
+              magVariants.map((variant, index) => (
+                <p>{variant}</p>
+              ))
+            }
+          </p> 
+          <p>
+            LSB: 
+            {
+              magLSB.map((lsb, index) => (
+                <p>{String(lsb)}</p>
+              ))
+            }
+          </p>
+          <p>
+            Time: 
+            {
+              magTime.map((time, index) => (
+                <p>{formatTime(time)}</p>
+              ))
+            }
+          </p>
+          <p>
+            X: 
+            {
+              magX.map((x, index) => (
+                <p>{x}</p>
+              ))
+            }
+          </p>
+          <p>
+            Y: 
+            {
+              magY.map((y, index) => (
+                <p>{y}</p>
+              ))
+            }
+          </p>
+          <p>
+            Z: 
+            {
+              magZ.map((z, index) => (
+                <p>{z}</p>
+              ))
+            }
+          </p>
+          </div>
+          <hr />
+          <div style={{ display: 'flex', flexDirection: 'row', gap: '10px'}} >
+          <p>
+            VARIANT:
+            {
+              angVelVariants.map((variant, index) => (
+                <p>{variant}</p>
+              ))
+            }
+          </p>
+          <p>
+            Time: 
+            {
+              angVelTime.map((time, index) => (
+                <p>{formatTime(time)}</p>
+              ))
+            }
+          </p>
+          <p>
+            X: 
+            {
+              angVelX.map((x, index) => (
+                <p>{x}</p>
+              ))
+            }
+          </p>
+          <p>
+            Y: 
+            {
+              angVelY.map((y, index) => (
+                <p>{y}</p>
+              ))
+            }
+          </p>
+          <p>
+            Z: 
+            {
+              angVelZ.map((z, index) => (
+                <p>{z}</p>
+              ))
+            }
+          </p>
+          </div>
+          </div>
+        <div>
+    </div>
+      </Box>
+    </Box>
+  );
+}

server/Dockerfile

@@ -8,6 +8,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 5000
+EXPOSE 5001
 
 CMD ["npm", "start"]

server/config/env.js

@@ -9,7 +9,7 @@ const db_password = process.env.DB_PASS;
 const db_adminToken = process.env.DB_TOKEN;
 const db_bucket = process.env.DB_BUCKET;
 const db_org = process.env.DB_ORG;
-const api_port = 5000;
+const api_port = 5001; // port 5000 is used by macOS 
 
 if(!db_url){
     console.error('DB_URL is not set');

server/docker-compose.yaml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
     ports:
-      - "5000:5000"
+      - "5001:5001"
     links:
       - influxdb
     depends_on: