web: Implement Jobs component

web/backend/src/server.jl

@@ -9,11 +9,17 @@ struct ServerHandle
     processor::JobProcessor
 end
 
+RESPONSE_HEADERS = [
+    "Access-Control-Allow-Origin" => "*",
+    "Access-Control-Allow-Methods" => "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers" => "Content-Type",
+]
+
 function submit(req, processor::JobProcessor)
     # Check if request body is empty
     compressed_body = HTTP.payload(req)
     if isempty(compressed_body)
-        return HTTP.Response(400, "Error: No file provided")
+        return HTTP.Response(400, RESPONSE_HEADERS, "Error: No file provided")
     end
 
     # Validate compressed JSON by decompressing and parsing
@@ -21,7 +27,11 @@ function submit(req, processor::JobProcessor)
         decompressed_data = transcode(GzipDecompressor, compressed_body)
         JSON.parse(String(decompressed_data))
     catch e
-        return HTTP.Response(400, "Error: Invalid compressed JSON")
+        return HTTP.Response(
+            400,
+            RESPONSE_HEADERS,
+            "Error: Invalid compressed JSON",
+        )
     end
 
     # Generate random job ID (lowercase letters and numbers)
@@ -40,7 +50,7 @@ function submit(req, processor::JobProcessor)
 
     # Return job ID as JSON
     response_body = JSON.json(Dict("job_id" => job_id))
-    return HTTP.Response(200, response_body)
+    return HTTP.Response(200, RESPONSE_HEADERS, response_body)
 end
 
 function jobs_view(req)
@@ -53,7 +63,7 @@ function jobs_view(req)
 
     # Check if job directory exists
     if !isdir(job_dir)
-        return HTTP.Response(404, "Job not found")
+        return HTTP.Response(404, RESPONSE_HEADERS, "Job not found")
     end
 
     # Read log file if it exists
@@ -65,16 +75,13 @@ function jobs_view(req)
     output_content = isfile(output_path) ? read(output_path, String) : nothing
 
     # Create response JSON
-    response_data = Dict(
-        "log" => log_content,
-        "solution" => output_content
-    )
+    response_data = Dict("log" => log_content, "solution" => output_content)
 
     response_body = JSON.json(response_data)
-    return HTTP.Response(200, response_body)
+    return HTTP.Response(200, RESPONSE_HEADERS, response_body)
 end
 
-function start_server(port::Int = 8080; optimizer)
+function start_server(host, port; optimizer)
     Random.seed!()
 
     function work_fn(job_id)
@@ -95,6 +102,7 @@ function start_server(port::Int = 8080; optimizer)
                         UnitCommitment.optimize!(model)
                         solution = UnitCommitment.solution(model)
                         UnitCommitment.write(solution_filename, solution)
+                        return
                     end
                 end
             end
@@ -115,13 +123,21 @@ function start_server(port::Int = 8080; optimizer)
 
     router = HTTP.Router()
 
+    # Register CORS preflight endpoint
+    HTTP.register!(
+        router,
+        "OPTIONS",
+        "/**",
+        req -> HTTP.Response(200, RESPONSE_HEADERS, ""),
+    )
+
     # Register /submit endpoint
     HTTP.register!(router, "POST", "/submit", req -> submit(req, processor))
 
     # Register job/*/view endpoint
     HTTP.register!(router, "GET", "/jobs/*/view", jobs_view)
 
-    server = HTTP.serve!(router, port; verbose = false)
+    server = HTTP.serve!(router, host, port; verbose = false)
     return ServerHandle(server, processor)
 end
 

web/backend/test/src/jobs_test.jl

@@ -11,6 +11,7 @@ function jobs_test_usage()
         received_job_id = []
         function work_fn(job_id)
             push!(received_job_id, job_id)
+            return
         end
 
         # Create processor with work function

web/backend/test/src/server_test.jl

@@ -2,17 +2,18 @@
 # Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
 # Released under the modified BSD license. See COPYING.md for more details.
 
+const HOST = "127.0.0.1"
 const PORT = 32617
 
 function server_test_usage()
-    server = Backend.start_server(PORT; optimizer = HiGHS.Optimizer)
+    server = Backend.start_server(HOST, PORT; optimizer = HiGHS.Optimizer)
     try
         # Read the compressed fixture file
         compressed_data = read(fixture("case14.json.gz"))
 
         # Submit test case
         response = HTTP.post(
-            "http://localhost:$PORT/submit",
+            "http://$HOST:$PORT/submit",
             ["Content-Type" => "application/gzip"],
             compressed_data,
         )
@@ -42,7 +43,7 @@ function server_test_usage()
         @test saved_data == compressed_data
 
         # Query job information
-        view_response = HTTP.get("http://localhost:$PORT/jobs/$job_id/view")
+        view_response = HTTP.get("http://$HOST:$PORT/jobs/$job_id/view")
         @test view_response.status == 200
 
         # Check response
@@ -53,7 +54,7 @@ function server_test_usage()
         @test view_data["solution"] !== nothing
 
         # Clean up
-        rm(job_dir, recursive=true)
+        rm(job_dir, recursive = true)
     finally
         stop(server)
     end

web/frontend/.env

@@ -1 +1,2 @@
 FAST_REFRESH=false
+REACT_APP_BACKEND_URL=http://localhost:9000

web/frontend/package-lock.json

@@ -28,6 +28,7 @@
         "papaparse": "^5.5.2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-router": "^7.9.5",
         "react-scripts": "^5.0.1",
         "tabulator-tables": "^6.3.1",
         "typescript": "^4.9.5",
@@ -14181,6 +14182,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz",
+      "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15062,6 +15094,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

web/frontend/package.json

@@ -23,6 +23,7 @@
     "papaparse": "^5.5.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router": "^7.9.5",
     "react-scripts": "^5.0.1",
     "tabulator-tables": "^6.3.1",
     "typescript": "^4.9.5",

web/frontend/public/index.html

@@ -16,7 +16,7 @@
         --box-border: 1px solid rgba(0, 0, 0, 0.2);
         --box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.2);
         --border-radius: 4px;
-        --primary: #0d6efd;
+        --primary: #0097A7;
         --contrast-100: #202020;
         --contrast-80: #606060;
         --contrast-60: #909090;

web/frontend/src/components/CaseBuilder/CaseBuilder.tsx

@@ -12,7 +12,9 @@ import { BLANK_SCENARIO } from "../../core/Data/fixtures";
 import "tabulator-tables/dist/css/tabulator.min.css";
 import "../Common/Forms/Tables.css";
 import { useState } from "react";
-import Footer from "./Footer";
+import { useNavigate } from "react-router";
+import Footer from "../Common/Footer";
+import * as pako from "pako";
 import { offerDownload } from "../Common/io";
 import { preprocess } from "../../core/Operations/preprocessing";
 import Toast from "../Common/Forms/Toast";
@@ -30,6 +32,7 @@ export interface CaseBuilderSectionProps {
 }
 
 const CaseBuilder = () => {
+  const navigate = useNavigate();
   const [scenario, setScenario] = useState(() => {
     const savedScenario = localStorage.getItem("scenario");
     if (!savedScenario) return BLANK_SCENARIO;
@@ -91,6 +94,33 @@ const CaseBuilder = () => {
     setAndSaveScenario(undoStack[undoStack.length - 1]!, false);
   };
 
+  const onSolve = async () => {
+    // Compress scenario
+    const jsonString = JSON.stringify(scenario);
+    const compressed = pako.gzip(jsonString);
+
+    // POST to backend
+    const backendUrl = process.env.REACT_APP_BACKEND_URL;
+    const response = await fetch(`${backendUrl}/submit`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/gzip",
+      },
+      body: compressed,
+    });
+
+    // Error handling
+    if (!response.ok) {
+      setToastMessage("Failed to submit file. See console for more details.");
+      console.log(response);
+      return;
+    }
+
+    // Parse response
+    const data = await response.json();
+    navigate(`/jobs/${data.job_id}`);
+  };
+
   return (
     <div>
       <Header
@@ -98,6 +128,7 @@ const CaseBuilder = () => {
         onSave={onSave}
         onLoad={onLoad}
         onUndo={onUndo}
+        onSolve={onSolve}
       />
       <div className="content">
         <Parameters

web/frontend/src/components/CaseBuilder/Header.tsx

@@ -4,7 +4,7 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
-import styles from "./Header.module.css";
+import styles from "../Common/Header.module.css";
 import SiteHeaderButton from "../Common/Buttons/SiteHeaderButton";
 import { useRef } from "react";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
@@ -15,6 +15,7 @@ interface HeaderProps {
   onSave: () => void;
   onUndo: () => void;
   onLoad: (data: UnitCommitmentScenario) => void;
+  onSolve: () => void;
 }
 
 function Header(props: HeaderProps) {
@@ -36,6 +37,11 @@ function Header(props: HeaderProps) {
           <SiteHeaderButton title="Clear" onClick={props.onClear} />
           <SiteHeaderButton title="Load" onClick={onLoad} />
           <SiteHeaderButton title="Save" onClick={props.onSave} />
+          <SiteHeaderButton
+            title="Solve"
+            variant="primary"
+            onClick={props.onSolve}
+          />
         </div>
         <FileUploadElement ref={fileElem} accept=".json,.json.gz" />
       </div>

web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css

@@ -12,17 +12,33 @@
   box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   cursor: pointer;
-  color: var(--contrast-80);
   text-transform: uppercase;
   font-weight: bold;
   font-size: 12px;
+}
+
+.light {
+  color: var(--contrast-80);
   background: linear-gradient(var(--contrast-0) 25%, var(--contrast-10) 100%);
 }
 
-.SiteHeaderButton:hover {
+.light:hover {
   background: rgb(245, 245, 245);
 }
 
-.SiteHeaderButton:active {
+.light:active {
   background: rgba(220, 220, 220);
 }
+
+.primary {
+  color: white;
+  background: linear-gradient(var(--primary) 25%, color-mix(in hsl, #000, var(--primary) 90%) 100%);
+}
+
+.primary:hover {
+  background: color-mix(in hsl, #fff, var(--primary) 90%);
+}
+
+.primary:active {
+  background: color-mix(in hsl, #000, var(--primary) 90%);
+}

web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx

@@ -9,12 +9,19 @@ import styles from "./SiteHeaderButton.module.css";
 function SiteHeaderButton({
   title,
   onClick,
+  variant = "light",
 }: {
   title: string;
   onClick?: () => void;
+  variant?: "light" | "primary";
 }) {
+  const variantClass = variant === "primary" ? styles.primary : styles.light;
+
   return (
-    <button className={styles.SiteHeaderButton} onClick={onClick}>
+    <button
+      className={`${styles.SiteHeaderButton} ${variantClass}`}
+      onClick={onClick}
+    >
       {title}
     </button>
   );

web/frontend/src/components/Common/Forms/DataTable.tsx

@@ -142,7 +142,6 @@ export const generateTableData = (
         case "lineContingency":
           if (contingencyLines === null) {
             contingencyLines = getContingencyTransmissionLines(scenario);
-            console.log(contingencyLines);
           }
           entry[spec.title] = contingencyLines.has(entryName);
           break;

web/frontend/src/components/Jobs/Header.tsx

@@ -0,0 +1,20 @@
+/*
+ * UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+ * Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
+ * Released under the modified BSD license. See COPYING.md for more details.
+ */
+
+import styles from "../Common/Header.module.css";
+
+function Header() {
+  return (
+    <div className={styles.HeaderBox}>
+      <div className={styles.HeaderContent}>
+        <h1>UnitCommitment.jl</h1>
+        <h2>Solver</h2>
+      </div>
+    </div>
+  );
+}
+
+export default Header;

web/frontend/src/components/Jobs/Jobs.module.css

@@ -0,0 +1,19 @@
+/*
+ * UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+ * Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
+ * Released under the modified BSD license. See COPYING.md for more details.
+ */
+
+.SolverLog {
+  white-space: preserve;
+  font-family: monospace;
+  padding: 12px;
+  background-color: var(--contrast-0);
+  color: var(--contrast-100);
+  border: var(--box-border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  height: 40em;
+  overflow: auto;
+  scrollbar-width: none;
+}

web/frontend/src/components/Jobs/Jobs.tsx

@@ -0,0 +1,93 @@
+/*
+ * UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+ * Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
+ * Released under the modified BSD license. See COPYING.md for more details.
+ */
+
+import { useParams } from "react-router";
+import { useEffect, useRef, useState } from "react";
+import Header from "./Header";
+import Footer from "../Common/Footer";
+import SectionHeader from "../Common/SectionHeader/SectionHeader";
+import styles from "./Jobs.module.css";
+import formStyles from "../Common/Forms/Form.module.css";
+
+interface JobData {
+  log: string;
+  solution: any;
+}
+
+const Jobs = () => {
+  const { jobId } = useParams();
+  const [jobData, setJobData] = useState<JobData | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+  const previousLogRef = useRef<string>("");
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const fetchJobData = async () => {
+      const backendUrl = process.env.REACT_APP_BACKEND_URL;
+      const response = await fetch(`${backendUrl}/jobs/${jobId}/view`);
+      if (!response.ok) {
+        console.error(response);
+        return;
+      }
+      const data = await response.json();
+
+      if (data.solution) {
+        // Stop polling if solution exists
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+
+        // Parse solution
+        data.solution = JSON.parse(data.solution);
+      }
+
+      // Update data
+      setJobData(data);
+      console.log(data);
+    };
+
+    // Fetch immediately
+    fetchJobData();
+
+    // Set up polling every second
+    intervalRef.current = setInterval(fetchJobData, 1000);
+
+    // Cleanup interval on unmount
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [jobId]);
+
+  // Auto-scroll to the bottom when log content changes
+  useEffect(() => {
+    if (jobData?.log && jobData.log !== previousLogRef.current) {
+      previousLogRef.current = jobData.log;
+      if (logRef.current) {
+        logRef.current.scrollTop = logRef.current.scrollHeight;
+      }
+    }
+  }, [jobData?.log]);
+
+  return (
+    <div>
+      <Header />
+      <div className="content">
+        <SectionHeader title="Optimization log"></SectionHeader>
+        <div className={formStyles.FormWrapper}>
+          <div className={styles.SolverLog} ref={logRef}>
+            {jobData ? jobData.log : "Loading..."}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Jobs;

web/frontend/src/index.tsx

@@ -8,15 +8,23 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import reportWebVitals from "./reportWebVitals";
 import CaseBuilder from "./components/CaseBuilder/CaseBuilder";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router";
+import Jobs from "./components/Jobs/Jobs";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
 
 root.render(
-  <React.StrictMode>
-    <CaseBuilder />
-  </React.StrictMode>,
+  <BrowserRouter>
+    <React.StrictMode>
+      <Routes>
+        <Route path="/builder" element={<CaseBuilder />} />
+        <Route path="/jobs/:jobId" element={<Jobs />} />
+        <Route path="/" element={<Navigate to="/builder" replace />} />
+      </Routes>
+    </React.StrictMode>
+  </BrowserRouter>,
 );
 
 reportWebVitals();

web/frontend/tsconfig.json

@@ -29,7 +29,6 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "checkJs": true
   },
   "include": ["src"]
 }