Update MSW handlers (#41)

Author: jacobfilik

web-conexs-client/src/main.tsx

@@ -4,18 +4,19 @@ import "./index.css";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 
-//import axios from "axios";
+import axios from "axios";
 
 async function enableMocking() {
-  //axios.defaults.headers.common["Authorization"] = "Bearer test_user4";
-  return;
-  // if (process.env.NODE_ENV !== "development") {
-  //   return;
-  // }
-  // const { worker } = await import("./mocks/browser");
-  // // `worker.start()` returns a Promise that resolves
-  // // once the Service Worker is up and ready to intercept requests.
-  // return worker.start();
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+
+  axios.defaults.headers.common["Authorization"] = "Bearer test_user";
+
+  const { worker } = await import("./mocks/browser");
+  // `worker.start()` returns a Promise that resolves
+  // once the Service Worker is up and ready to intercept requests.
+  return worker.start();
 }
 
 enableMocking().then(() => {

web-conexs-client/src/mocks/handlers.ts

@@ -1,6 +1,7 @@
 import { http, HttpResponse, delay } from "msw";
 import {
   Crystal,
+  CrystalInput,
   HPCCluster,
   Molecule,
   MoleculeInput,
@@ -9,34 +10,85 @@ import {
   Person,
   Simulation,
   SimulationPage,
+  Structure,
+  StructureWithMetadata,
+  XASData,
 } from "../models";
+import { Cluster } from "cluster";
 
 const orcaMockOutput = "********\n**ORCA RESULT**\n********";
+const orcaMockJobfile = "********\n**ORCA JOBFILE**\n********";
 
-const mockMolecule: Molecule = {
+const mockCrystalStructure: Crystal = {
   id: 1,
-  label: "MockBenzene",
-
-  structure:
-    "C   0.000000  1.402720  0.000000\nH   0.000000  2.490290  0.000000\nC  -1.214790  0.701360  0.000000\nH  -2.156660  1.245150  0.000000\nC  -1.214790 -0.701360  0.000000\nH  -2.156660 -1.245150  0.000000\nC   0.000000 -1.402720  0.000000\nH   0.000000 -2.490290  0.000000\nC   1.214790 -0.701360  0.000000\nH   2.156660 -1.245150  0.000000\nC   1.214790  0.701360  0.000000\nH   2.156660  1.245150  0.000000",
+  lattice: {
+    a: 4.1043564,
+    b: 4.1043564,
+    c: 4.1043564,
+    alpha: 90,
+    beta: 90,
+    gamma: 90,
+  },
+  label: "test",
+  sites: [
+    { element_z: 47, x: 0.0, y: 0.0, z: 0.0, index: 1 },
+    { element_z: 47, x: 0.5, y: 0.5, z: 0.0, index: 2 },
+    { element_z: 47, x: 0.5, y: 0.0, z: 0.5, index: 3 },
+    { element_z: 47, x: 0.0, y: 0.5, z: 0.5, index: 4 },
+  ],
 };
 
-const mockCrystal: Crystal = {
+const mockCrystal: Structure = {
   id: 1,
+  label: "test",
+  person_id: 1,
+  lattice_id: 1,
+};
+
+const mockCrysWithMetadata: StructureWithMetadata = {
+  atom_count: 4,
+  elements: [47],
+  structure: mockCrystal,
+};
 
-  a: 4.1043564,
-  b: 4.1043564,
-  c: 4.1043564,
-  alpha: 90,
-  beta: 90,
-  gamma: 90,
+const mockMoleculeStructure: Molecule = {
+  id: 2,
+  label: "Benzene",
+  sites: [
+    { index: 1, element_z: 6, x: 0.0, y: 1.40272, z: 0.0 },
+    { index: 2, element_z: 1, x: 0.0, y: 2.49029, z: 0.0 },
+    { index: 3, element_z: 6, x: -1.21479, y: 0.70136, z: 0.0 },
+    { index: 4, element_z: 1, x: -2.15666, y: 1.24515, z: 0.0 },
+    { index: 5, element_z: 6, x: -1.21479, y: -0.70136, z: 0.0 },
+    { index: 6, element_z: 1, x: -2.15666, y: -1.24515, z: 0.0 },
+    { index: 7, element_z: 6, x: 0.0, y: -1.40272, z: 0.0 },
+    { index: 8, element_z: 1, x: 0.0, y: -2.49029, z: 0.0 },
+    { index: 9, element_z: 6, x: 1.21479, y: -0.70136, z: 0.0 },
+    { index: 10, element_z: 1, x: 2.15666, y: -1.24515, z: 0.0 },
+    { index: 11, element_z: 6, x: 1.21479, y: 0.70136, z: 0.0 },
+    { index: 12, element_z: 1, x: 2.15666, y: 1.24515, z: 0.0 },
+  ],
+};
+
+const mockMole: Structure = {
+  id: 2,
   label: "test",
-  structure: "Ag 0. 0. 0.\nAg 0.5 0.5 0.\nAg 0.5 0. 0.5\nAg 0. 0.5 0.5",
+  person_id: 1,
+  lattice_id: null,
 };
 
-const mockCrystalArray = [mockCrystal];
+const mockMoleWithMetadata: StructureWithMetadata = {
+  atom_count: 12,
+  elements: [1, 6],
+  structure: mockMole,
+};
 
-const mockArray = [mockMolecule];
+const mockXASdata: XASData = {
+  energy: [1, 2, 3, 4, 5],
+  xas: [1, 2, 3, 2, 1],
+  stk_energy: [2, 3, 3, 3, 4],
+  stk_xas: [0, 0, 3, 0, 0],
+};
 
 const mockSimulation: Simulation = {
   id: 1,
@@ -46,7 +98,7 @@ const mockSimulation: Simulation = {
   status: "mock",
   working_directory: "/mock",
   request_date: "2025-02-27T09:22:41.035872",
-  chemical_structure_id: 1,
+  chemical_structure_id: 2,
   submission_date: null,
   completion_date: null,
 };
@@ -69,34 +121,6 @@ const mockOrcaSimulation: OrcaSimulation = {
 const mockSimulations = [mockSimulation];
 
 export const handlers = [
-  http.get("/api/molecules", async () => {
-    await delay(10000);
-    return HttpResponse.json(mockArray);
-  }),
-
-  http.get("/api/molecules/:id", ({ params }) => {
-    const { id } = params;
-
-    const mol = mockArray.find((el) => el.id == Number(id));
-
-    if (mol) {
-      return HttpResponse.json(mol);
-    } else {
-      return new HttpResponse(null, { status: 404 });
-    }
-  }),
-
-  http.post("/api/molecules", async ({ request }) => {
-    // Read the intercepted request body as JSON.
-    const newMolecule = (await request.json()) as MoleculeInput;
-
-    const responseMolecule: Molecule = { ...newMolecule, id: 10 };
-
-    // Don't forget to declare a semantic "201 Created"
-    // response and send back the newly created post!
-    return HttpResponse.json(responseMolecule, { status: 201 });
-  }),
-
   http.get("/api/simulations", () => {
     const page: SimulationPage = {
       items: [mockSimulation],
@@ -128,12 +152,18 @@ export const handlers = [
     return HttpResponse.json(mockOrcaSimulation);
   }),
 
-  http.get("/api/orca/:id/output", ({ params }) => {
-    const { id } = params;
-
+  http.get("/api/orca/:id/output", () => {
     return HttpResponse.text(orcaMockOutput);
   }),
 
+  http.get("/api/orca/:id/jobfile", () => {
+    return HttpResponse.text(orcaMockJobfile);
+  }),
+
+  http.get("/api/orca/:id/xas", () => {
+    return HttpResponse.json(mockXASdata);
+  }),
+
   http.post("/api/submit/orca", async ({ request }) => {
     // Read the intercepted request body as JSON.
     const newOrcaSimulation = (await request.json()) as OrcaSimulationInput;
@@ -148,38 +178,71 @@ export const handlers = [
     return HttpResponse.json(responseSimulation, { status: 201 });
   }),
 
-  http.get("/api/crystals", async () => {
-    return HttpResponse.json(mockCrystalArray);
-  }),
-
   http.get("/api/user", async (request) => {
     const auth = request.request.headers.get("authorization");
 
     if (auth && auth.startsWith("Bearer ")) {
-      const user: Person = { identifier: auth.slice(7) };
+      const user: Person = {
+        identifier: auth.slice(7),
+        accepted_orca_eula: true,
+      };
       return HttpResponse.json(user);
     }
 
     return new HttpResponse(null, { status: 401 });
   }),
 
+  http.get("/api/cluster/status", async () => {
+    const clusterStatus: HPCCluster = {
+      id: 1,
+      updated: new Date(Date.now()).toISOString().slice(0, -1),
+    };
+    return HttpResponse.json(clusterStatus);
+  }),
+
   http.get("/api/matproj/:id", async (request) => {
     const auth = request.request.headers.get("authorization");
 
     if (auth && auth.startsWith("Bearer ")) {
-      return HttpResponse.json(mockCrystal);
+      return HttpResponse.json(mockCrystalStructure);
     }
 
     return new HttpResponse(null, { status: 401 });
   }),
 
   http.get("/api/cluster/status", async () => {
+    const cluster: HPCCluster = { id: 1, updated: Date.now().toString() };
 
+    return HttpResponse.json(cluster);
+  }),
 
-    const cluster : HPCCluster = {id: 1, updated: Date.now().toString()}
+  http.get("/api/structures", async ({ request }) => {
+    const url = new URL(request.url);
 
+    console.log(url);
 
+    // Given a request url of "/product?id=1",
+    // the `productId` will be a "1" string.
+    const type = url.searchParams.get("type");
+
+    console.log(type);
+
+    if (type == "crystal") {
+      return HttpResponse.json([mockCrysWithMetadata]);
+    } else {
+      return HttpResponse.json([mockMoleWithMetadata]);
+    }
+  }),
+
+  http.get("/api/structures/:id", async ({ params }) => {
+    const { id } = params;
+
+    if (id == "1") {
+      return HttpResponse.json(mockCrystalStructure);
+    } else if (id == "2") {
+      return HttpResponse.json(mockMoleculeStructure);
+    }
 
-    return HttpResponse.json(cluster)
+    return new HttpResponse(null, { status: 404 });
   }),
 ];

web-conexs-client/src/models.ts

@@ -46,7 +46,7 @@ export interface Structure {
   label: string;
   person_id: number;
   id: number;
-  lattice_id: number;
+  lattice_id: number | null;
 }
 
 export interface StructureWithMetadata {