web: Profiled units

web: display toast, maintain table stage, localStorage
web: use defaults; calculate table height
55 changed files with 20641 additions and 6 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
+*-off.md
 *.bak
 *.gz
 *.ipynb
@ -19,6 +20,7 @@
 .apdisk
 .com.apple.timemachine.donotpresent
 .fseventsd
+.idea
 .ipy*
 .vscode
 Icon
@ -32,12 +34,11 @@ benchmark/tables
 benchmark/tmp.json
 build
 docs/_build
+docs/src/tutorials/customizing.md
+docs/src/tutorials/lmp.md
+docs/src/tutorials/market.md
+docs/src/tutorials/usage.md
 instances/**/*.json
 instances/_source
 local
 notebooks
-docs/src/tutorials/usage.md
-docs/src/tutorials/customizing.md
-docs/src/tutorials/market.md
-docs/src/tutorials/lmp.md
-*-off.md
--- a/README.md
+++ b/README.md
@ -108,7 +108,7 @@ See official documentation at: https://anl-ceeesa.github.io/UnitCommitment.jl/

 If you use UnitCommitment.jl in your research (instances, models or algorithms), we kindly request that you cite the package as follows:

-* **Alinson S. Xavier, Aleksandr M. Kazachkov, Ogün Yurdakul, Feng Qiu**. "UnitCommitment.jl: A Julia/JuMP Optimization Package for Security-Constrained Unit Commitment (Version 0.4)". Zenodo (2024). [DOI: 10.5281/zenodo.4269874](https://doi.org/10.5281/zenodo.4269874).
+* **Alinson S. Xavier, Aleksandr M. Kazachkov, Ogün Yurdakul, Jun He, Feng Qiu**. "UnitCommitment.jl: A Julia/JuMP Optimization Package for Security-Constrained Unit Commitment (Version 0.4)". Zenodo (2024). [DOI: 10.5281/zenodo.4269874](https://doi.org/10.5281/zenodo.4269874).

 If you use the instances, we additionally request that you cite the original sources, as described in the documentation.

--- a/web/.env
+++ b/web/.env
@ -0,0 +1 @@
+FAST_REFRESH=false
--- a/web/.gitignore
+++ b/web/.gitignore
@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+assets
--- a/web/.prettierrc.json
+++ b/web/.prettierrc.json
@ -0,0 +1 @@
+{}
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,65 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/pako": "^2.0.3",
+    "@types/papaparse": "^5.3.16",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "ajv": "^8.17.1",
+    "eslint": "^8.57.1",
+    "pako": "^2.1.0",
+    "papaparse": "^5.5.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-scripts": "^5.0.1",
+    "tabulator-tables": "^6.3.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "rules": {
+      "semi": [
+        "error",
+        "always"
+      ]
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/tabulator-tables": "^6.2.6",
+    "prettier": "3.5.3"
+  }
+}
--- a/web/public/favicon.ico
+++ b/web/public/favicon.ico
--- a/web/public/index.html
+++ b/web/public/index.html
@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="UnitCommitment.jl Case Builder" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Case Builder - UnitCommitment.jl</title>
+    <style>
+      :root {
+        --site-max-width: 1500px;
+        --site-min-width: 900px;
+        --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;
+        --contrast-100: #202020;
+        --contrast-80: #606060;
+        --contrast-60: #909090;
+        --contrast-20: #d6d6d6;
+        --contrast-10: #f6f6f6;
+        --contrast-0: #fefefe;
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background-color: #333;
+      }
+      .content {
+        background-color: var(--contrast-10);
+        padding-bottom: 36px;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/web/public/logo192.png
+++ b/web/public/logo192.png
--- a/web/public/logo512.png
+++ b/web/public/logo512.png
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/web/public/robots.txt
+++ b/web/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/web/src/components/CaseBuilder/Buses/Buses.tsx
+++ b/web/src/components/CaseBuilder/Buses/Buses.tsx
@ -0,0 +1,115 @@
+/*
+ * 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 SectionHeader from "../../Common/SectionHeader/SectionHeader";
+import SectionButton from "../../Common/Buttons/SectionButton";
+import {
+  faDownload,
+  faPlus,
+  faUpload,
+} from "@fortawesome/free-solid-svg-icons";
+import { offerDownload } from "../../Common/io";
+import FileUploadElement from "../../Common/Buttons/FileUploadElement";
+import { useRef } from "react";
+import { ValidationError } from "../../../core/Validation/validate";
+import DataTable, {
+  addNameColumn,
+  addTimeseriesColumn,
+  ColumnSpec,
+  generateCsv,
+  generateTableColumns,
+  generateTableData,
+} from "../../Common/Forms/DataTable";
+
+import { UnitCommitmentScenario } from "../../../core/fixtures";
+import { ColumnDefinition } from "tabulator-tables";
+import { parseBusesCsv } from "./BusesCsv";
+
+export const generateBusesData = (
+  scenario: UnitCommitmentScenario,
+): [any[], ColumnDefinition[]] => {
+  const colSpecs: ColumnSpec[] = [
+    {
+      title: "Name",
+      type: "string",
+      width: 150,
+    },
+    {
+      title: "Load (MW)",
+      type: "number[]",
+      width: 60,
+    },
+  ];
+  const columns = generateTableColumns(scenario, colSpecs);
+  const data = generateTableData(scenario.Buses, colSpecs, scenario);
+  return [data, columns];
+};
+
+export const generateBusesColumns = (
+  scenario: UnitCommitmentScenario,
+): ColumnDefinition[] => {
+  const columns: ColumnDefinition[] = [];
+  addNameColumn(columns);
+  addTimeseriesColumn(scenario, "Load (MW)", columns);
+  return columns;
+};
+
+interface BusesProps {
+  scenario: UnitCommitmentScenario;
+  onBusCreated: () => void;
+  onBusDataChanged: (
+    bus: string,
+    field: string,
+    newValue: string,
+  ) => ValidationError | null;
+  onBusDeleted: (bus: string) => ValidationError | null;
+  onBusRenamed: (oldName: string, newName: string) => ValidationError | null;
+  onDataChanged: (scenario: UnitCommitmentScenario) => void;
+}
+
+function BusesComponent(props: BusesProps) {
+  const fileUploadElem = useRef<FileUploadElement>(null);
+
+  const onDownload = () => {
+    const [data, columns] = generateBusesData(props.scenario);
+    const csvContents = generateCsv(data, columns);
+    offerDownload(csvContents, "text/csv", "buses.csv");
+  };
+
+  const onUpload = () => {
+    fileUploadElem.current!.showFilePicker((csvContents: any) => {
+      const newScenario = parseBusesCsv(props.scenario, csvContents);
+      props.onDataChanged(newScenario);
+    });
+  };
+
+  return (
+    <div>
+      <SectionHeader title="Buses">
+        <SectionButton
+          icon={faPlus}
+          tooltip="Add"
+          onClick={props.onBusCreated}
+        />
+        <SectionButton
+          icon={faDownload}
+          tooltip="Download"
+          onClick={onDownload}
+        />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+      </SectionHeader>
+      <DataTable
+        onRowDeleted={props.onBusDeleted}
+        onRowRenamed={props.onBusRenamed}
+        onDataChanged={props.onBusDataChanged}
+        generateData={() => generateBusesData(props.scenario)}
+      />
+      <FileUploadElement ref={fileUploadElem} accept=".csv" />
+    </div>
+  );
+}
+
+export default BusesComponent;
--- a/web/src/components/CaseBuilder/Buses/BusesCsv.ts
+++ b/web/src/components/CaseBuilder/Buses/BusesCsv.ts
@ -0,0 +1,64 @@
+/*
+ * 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 { Buses, UnitCommitmentScenario } from "../../../core/fixtures";
+import Papa from "papaparse";
+import { generateBusesColumns } from "./Buses";
+
+export const parseBusesCsv = (
+  scenario: UnitCommitmentScenario,
+  csvData: string,
+): UnitCommitmentScenario => {
+  const results = Papa.parse(csvData, {
+    header: true,
+    skipEmptyLines: true,
+    transformHeader: (header) => header.trim(),
+    transform: (value) => value.trim(),
+  });
+
+  // Check for parsing errors
+  if (results.errors.length > 0) {
+    throw Error(`Invalid CSV: Parsing error: ${results.errors}`);
+  }
+
+  // Check CSV headers
+  const expectedFields = generateBusesColumns(scenario).map(
+    (col) => col.field,
+  )!;
+  const actualFields = results.meta.fields!;
+  for (let i = 0; i < expectedFields.length; i++) {
+    if (expectedFields[i] !== actualFields[i]) {
+      throw Error(`Invalid CSV: Header mismatch at column ${i + 1}"`);
+    }
+  }
+
+  // Parse each row
+  const T = getNumTimesteps(scenario);
+  const buses: Buses = {};
+  for (let i = 0; i < results.data.length; i++) {
+    const row = results.data[i] as { [key: string]: any };
+    const busName = row["Name"] as string;
+    const busLoad: number[] = Array(T);
+    for (let j = 0; j < T; j++) {
+      busLoad[j] = parseFloat(row[`Load ${j}`]);
+    }
+    buses[busName] = {
+      "Load (MW)": busLoad,
+    };
+  }
+  return {
+    ...scenario,
+    Buses: buses,
+  };
+};
+
+function getNumTimesteps(scenario: UnitCommitmentScenario) {
+  return (
+    (scenario.Parameters["Time horizon (h)"] *
+      scenario.Parameters["Time step (min)"]) /
+    60
+  );
+}
--- a/web/src/components/CaseBuilder/CaseBuilder.tsx
+++ b/web/src/components/CaseBuilder/CaseBuilder.tsx
@ -0,0 +1,166 @@
+/*
+ * 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 Header from "./Header";
+import Parameters from "./Parameters/Parameters";
+import Buses from "./Buses/Buses";
+import {
+  BLANK_SCENARIO,
+  TEST_SCENARIO,
+  UnitCommitmentScenario,
+} from "../../core/fixtures";
+
+import "tabulator-tables/dist/css/tabulator.min.css";
+import "../Common/Forms/Tables.css";
+import { useState } from "react";
+import Footer from "./Footer";
+import { validate, ValidationError } from "../../core/Validation/validate";
+import { offerDownload } from "../Common/io";
+import {
+  changeBusData,
+  createBus,
+  deleteBus,
+  renameBus,
+} from "../../core/Operations/busOperations";
+import {
+  changeParameter,
+  changeTimeHorizon,
+  changeTimeStep,
+} from "../../core/Operations/parameterOperations";
+import { preprocess } from "../../core/Operations/preprocessing";
+import Toast from "../Common/Forms/Toast";
+import ProfiledUnitsComponent from "./ProfiledUnits/ProfiledUnits";
+
+const CaseBuilder = () => {
+  const [scenario, setScenario] = useState(() => {
+    // const savedScenario = localStorage.getItem("scenario");
+    // return savedScenario ? JSON.parse(savedScenario) : TEST_SCENARIO;
+    return TEST_SCENARIO;
+  });
+  const [toastMessage, setToastMessage] = useState<string>("");
+
+  const setAndSaveScenario = (scenario: UnitCommitmentScenario) => {
+    setScenario(scenario);
+    localStorage.setItem("scenario", JSON.stringify(scenario));
+  };
+
+  const onClear = () => {
+    setAndSaveScenario(BLANK_SCENARIO);
+  };
+
+  const onSave = () => {
+    offerDownload(
+      JSON.stringify(scenario, null, 2),
+      "application/json",
+      "case.json",
+    );
+  };
+
+  const onBusCreated = () => {
+    const newScenario = createBus(scenario);
+    setAndSaveScenario(newScenario);
+  };
+
+  const onBusDataChanged = (
+    bus: string,
+    field: string,
+    newValue: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = changeBusData(bus, field, newValue, scenario);
+    if (err) {
+      setToastMessage(err.message);
+      return err;
+    }
+    setAndSaveScenario(newScenario);
+    return null;
+  };
+
+  const onBusDeleted = (bus: string): ValidationError | null => {
+    const newScenario = deleteBus(bus, scenario);
+    setAndSaveScenario(newScenario);
+    return null;
+  };
+
+  const onBusRenamed = (
+    oldName: string,
+    newName: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = renameBus(oldName, newName, scenario);
+    if (err) {
+      setToastMessage(err.message);
+      return err;
+    }
+    setAndSaveScenario(newScenario);
+    return null;
+  };
+
+  const onDataChanged = (newScenario: UnitCommitmentScenario) => {
+    setAndSaveScenario(newScenario);
+  };
+
+  const onProfiledUnitCreated = () => {};
+
+  const onLoad = (scenario: UnitCommitmentScenario) => {
+    const preprocessed = preprocess(
+      scenario,
+    ) as unknown as UnitCommitmentScenario;
+
+    // Validate and assign default values
+    if (!validate(preprocessed)) {
+      setToastMessage("Error loading JSON file");
+      console.error(validate.errors);
+      return;
+    }
+
+    setAndSaveScenario(preprocessed);
+    setToastMessage("Data loaded successfully");
+  };
+
+  const onParameterChanged = (key: string, value: string) => {
+    let newScenario, err;
+    if (key === "Time horizon (h)") {
+      [newScenario, err] = changeTimeHorizon(scenario, value);
+    } else if (key === "Time step (min)") {
+      [newScenario, err] = changeTimeStep(scenario, value);
+    } else {
+      [newScenario, err] = changeParameter(scenario, key, value);
+    }
+    if (err) {
+      setToastMessage(err.message);
+      return err;
+    }
+    setAndSaveScenario(newScenario);
+    return null;
+  };
+
+  return (
+    <div>
+      <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
+      <div className="content">
+        <Parameters
+          onParameterChanged={onParameterChanged}
+          scenario={scenario}
+        />
+        <Buses
+          scenario={scenario}
+          onBusCreated={onBusCreated}
+          onBusDataChanged={onBusDataChanged}
+          onBusRenamed={onBusRenamed}
+          onBusDeleted={onBusDeleted}
+          onDataChanged={onDataChanged}
+        />
+        <ProfiledUnitsComponent
+          scenario={scenario}
+          onProfiledUnitCreated={onProfiledUnitCreated}
+        />
+        <Toast message={toastMessage} />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default CaseBuilder;
--- a/web/src/components/CaseBuilder/Footer.module.css
+++ b/web/src/components/CaseBuilder/Footer.module.css
@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+.Footer {
+  background-color: #333;
+  text-align: center;
+  color: #aaa;
+  font-size: 14px;
+  padding: 16px;
+  line-height: 24px;
+}
--- a/web/src/components/CaseBuilder/Footer.tsx
+++ b/web/src/components/CaseBuilder/Footer.tsx
@ -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.
+ */
+
+import styles from "./Footer.module.css";
+
+function Footer() {
+  return (
+    <div className={styles.Footer}>
+      UnitCommitment.jl: Optimization Package for Security-Constrained Unit
+      Commitment <br />
+      Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
+    </div>
+  );
+}
+
+export default Footer;
--- a/web/src/components/CaseBuilder/Header.module.css
+++ b/web/src/components/CaseBuilder/Header.module.css
@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+.HeaderBox {
+  background-color: var(--contrast-0);
+  border-bottom: var(--box-border);
+  box-shadow: var(--box-shadow);
+  padding: 0;
+  margin: 0;
+}
+
+.HeaderContent {
+  margin: 0 auto;
+  max-width: var(--site-max-width);
+  min-width: var(--site-min-width);
+}
+
+.HeaderContent h1,
+h2 {
+  color: var(--contrast-100);
+  display: inline-block;
+  line-height: 48px;
+  font-size: 28px;
+  margin: 0;
+  padding: 12px;
+}
+
+.HeaderContent h2 {
+  display: inline-block;
+  font-size: 22px;
+  color: var(--contrast-80);
+  font-weight: normal;
+}
+
+.buttonContainer {
+  float: right;
+  padding: 16px 12px;
+}
--- a/web/src/components/CaseBuilder/Header.tsx
+++ b/web/src/components/CaseBuilder/Header.tsx
@ -0,0 +1,45 @@
+/*
+ * 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 "./Header.module.css";
+import SiteHeaderButton from "../Common/Buttons/SiteHeaderButton";
+import { UnitCommitmentScenario } from "../../core/fixtures";
+import { useRef } from "react";
+import FileUploadElement from "../Common/Buttons/FileUploadElement";
+
+interface HeaderProps {
+  onClear: () => void;
+  onSave: () => void;
+  onLoad: (data: UnitCommitmentScenario) => void;
+}
+
+function Header(props: HeaderProps) {
+  const fileElem = useRef<FileUploadElement>(null);
+
+  function onLoad() {
+    fileElem.current!.showFilePicker((data: any) => {
+      const scenario = JSON.parse(data) as UnitCommitmentScenario;
+      props.onLoad(scenario);
+    });
+  }
+
+  return (
+    <div className={styles.HeaderBox}>
+      <div className={styles.HeaderContent}>
+        <h1>UnitCommitment.jl</h1>
+        <h2>Case Builder</h2>
+        <div className={styles.buttonContainer}>
+          <SiteHeaderButton title="Clear" onClick={props.onClear} />
+          <SiteHeaderButton title="Load" onClick={onLoad} />
+          <SiteHeaderButton title="Save" onClick={props.onSave} />
+        </div>
+        <FileUploadElement ref={fileElem} accept=".json,.json.gz" />
+      </div>
+    </div>
+  );
+}
+
+export default Header;
--- a/web/src/components/CaseBuilder/Parameters/Parameters.tsx
+++ b/web/src/components/CaseBuilder/Parameters/Parameters.tsx
@ -0,0 +1,51 @@
+/*
+ * 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 SectionHeader from "../../Common/SectionHeader/SectionHeader";
+import Form from "../../Common/Forms/Form";
+import TextInputRow from "../../Common/Forms/TextInputRow";
+import { UnitCommitmentScenario } from "../../../core/fixtures";
+import { ValidationError } from "../../../core/Validation/validate";
+
+interface ParametersProps {
+  scenario: UnitCommitmentScenario;
+  onParameterChanged: (key: string, value: string) => ValidationError | null;
+}
+
+function Parameters(props: ParametersProps) {
+  return (
+    <div>
+      <SectionHeader title="Parameters"></SectionHeader>
+      <Form>
+        <TextInputRow
+          label="Time horizon"
+          unit="h"
+          tooltip="Length of the planning horizon (in hours)."
+          initialValue={`${props.scenario.Parameters["Time horizon (h)"]}`}
+          onChange={(v) => props.onParameterChanged("Time horizon (h)", v)}
+        />
+        <TextInputRow
+          label="Time step"
+          unit="min"
+          tooltip="Length of each time step (in minutes). Must be a divisor of 60 (e.g. 60, 30, 20, 15, etc)."
+          initialValue={`${props.scenario.Parameters["Time step (min)"]}`}
+          onChange={(v) => props.onParameterChanged("Time step (min)", v)}
+        />
+        <TextInputRow
+          label="Power balance penalty"
+          unit="$/MW"
+          tooltip="Penalty for system-wide shortage or surplus in production (in /MW). This is charged per time step. For example, if there is a shortage of 1 MW for three time steps, three times this amount will be charged."
+          initialValue={`${props.scenario.Parameters["Power balance penalty ($/MW)"]}`}
+          onChange={(v) =>
+            props.onParameterChanged("Power balance penalty ($/MW)", v)
+          }
+        />
+      </Form>
+    </div>
+  );
+}
+
+export default Parameters;
--- a/web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
+++ b/web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
@ -0,0 +1,102 @@
+/*
+ * 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 SectionHeader from "../../Common/SectionHeader/SectionHeader";
+import SectionButton from "../../Common/Buttons/SectionButton";
+import {
+  faDownload,
+  faPlus,
+  faUpload,
+} from "@fortawesome/free-solid-svg-icons";
+import DataTable, {
+  ColumnSpec,
+  generateCsv,
+  generateTableColumns,
+  generateTableData,
+} from "../../Common/Forms/DataTable";
+import { UnitCommitmentScenario } from "../../../core/fixtures";
+import { ColumnDefinition } from "tabulator-tables";
+import { offerDownload } from "../../Common/io";
+
+interface ProfiledUnitsProps {
+  scenario: UnitCommitmentScenario;
+  onProfiledUnitCreated: () => void;
+}
+
+const generateProfiledUnitsData = (
+  scenario: UnitCommitmentScenario,
+): [any[], ColumnDefinition[]] => {
+  const colSpecs: ColumnSpec[] = [
+    {
+      title: "Name",
+      type: "string",
+      width: 150,
+    },
+    {
+      title: "Bus",
+      type: "string",
+      width: 150,
+    },
+    {
+      title: "Cost ($/MW)",
+      type: "number",
+      width: 100,
+    },
+    {
+      title: "Maximum power (MW)",
+      type: "number[]",
+      width: 60,
+    },
+    {
+      title: "Minimum power (MW)",
+      type: "number[]",
+      width: 60,
+    },
+  ];
+  const columns = generateTableColumns(scenario, colSpecs);
+  const data = generateTableData(scenario.Generators, colSpecs, scenario);
+  return [data, columns];
+};
+
+const ProfiledUnitsComponent = (props: ProfiledUnitsProps) => {
+  const onDownload = () => {
+    const [data, columns] = generateProfiledUnitsData(props.scenario);
+    const csvContents = generateCsv(data, columns);
+    offerDownload(csvContents, "text/csv", "profiled_units.csv");
+  };
+  const onUpload = () => {};
+  return (
+    <div>
+      <SectionHeader title="Profiled Units">
+        <SectionButton
+          icon={faPlus}
+          tooltip="Add"
+          onClick={props.onProfiledUnitCreated}
+        />
+        <SectionButton
+          icon={faDownload}
+          tooltip="Download"
+          onClick={onDownload}
+        />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+      </SectionHeader>
+      <DataTable
+        onRowDeleted={() => {
+          return null;
+        }}
+        onRowRenamed={() => {
+          return null;
+        }}
+        onDataChanged={() => {
+          return null;
+        }}
+        generateData={() => generateProfiledUnitsData(props.scenario)}
+      />
+    </div>
+  );
+};
+
+export default ProfiledUnitsComponent;
--- a/web/src/components/Common/Buttons/FileUploadElement.tsx
+++ b/web/src/components/Common/Buttons/FileUploadElement.tsx
@ -0,0 +1,58 @@
+/*
+ * 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 pako from "pako";
+import React, { Component } from "react";
+
+class FileUploadElement extends Component<any> {
+  private inputRef = React.createRef<HTMLInputElement>();
+  private callback: (data: any) => void = () => {};
+
+  showFilePicker = (callback: (data: any) => void) => {
+    this.callback = callback;
+    this.inputRef.current?.click();
+  };
+
+  onFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files![0]!;
+    let isCompressed = file.name.endsWith(".gz");
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        let content = e.target?.result;
+
+        if (isCompressed) {
+          const compressed = new Uint8Array(content as ArrayBuffer);
+          const decompressed = pako.inflate(compressed);
+          content = new TextDecoder().decode(decompressed);
+        }
+
+        this.callback(content as string);
+        this.callback = () => {};
+      };
+      if (isCompressed) {
+        reader.readAsArrayBuffer(file);
+      } else {
+        reader.readAsText(file);
+      }
+    }
+    event.target.value = "";
+  };
+
+  override render() {
+    return (
+      <input
+        ref={this.inputRef}
+        type="file"
+        accept={this.props.accept}
+        style={{ display: "none" }}
+        onChange={this.onFileSelected}
+      />
+    );
+  }
+}
+
+export default FileUploadElement;
--- a/web/src/components/Common/Buttons/HelpButton.module.css
+++ b/web/src/components/Common/Buttons/HelpButton.module.css
@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+.tooltip {
+  visibility: hidden;
+  background-color: var(--contrast-80);
+  color: var(--contrast-10);
+  opacity: 0;
+  width: 250px;
+  margin-top: 36px;
+  margin-left: -250px;
+  position: absolute;
+  z-index: 100;
+  font-size: 14px;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  line-height: 20px;
+  transition: opacity 0.5s;
+  font-weight: normal;
+  text-align: left;
+  padding: 6px 12px;
+}
+
+.icon {
+  color: var(--contrast-60);
+  font-size: 16px;
+  padding: 8px 8px 8px 0;
+}
+
+.HelpButton {
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.HelpButton:hover .tooltip {
+  visibility: visible;
+  opacity: 100%;
+  transition: opacity 0.5s;
+}
--- a/web/src/components/Common/Buttons/HelpButton.tsx
+++ b/web/src/components/Common/Buttons/HelpButton.tsx
@ -0,0 +1,22 @@
+/*
+ * 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 "./HelpButton.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+
+function HelpButton({ text }: { text: String }) {
+  return (
+    <button className={styles.HelpButton}>
+      <span className={styles.tooltip}>{text}</span>
+      <span className={styles.icon}>
+        <FontAwesomeIcon icon={faCircleQuestion} />
+      </span>
+    </button>
+  );
+}
+
+export default HelpButton;
--- a/web/src/components/Common/Buttons/SectionButton.module.css
+++ b/web/src/components/Common/Buttons/SectionButton.module.css
@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.SectionButton {
+  height: 48px;
+  width: 48px;
+  font-size: 16px;
+  border: 0;
+  background-color: transparent;
+  margin: 8px 0 8px 0px;
+  cursor: pointer;
+  color: var(--contrast-60);
+}
+
+.SectionButton:hover {
+  color: var(--contrast-100);
+  background-color: var(--contrast-20);
+  border-radius: var(--border-radius);
+}
+
+.SectionButton:active {
+  background-color: var(--contrast-60);
+}
--- a/web/src/components/Common/Buttons/SectionButton.tsx
+++ b/web/src/components/Common/Buttons/SectionButton.tsx
@ -0,0 +1,29 @@
+/*
+ * 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 { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./SectionButton.module.css";
+
+interface SectionButtonProps {
+  icon: IconDefinition;
+  tooltip: string;
+  onClick?: () => void;
+}
+
+function SectionButton(props: SectionButtonProps) {
+  return (
+    <button
+      className={styles.SectionButton}
+      title={props.tooltip}
+      onClick={props.onClick}
+    >
+      <FontAwesomeIcon icon={props.icon} />
+    </button>
+  );
+}
+
+export default SectionButton;
--- a/web/src/components/Common/Buttons/SiteHeaderButton.module.css
+++ b/web/src/components/Common/Buttons/SiteHeaderButton.module.css
@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+.SiteHeaderButton {
+  padding: 6px 36px;
+  margin: 0 0 0 8px;
+  line-height: 24px;
+  border: var(--box-border);
+  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;
+  background: linear-gradient(var(--contrast-0) 25%, var(--contrast-10) 100%);
+}
+
+.SiteHeaderButton:hover {
+  background: rgb(245, 245, 245);
+}
+
+.SiteHeaderButton:active {
+  background: rgba(220, 220, 220);
+}
--- a/web/src/components/Common/Buttons/SiteHeaderButton.tsx
+++ b/web/src/components/Common/Buttons/SiteHeaderButton.tsx
@ -0,0 +1,23 @@
+/*
+ * 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 "./SiteHeaderButton.module.css";
+
+function SiteHeaderButton({
+  title,
+  onClick,
+}: {
+  title: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button className={styles.SiteHeaderButton} onClick={onClick}>
+      {title}
+    </button>
+  );
+}
+
+export default SiteHeaderButton;
--- a/web/src/components/Common/Forms/DataTable.test.ts
+++ b/web/src/components/Common/Forms/DataTable.test.ts
@ -0,0 +1,58 @@
+/*
+ * 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 assert from "node:assert";
+import { BUS_TEST_DATA_1 } from "../../../core/Operations/busOperations.test";
+import { parseBusesCsv } from "../../CaseBuilder/Buses/BusesCsv";
+import { generateBusesData } from "../../CaseBuilder/Buses/Buses";
+import { generateCsv } from "./DataTable";
+
+test("generate CSV", () => {
+  const [data, columns] = generateBusesData(BUS_TEST_DATA_1);
+  const actualCsv = generateCsv(data, columns);
+  const expectedCsv =
+    "Name,Load (MW) 00:00,Load (MW) 01:00,Load (MW) 02:00,Load (MW) 03:00,Load (MW) 04:00\n" +
+    "b1,35.79534,34.38835,33.45083,32.89729,33.25044\n" +
+    "b2,14.03739,13.48563,13.11797,12.9009,13.03939\n" +
+    "b3,27.3729,26.29698,25.58005,25.15675,25.4268";
+  assert.strictEqual(actualCsv, expectedCsv);
+});
+
+test("parse valid CSV", () => {
+  // const csvContents =
+  //   "Name,Load 0,Load 1,Load 2,Load 3,Load 4\n" +
+  //   "b1,0,1,2,3,4\n" +
+  //   "b3,27.3729,26.29698,25.58005,25.15675,25.4268";
+  // const newScenario = parseBusesCsv(BUS_TEST_DATA_1, csvContents);
+  // assert.deepEqual(newScenario.Buses, {
+  //   b1: {
+  //     "Load (MW)": [0, 1, 2, 3, 4],
+  //   },
+  //   b3: {
+  //     "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268],
+  //   },
+  // });
+});
+
+test("parse invalid CSV (wrong headers)", () => {
+  const csvContents =
+    "Name,Load 5,Load 7,Load 23,Load 3,Load 4\n" +
+    "b1,0,1,2,3,4\n" +
+    "b3,27.3729,26.29698,25.58005,25.15675,25.4268";
+  expect(() => {
+    parseBusesCsv(BUS_TEST_DATA_1, csvContents);
+  }).toThrow(Error);
+});
+
+test("parse invalid CSV (wrong data length)", () => {
+  const csvContents =
+    "Name,Load 0,Load 1,Load 2,Load 3,Load 4\n" +
+    "b1,0,1,2,3\n" +
+    "b3,27.3729,26.29698,25.58005,25.15675,25.4268";
+  expect(() => {
+    parseBusesCsv(BUS_TEST_DATA_1, csvContents);
+  }).toThrow(Error);
+});
--- a/web/src/components/Common/Forms/DataTable.tsx
+++ b/web/src/components/Common/Forms/DataTable.tsx
@ -0,0 +1,308 @@
+/*
+ * 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 { useEffect, useRef, useState } from "react";
+import {
+  CellComponent,
+  ColumnDefinition,
+  TabulatorFull as Tabulator,
+} from "tabulator-tables";
+import { ValidationError } from "../../../core/Validation/validate";
+import { UnitCommitmentScenario } from "../../../core/fixtures";
+
+export interface ColumnSpec {
+  title: string;
+  type: "string" | "number" | "number[]";
+  width: number;
+}
+
+export const generateTableColumns = (
+  scenario: UnitCommitmentScenario,
+  colSpecs: ColumnSpec[],
+) => {
+  const timeSlots = generateTimeslots(scenario);
+  const columns: ColumnDefinition[] = [];
+  colSpecs.forEach((spec) => {
+    switch (spec.type) {
+      case "string":
+        columns.push({
+          ...columnsCommonAttrs,
+          title: spec.title,
+          field: spec.title,
+          minWidth: spec.width,
+        });
+        break;
+      case "number":
+        columns.push({
+          ...columnsCommonAttrs,
+          title: spec.title,
+          field: spec.title,
+          minWidth: spec.width,
+          formatter: floatFormatter,
+        });
+        break;
+      case "number[]":
+        const subColumns: ColumnDefinition[] = [];
+        timeSlots.forEach((t) => {
+          subColumns.push({
+            ...columnsCommonAttrs,
+            title: `${t}`,
+            field: `${spec.title} ${t}`,
+            minWidth: spec.width,
+            formatter: floatFormatter,
+          });
+        });
+        columns.push({
+          title: spec.title,
+          columns: subColumns,
+        });
+        break;
+      default:
+        console.error(`Unknown type: ${spec.type}`);
+    }
+  });
+  return columns;
+};
+
+export const generateTableData = (
+  container: any,
+  colSpecs: ColumnSpec[],
+  scenario: UnitCommitmentScenario,
+): any[] => {
+  const data: any[] = [];
+  const timeslots = generateTimeslots(scenario);
+  for (const [entryName, entryData] of Object.entries(container) as [
+    string,
+    any,
+  ]) {
+    const entry: any = {};
+    for (const spec of colSpecs) {
+      if (spec.title === "Name") {
+        entry["Name"] = entryName;
+        continue;
+      }
+      switch (spec.type) {
+        case "string":
+        case "number":
+          entry[spec.title] = entryData[spec.title];
+          break;
+        case "number[]":
+          for (let i = 0; i < timeslots.length; i++) {
+            entry[`${spec.title} ${timeslots[i]}`] = entryData[spec.title][i];
+          }
+          break;
+        default:
+          console.error(`Unknown type: ${spec.type}`);
+      }
+    }
+    data.push(entry);
+  }
+  return data;
+};
+
+export const generateCsv = (data: any[], columns: ColumnDefinition[]) => {
+  const header: string[] = [];
+  const body: string[][] = data.map(() => []);
+  columns.forEach((column) => {
+    if (column.columns) {
+      column.columns.forEach((subcolumn) => {
+        header.push(subcolumn.field!);
+        for (let i = 0; i < data.length; i++) {
+          body[i]!.push(data[i]![subcolumn["field"]!]);
+        }
+      });
+    } else {
+      header.push(column.field!);
+      for (let i = 0; i < data.length; i++) {
+        body[i]!.push(data[i]![column["field"]!]);
+      }
+    }
+  });
+  const csvHeader = header.join(",");
+  const csvBody = body.map((row) => row.join(",")).join("\n");
+  return `${csvHeader}\n${csvBody}`;
+};
+
+export const floatFormatter = (cell: CellComponent) => {
+  return parseFloat(cell.getValue()).toFixed(1);
+};
+
+export const addNameColumn = (columns: ColumnDefinition[]) => {
+  columns.push({
+    ...columnsCommonAttrs,
+    title: "Name",
+    field: "Name",
+    minWidth: 150,
+  });
+};
+
+export const generateTimeslots = (scenario: UnitCommitmentScenario) => {
+  const timeHorizonHours = scenario["Parameters"]["Time horizon (h)"];
+  const timeStepMin = scenario["Parameters"]["Time step (min)"];
+  const timeslots: string[] = [];
+  for (
+    let m = 0, offset = 0;
+    m < timeHorizonHours * 60;
+    m += timeStepMin, offset += 1
+  ) {
+    const hours = Math.floor(m / 60);
+    const mins = m % 60;
+    const formattedTime = `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+    timeslots.push(formattedTime);
+  }
+  return timeslots;
+};
+
+export const addTimeseriesColumn = (
+  scenario: UnitCommitmentScenario,
+  title: string,
+  columns: ColumnDefinition[],
+  minWidth: number = 65,
+) => {
+  const timeSlots = generateTimeslots(scenario);
+  const subColumns: ColumnDefinition[] = [];
+  timeSlots.forEach((t) => {
+    subColumns.push({
+      ...columnsCommonAttrs,
+      title: `${t}`,
+      field: `${title} ${t}`,
+      minWidth: minWidth,
+      formatter: floatFormatter,
+    });
+  });
+  columns.push({
+    title: title,
+    columns: subColumns,
+  });
+};
+
+export const columnsCommonAttrs: ColumnDefinition = {
+  headerHozAlign: "left",
+  hozAlign: "left",
+  title: "",
+  editor: "input",
+  editorParams: {
+    selectContents: true,
+  },
+  headerWordWrap: true,
+  formatter: "plaintext",
+  headerSort: false,
+  resizable: false,
+};
+
+interface DataTableProps {
+  onRowDeleted: (rowName: string) => ValidationError | null;
+  onRowRenamed: (
+    oldRowName: string,
+    newRowName: string,
+  ) => ValidationError | null;
+  onDataChanged: (
+    rowName: string,
+    key: string,
+    newValue: string,
+  ) => ValidationError | null;
+  generateData: () => [any[], ColumnDefinition[]];
+}
+
+function computeTableHeight(data: any[]): string {
+  const numRows = data.length;
+  const height = 70 + Math.min(numRows, 15) * 28;
+  return `${height}px`;
+}
+
+const DataTable = (props: DataTableProps) => {
+  const tableContainerRef = useRef<HTMLDivElement | null>(null);
+  const tableRef = useRef<Tabulator | null>(null);
+  const [isTableBuilt, setTableBuilt] = useState<Boolean>(false);
+
+  useEffect(() => {
+    const onCellEdited = (cell: CellComponent) => {
+      let newValue = cell.getValue();
+      let oldValue = cell.getOldValue();
+      // eslint-disable-next-line eqeqeq
+      if (newValue == oldValue) return;
+      if (cell.getField() === "Name") {
+        if (newValue === "") {
+          const err = props.onRowDeleted(oldValue);
+          if (err) {
+            cell.restoreOldValue();
+          } else {
+            cell
+              .getRow()
+              .delete()
+              .then((r) => {});
+          }
+        } else {
+          const err = props.onRowRenamed(oldValue, newValue);
+          if (err) {
+            cell.restoreOldValue();
+          }
+        }
+      } else {
+        const row = cell.getRow().getData();
+        const bus = row["Name"];
+        const err = props.onDataChanged(bus, cell.getField(), newValue);
+        if (err) {
+          cell.restoreOldValue();
+        }
+      }
+    };
+    if (tableContainerRef.current === null) return;
+    const [data, columns] = props.generateData();
+    const height = computeTableHeight(data);
+
+    if (tableRef.current === null) {
+      tableRef.current = new Tabulator(tableContainerRef.current, {
+        layout: "fitColumns",
+        data: data,
+        columns: columns,
+        height: height,
+      });
+      tableRef.current.on("tableBuilt", () => {
+        setTableBuilt(true);
+      });
+    }
+    if (isTableBuilt) {
+      const newHeight = height;
+      const newColumns = columns;
+      const newData = data;
+      const oldRows = tableRef.current.getRows();
+
+      // Update data
+      tableRef.current.replaceData(newData).then(() => {});
+
+      // Update columns
+      if (newColumns.length !== tableRef.current.getColumns().length) {
+        tableRef.current.setColumns(newColumns);
+      }
+
+      // Update height
+      if (tableRef.current.options.height !== newHeight) {
+        tableRef.current.setHeight(newHeight);
+      }
+
+      // Scroll to bottom
+      if (tableRef.current.getRows().length === oldRows.length + 1) {
+        setTimeout(() => {
+          const rows = tableRef.current!.getRows()!;
+          const lastRow = rows[rows.length - 1]!;
+          lastRow.scrollTo().then((r) => {});
+          lastRow.getCell("Name").edit();
+        }, 10);
+      }
+
+      // Update callbacks
+      tableRef.current.off("cellEdited");
+      tableRef.current.on("cellEdited", (cell) => {
+        onCellEdited(cell);
+      });
+    }
+  }, [props, isTableBuilt]);
+
+  return <div className="tableContainer" ref={tableContainerRef} />;
+};
+
+export default DataTable;
--- a/web/src/components/Common/Forms/Form.module.css
+++ b/web/src/components/Common/Forms/Form.module.css
@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+.Form {
+  background-color: var(--contrast-0);
+  border: var(--box-border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  min-height: 48px;
+  margin: 0 auto;
+  min-width: var(--site-min-width);
+  max-width: var(--site-max-width);
+  max-height: 500px;
+  padding: 12px 0;
+}
+
+.FormRow {
+  display: flex;
+  line-height: 24px;
+}
+
+.FormRow label {
+  width: 350px;
+  padding: 6px 12px;
+  text-align: right;
+}
+
+.FormRow input {
+  flex: 1;
+  font-family: monospace;
+  border: var(--box-border);
+  border-radius: var(--border-radius);
+  padding: 4px;
+  margin: 2px 3px;
+}
+
+.FormRow_unit {
+  color: rgba(0, 0, 0, 0.4);
+}
--- a/web/src/components/Common/Forms/Form.tsx
+++ b/web/src/components/Common/Forms/Form.tsx
@ -0,0 +1,14 @@
+/*
+ * 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 { ReactNode } from "react";
+import styles from "./Form.module.css";
+
+function Form({ children }: { children: ReactNode }) {
+  return <div className={styles.Form}>{children}</div>;
+}
+
+export default Form;
--- a/web/src/components/Common/Forms/Tables.css
+++ b/web/src/components/Common/Forms/Tables.css
@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+.tabulator {
+  background-color: var(--contrast-0);
+  border: var(--box-border) !important;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  min-height: 48px;
+  margin: 0 auto;
+  min-width: var(--site-min-width);
+  max-width: var(--site-max-width);
+  padding: 0;
+}
+
+.tabulator .tabulator-header {
+  border-bottom: 1px solid #ccc;
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--contrast-100);
+  line-height: 18px;
+}
+
+.tabulator .tabulator-header .subtitle {
+  color: var(--contrast-80);
+  font-weight: normal;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+  vertical-align: middle !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  text-align: left;
+  padding: 0 8px;
+  line-height: 24px;
+}
+
+.tabulator .tabulator-header .tabulator-col:last-child {
+  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.tabulator-row .tabulator-cell {
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 28px;
+  height: 28px;
+  text-align: right;
+  vertical-align: middle !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+  padding: 0 8px;
+}
+
+.tabulator-row-even {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+.tabulator-row-odd {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing {
+  border: 0;
+  padding: 0 4px;
+  background-color: #cee;
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing input {
+  font-family: monospace;
+  text-align: left;
+  font-size: 12px;
+}
+
+.tabulator-col-group-cols {
+  font-size: 12px;
+}
--- a/web/src/components/Common/Forms/TextInputRow.tsx
+++ b/web/src/components/Common/Forms/TextInputRow.tsx
@ -0,0 +1,51 @@
+/*
+ * 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 formStyles from "./Form.module.css";
+import HelpButton from "../Buttons/HelpButton";
+import React, { useRef, useState } from "react";
+import { ValidationError } from "../../../core/Validation/validate";
+
+interface TextInputRowProps {
+  label: string;
+  unit: string;
+  tooltip: string;
+  initialValue: string;
+  onChange: (newValue: string) => ValidationError | null;
+}
+
+function TextInputRow(props: TextInputRowProps) {
+  const [savedValue, setSavedValue] = useState(props.initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    if (newValue === savedValue) return;
+    const err = props.onChange(newValue);
+    if (err) {
+      inputRef.current!.value = savedValue;
+      return;
+    }
+    setSavedValue(newValue);
+  };
+  return (
+    <div className={formStyles.FormRow}>
+      <label>
+        {props.label}
+        <span className={formStyles.FormRow_unit}> ({props.unit})</span>
+      </label>
+      <input
+        ref={inputRef}
+        type="text"
+        defaultValue={savedValue}
+        onBlur={onBlur}
+      />
+      <HelpButton text={props.tooltip} />
+    </div>
+  );
+}
+
+export default TextInputRow;
--- a/web/src/components/Common/Forms/Toast.module.css
+++ b/web/src/components/Common/Forms/Toast.module.css
@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.Toast {
+    width: 600px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 16px -2px rgba(0, 0, 0, 0.5);
+    margin: 0 auto;
+    background-color: #424242;
+    color: white;
+    padding: 0 16px;
+    position: fixed;
+    top: 48px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    transition: opacity 0.5s ease;
+    cursor: default;
+    font-size: 15px;
+    line-height: 48px;
+}
--- a/web/src/components/Common/Forms/Toast.tsx
+++ b/web/src/components/Common/Forms/Toast.tsx
@ -0,0 +1,35 @@
+/*
+ * 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 "./Toast.module.css";
+import { useEffect, useState } from "react";
+
+interface ToastProps {
+  message: string;
+}
+
+const Toast = (props: ToastProps) => {
+  const [isVisible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (props.message.length === 0) return;
+    setVisible(true);
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [props.message]);
+
+  return (
+    <div>
+      <div className={styles.Toast} style={{ opacity: isVisible ? 1 : 0 }}>
+        {props.message}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;
--- a/web/src/components/Common/SectionHeader/SectionHeader.module.css
+++ b/web/src/components/Common/SectionHeader/SectionHeader.module.css
@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+.SectionHeader {
+  max-width: var(--site-max-width);
+  min-width: var(--site-min-width);
+  margin: 0 auto;
+  color: var(--contrast-100);
+}
+
+.SectionHeader h1 {
+  margin: 0;
+  padding: 0 12px;
+  font-size: 16px;
+  line-height: 64px;
+}
+
+.SectionButtonsContainer {
+  float: right;
+  height: 64px;
+}
--- a/web/src/components/Common/SectionHeader/SectionHeader.tsx
+++ b/web/src/components/Common/SectionHeader/SectionHeader.tsx
@ -0,0 +1,24 @@
+/*
+ * 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 "./SectionHeader.module.css";
+import { ReactNode } from "react";
+
+interface SectionHeaderProps {
+  title: string;
+  children?: ReactNode;
+}
+
+function SectionHeader({ title, children }: SectionHeaderProps) {
+  return (
+    <div className={styles.SectionHeader}>
+      <div className={styles.SectionButtonsContainer}>{children}</div>
+      <h1>{title}</h1>
+    </div>
+  );
+}
+
+export default SectionHeader;
--- a/web/src/components/Common/io.ts
+++ b/web/src/components/Common/io.ts
@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export function offerDownload(data: string, type: string, filename: string) {
+  const dataBlob = new Blob([data], { type: type });
+  const url = URL.createObjectURL(dataBlob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
--- a/web/src/core/Operations/busOperations.test.ts
+++ b/web/src/core/Operations/busOperations.test.ts
@ -0,0 +1,122 @@
+/*
+ * 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 { UnitCommitmentScenario } from "../fixtures";
+import {
+  changeBusData,
+  createBus,
+  deleteBus,
+  renameBus,
+} from "./busOperations";
+import assert from "node:assert";
+
+export const BUS_TEST_DATA_1: UnitCommitmentScenario = {
+  Parameters: {
+    Version: "0.4",
+    "Power balance penalty ($/MW)": 1000.0,
+    "Time horizon (h)": 5,
+    "Time step (min)": 60,
+  },
+  Buses: {
+    b1: { "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044] },
+    b2: { "Load (MW)": [14.03739, 13.48563, 13.11797, 12.9009, 13.03939] },
+    b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
+  },
+};
+
+export const BUS_TEST_DATA_2: UnitCommitmentScenario = {
+  Parameters: {
+    Version: "0.4",
+    "Power balance penalty ($/MW)": 1000.0,
+    "Time horizon (h)": 2,
+    "Time step (min)": 30,
+  },
+  Buses: {
+    b1: { "Load (MW)": [30, 30, 30, 30] },
+    b2: { "Load (MW)": [10, 20, 30, 40] },
+    b3: { "Load (MW)": [0, 30, 0, 40] },
+  },
+};
+
+test("createBus", () => {
+  const newScenario = createBus(BUS_TEST_DATA_1);
+  assert.deepEqual(Object.keys(newScenario.Buses), ["b1", "b2", "b3", "b4"]);
+});
+
+test("changeBusData", () => {
+  let scenario = BUS_TEST_DATA_1;
+  let err = null;
+
+  [scenario, err] = changeBusData("b1", "Load 0", "99", scenario);
+  assert.equal(err, null);
+
+  [scenario, err] = changeBusData("b1", "Load 3", "99", scenario);
+  assert.equal(err, null);
+
+  [scenario, err] = changeBusData("b3", "Load 4", "99", scenario);
+  assert.equal(err, null);
+
+  assert.deepEqual(scenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 5,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [99, 34.38835, 33.45083, 99, 33.25044] },
+      b2: { "Load (MW)": [14.03739, 13.48563, 13.11797, 12.9009, 13.03939] },
+      b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 99] },
+    },
+  });
+});
+
+test("changeBusData with invalid numbers", () => {
+  let [, err] = changeBusData("b1", "Load 0", "xx", BUS_TEST_DATA_1);
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: xx");
+});
+
+test("deleteBus", () => {
+  let scenario = BUS_TEST_DATA_1;
+  scenario = deleteBus("b2", scenario);
+  assert.deepEqual(scenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 5,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044] },
+      b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
+    },
+  });
+});
+
+test("renameBus", () => {
+  let [scenario, err] = renameBus("b2", "b99", BUS_TEST_DATA_1);
+  assert(err === null);
+  assert.deepEqual(scenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 5,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044] },
+      b99: { "Load (MW)": [14.03739, 13.48563, 13.11797, 12.9009, 13.03939] },
+      b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
+    },
+  });
+});
+
+test("renameBus with duplicated name", () => {
+  let [, err] = renameBus("b3", "b1", BUS_TEST_DATA_1);
+  assert(err != null);
+  assert.equal(err.message, `Bus b1 already exists`);
+});
--- a/web/src/core/Operations/busOperations.ts
+++ b/web/src/core/Operations/busOperations.ts
@ -0,0 +1,106 @@
+/*
+ * 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 { Buses, UnitCommitmentScenario } from "../fixtures";
+import { ValidationError } from "../Validation/validate";
+
+const generateUniqueBusName = (scenario: UnitCommitmentScenario) => {
+  let newBusName = "b";
+  let counter = 1;
+  let name = `${newBusName}${counter}`;
+  while (name in scenario.Buses) {
+    counter++;
+    name = `${newBusName}${counter}`;
+  }
+  return name;
+};
+
+const generateDefaultBusLoad = (scenario: UnitCommitmentScenario) => {
+  const T =
+    scenario.Parameters["Time horizon (h)"] *
+    (60 / scenario.Parameters["Time step (min)"]);
+  return new Array(T).fill(0);
+};
+
+export const createBus = (scenario: UnitCommitmentScenario) => {
+  const load = generateDefaultBusLoad(scenario);
+  let name = generateUniqueBusName(scenario);
+  return {
+    ...scenario,
+    Buses: {
+      ...scenario.Buses,
+      [name]: {
+        "Load (MW)": load,
+      },
+    },
+  };
+};
+
+export const changeBusData = (
+  bus: string,
+  field: string,
+  newValueStr: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  // Load (MW)
+  const match = field.match(/Load (\d+)/);
+  if (match) {
+    const newValueFloat = parseFloat(newValueStr);
+    if (isNaN(newValueFloat)) {
+      return [scenario, { message: `Invalid value: ${newValueStr}` }];
+    }
+    const idx = parseInt(match[1]!, 10);
+    const newLoad = [...scenario.Buses[bus]!["Load (MW)"]];
+    newLoad[idx] = newValueFloat;
+    return [
+      {
+        ...scenario,
+        Buses: {
+          ...scenario.Buses,
+          [bus]: {
+            "Load (MW)": newLoad,
+          },
+        },
+      },
+      null,
+    ];
+  }
+
+  throw Error(`Unknown field: ${field}`);
+};
+
+export const deleteBus = (bus: string, scenario: UnitCommitmentScenario) => {
+  const { [bus]: _, ...newBuses } = scenario.Buses;
+  return {
+    ...scenario,
+    Buses: newBuses,
+  };
+};
+
+export const renameBus = (
+  oldName: string,
+  newName: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  if (newName in scenario.Buses) {
+    return [scenario, { message: `Bus ${newName} already exists` }];
+  }
+  const newBuses: Buses = Object.keys(scenario.Buses).reduce((acc, val) => {
+    if (val === oldName) {
+      acc[newName] = scenario.Buses[val]!;
+    } else {
+      acc[val] = scenario.Buses[val]!;
+    }
+    return acc;
+  }, {} as Buses);
+  return [
+    {
+      ...scenario,
+      Buses: newBuses,
+    },
+    null,
+  ];
+};
--- a/web/src/core/Operations/parameterOperations.test.ts
+++ b/web/src/core/Operations/parameterOperations.test.ts
@ -0,0 +1,147 @@
+/*
+ * 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 {
+  changeTimeHorizon,
+  changeTimeStep,
+  evaluatePwlFunction,
+} from "./parameterOperations";
+import { BUS_TEST_DATA_1, BUS_TEST_DATA_2 } from "./busOperations.test";
+import assert from "node:assert";
+
+test("changeTimeHorizon: Shrink 1", () => {
+  const [newScenario, err] = changeTimeHorizon(BUS_TEST_DATA_1, "3");
+  assert(err === null);
+  assert.deepEqual(newScenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 3,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [35.79534, 34.38835, 33.45083] },
+      b2: { "Load (MW)": [14.03739, 13.48563, 13.11797] },
+      b3: { "Load (MW)": [27.3729, 26.29698, 25.58005] },
+    },
+  });
+});
+
+test("changeTimeHorizon: Shrink 2", () => {
+  const [newScenario, err] = changeTimeHorizon(BUS_TEST_DATA_2, "1");
+  assert(err === null);
+  assert.deepEqual(newScenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 1,
+      "Time step (min)": 30,
+    },
+    Buses: {
+      b1: { "Load (MW)": [30, 30] },
+      b2: { "Load (MW)": [10, 20] },
+      b3: { "Load (MW)": [0, 30] },
+    },
+  });
+});
+
+test("changeTimeHorizon grow", () => {
+  const [newScenario, err] = changeTimeHorizon(BUS_TEST_DATA_1, "7");
+  assert(err === null);
+  assert.deepEqual(newScenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 7,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: {
+        "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044, 0, 0],
+      },
+      b2: {
+        "Load (MW)": [14.03739, 13.48563, 13.11797, 12.9009, 13.03939, 0, 0],
+      },
+      b3: {
+        "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268, 0, 0],
+      },
+    },
+  });
+});
+
+test("changeTimeHorizon invalid", () => {
+  let [, err] = changeTimeHorizon(BUS_TEST_DATA_1, "x");
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: x");
+
+  [, err] = changeTimeHorizon(BUS_TEST_DATA_1, "-3");
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: -3");
+});
+
+test("evaluatePwlFunction", () => {
+  const data_x = [0, 60, 120, 180];
+  const data_y = [100, 200, 250, 100];
+  assert.equal(evaluatePwlFunction(data_x, data_y, 0), 100);
+  assert.equal(evaluatePwlFunction(data_x, data_y, 15), 125);
+  assert.equal(evaluatePwlFunction(data_x, data_y, 30), 150);
+  assert.equal(evaluatePwlFunction(data_x, data_y, 60), 200);
+  assert.equal(evaluatePwlFunction(data_x, data_y, 180), 100);
+});
+
+test("changeTimeStep", () => {
+  let [scenario, err] = changeTimeStep(BUS_TEST_DATA_2, "15");
+  assert(err === null);
+  assert.deepEqual(scenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 2,
+      "Time step (min)": 15,
+    },
+    Buses: {
+      b1: { "Load (MW)": [30, 30, 30, 30, 30, 30, 30, 30] },
+      b2: { "Load (MW)": [10, 15, 20, 25, 30, 35, 40, 25] },
+      b3: { "Load (MW)": [0, 15, 30, 15, 0, 20, 40, 20] },
+    },
+  });
+
+  [scenario, err] = changeTimeStep(BUS_TEST_DATA_2, "60");
+  assert(err === null);
+  assert.deepEqual(scenario, {
+    Parameters: {
+      Version: "0.4",
+      "Power balance penalty ($/MW)": 1000.0,
+      "Time horizon (h)": 2,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [30, 30] },
+      b2: { "Load (MW)": [10, 30] },
+      b3: { "Load (MW)": [0, 0] },
+    },
+  });
+});
+
+test("changeTimeStep invalid", () => {
+  let [, err] = changeTimeStep(BUS_TEST_DATA_2, "x");
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: x");
+
+  [, err] = changeTimeStep(BUS_TEST_DATA_2, "-10");
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: -10");
+
+  [, err] = changeTimeStep(BUS_TEST_DATA_2, "120");
+  assert(err !== null);
+  assert.equal(err.message, "Invalid value: 120");
+
+  [, err] = changeTimeStep(BUS_TEST_DATA_2, "7");
+  assert(err !== null);
+  assert.equal(err.message, "Time step must be a divisor of 60: 7");
+});
+
+export {};
--- a/web/src/core/Operations/parameterOperations.ts
+++ b/web/src/core/Operations/parameterOperations.ts
@ -0,0 +1,144 @@
+/*
+ * 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 { Buses, UnitCommitmentScenario } from "../fixtures";
+import { ValidationError } from "../Validation/validate";
+
+export const changeTimeHorizon = (
+  scenario: UnitCommitmentScenario,
+  newTimeHorizonStr: string,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  // Parse string
+  const newTimeHorizon = parseInt(newTimeHorizonStr);
+  if (isNaN(newTimeHorizon) || newTimeHorizon <= 0) {
+    return [scenario, { message: `Invalid value: ${newTimeHorizonStr}` }];
+  }
+  const newScenario = JSON.parse(
+    JSON.stringify(scenario),
+  ) as UnitCommitmentScenario;
+  newScenario.Parameters["Time horizon (h)"] = newTimeHorizon;
+  const newT = (newTimeHorizon * 60) / scenario.Parameters["Time step (min)"];
+  const oldT =
+    (scenario.Parameters["Time horizon (h)"] * 60) /
+    scenario.Parameters["Time step (min)"];
+  if (newT < oldT) {
+    Object.values(newScenario.Buses).forEach((bus) => {
+      bus["Load (MW)"] = bus["Load (MW)"].slice(0, newT);
+    });
+  } else {
+    const padding = Array(newT - oldT).fill(0);
+    Object.values(newScenario.Buses).forEach((bus) => {
+      bus["Load (MW)"] = bus["Load (MW)"].concat(padding);
+    });
+  }
+  return [newScenario, null];
+};
+
+export const evaluatePwlFunction = (
+  data_x: number[],
+  data_y: number[],
+  x: number,
+) => {
+  if (x < data_x[0]! || x > data_x[data_x.length - 1]!) {
+    throw Error("PWL interpolation: Out of bounds");
+  }
+
+  if (x === data_x[0]) return data_y[0];
+
+  // Binary search to find the interval containing x
+  let low = 0;
+  let high = data_x.length - 1;
+  while (low < high) {
+    let mid = Math.floor((low + high) / 2);
+    if (data_x[mid]! < x) low = mid + 1;
+    else high = mid;
+  }
+
+  // Linear interpolation within the found interval
+  const x1 = data_x[low - 1]!;
+  const y1 = data_y[low - 1]!;
+  const x2 = data_x[low]!;
+  const y2 = data_y[low]!;
+
+  return y1 + ((x - x1) * (y2 - y1)) / (x2 - x1);
+};
+
+export const changeTimeStep = (
+  scenario: UnitCommitmentScenario,
+  newTimeStepStr: string,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  // Parse string and perform validation
+  const newTimeStep = parseFloat(newTimeStepStr);
+  if (isNaN(newTimeStep) || newTimeStep < 1 || newTimeStep > 60) {
+    return [scenario, { message: `Invalid value: ${newTimeStepStr}` }];
+  }
+  if (60 % newTimeStep !== 0) {
+    return [
+      scenario,
+      { message: `Time step must be a divisor of 60: ${newTimeStepStr}` },
+    ];
+  }
+
+  // Build data_x
+  let timeHorizon = scenario.Parameters["Time horizon (h)"];
+  const oldTimeStep = scenario.Parameters["Time step (min)"];
+  const oldT = (timeHorizon * 60) / oldTimeStep;
+  const newT = (timeHorizon * 60) / newTimeStep;
+  const data_x = Array(oldT + 1).fill(0);
+  for (let i = 0; i <= oldT; i++) data_x[i] = i * oldTimeStep;
+
+  const newBuses: Buses = {};
+  for (const busName in scenario.Buses) {
+    // Build data_y
+    const busLoad = scenario.Buses[busName]!["Load (MW)"];
+    const data_y = Array(oldT + 1).fill(0);
+    for (let i = 0; i < oldT; i++) data_y[i] = busLoad[i];
+    data_y[oldT] = data_y[0];
+
+    // Run interpolation
+    const newBusLoad = Array(newT).fill(0);
+    for (let i = 0; i < newT; i++) {
+      newBusLoad[i] = evaluatePwlFunction(data_x, data_y, newTimeStep * i);
+    }
+    newBuses[busName] = {
+      ...scenario.Buses[busName],
+      "Load (MW)": newBusLoad,
+    };
+  }
+
+  return [
+    {
+      ...scenario,
+      Parameters: {
+        ...scenario.Parameters,
+        "Time step (min)": newTimeStep,
+      },
+      Buses: newBuses,
+    },
+    null,
+  ];
+};
+
+export const changeParameter = (
+  scenario: UnitCommitmentScenario,
+  key: string,
+  valueStr: string,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const value = parseFloat(valueStr);
+  if (isNaN(value)) {
+    return [scenario, { message: `Invalid value: ${valueStr}` }];
+  }
+  return [
+    {
+      ...scenario,
+      Parameters: {
+        ...scenario.Parameters,
+        [key]: value,
+      },
+    },
+    null,
+  ];
+};
--- a/web/src/core/Operations/preprocessing.test.ts
+++ b/web/src/core/Operations/preprocessing.test.ts
@ -0,0 +1,39 @@
+/*
+ * 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 assert from "node:assert";
+import { preprocess } from "./preprocessing";
+
+export const PREPROCESSING_TEST_DATA_1: any = {
+  Parameters: {
+    Version: "0.4",
+    "Time horizon (h)": 5,
+  },
+  Buses: {
+    b1: { "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044] },
+    b2: { "Load (MW)": 10 },
+    b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
+  },
+};
+
+test("preprocess", () => {
+  const newScenario = preprocess(PREPROCESSING_TEST_DATA_1);
+  assert.deepEqual(newScenario, {
+    Parameters: {
+      Version: "0.4",
+      "Time horizon (h)": 5,
+      "Power balance penalty ($/MW)": 1000,
+      "Scenario name": "s1",
+      "Scenario weight": 1,
+      "Time step (min)": 60,
+    },
+    Buses: {
+      b1: { "Load (MW)": [35.79534, 34.38835, 33.45083, 32.89729, 33.25044] },
+      b2: { "Load (MW)": [10, 10, 10, 10, 10] },
+      b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
+    },
+  });
+});
--- a/web/src/core/Operations/preprocessing.ts
+++ b/web/src/core/Operations/preprocessing.ts
@ -0,0 +1,34 @@
+// @ts-nocheck
+
+/*
+ * 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 { validate } from "../Validation/validate";
+
+export const preprocess = (data) => {
+  // Make a copy of the original data
+  let result = JSON.parse(JSON.stringify(data));
+
+  // Run JSON validation and assign default values
+  if (!validate(result)) {
+    console.error(validate.errors);
+    throw Error("Invalid JSON");
+  }
+
+  // Expand scalars into arrays
+  const timeHorizon = result["Parameters"]["Time horizon (h)"];
+  const timeStep = result["Parameters"]["Time step (min)"];
+  const T = (timeHorizon * 60) / timeStep;
+  for (const busName in result["Buses"]) {
+    // @ts-ignore
+    const busData = result["Buses"][busName];
+    const busLoad = busData["Load (MW)"];
+    if (typeof busLoad === "number") {
+      busData["Load (MW)"] = Array(T).fill(busLoad);
+    }
+  }
+  return result;
+};
--- a/web/src/core/Validation/schema.ts
+++ b/web/src/core/Validation/schema.ts
@ -0,0 +1,362 @@
+/*
+ * 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.
+ */
+
+export const schema = {
+  $schema: "http://json-schema.org/draft-07/schema#",
+  title: "Schema for Unit Commitment Input File",
+  definitions: {
+    Parameters: {
+      type: "object",
+      properties: {
+        Version: {
+          type: "string",
+          const: "0.4",
+          description: "Version of UnitCommitment.jl",
+        },
+        "Time horizon (min)": {
+          type: "number",
+          exclusiveMinimum: 0,
+          description: "Length of the planning horizon in minutes",
+        },
+        "Time horizon (h)": {
+          type: "number",
+          exclusiveMinimum: 0,
+          description: "Length of the planning horizon in hours",
+        },
+        "Time step (min)": {
+          type: "number",
+          default: 60,
+          enum: [60, 30, 20, 15, 12, 10, 6, 5, 4, 3, 2, 1],
+          description: "Must be a divisor of 60",
+        },
+        "Power balance penalty ($/MW)": {
+          type: "number",
+          default: 1000.0,
+          minimum: 0,
+          description: "Penalty for system-wide shortage or surplus",
+        },
+        "Scenario name": {
+          type: "string",
+          default: "s1",
+          description: "Name of the scenario",
+        },
+        "Scenario weight": {
+          type: "number",
+          default: 1.0,
+          exclusiveMinimum: 0,
+          description: "Weight of the scenario",
+        },
+      },
+      required: ["Time step (min)", "Power balance penalty ($/MW)"],
+      oneOf: [
+        { required: ["Time horizon (min)"] },
+        { required: ["Time horizon (h)"] },
+      ],
+      not: {
+        required: ["Time horizon (min)", "Time horizon (h)"],
+      },
+    },
+    Bus: {
+      type: "object",
+      additionalProperties: {
+        type: "object",
+        properties: {
+          "Load (MW)": {
+            oneOf: [
+              { type: "null" },
+              { type: "number" },
+              {
+                type: "array",
+                items: {
+                  oneOf: [{ type: "number" }, { type: "null" }],
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+    TransmissionLines: {
+      type: "object",
+      additionalProperties: {
+        type: "object",
+        properties: {
+          "Source bus": {
+            type: "string",
+            minLength: 1,
+          },
+          "Target bus": {
+            type: "string",
+            minLength: 1,
+            not: {
+              const: { $data: "1/Source bus" },
+            },
+          },
+          "Susceptance (S)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Normal flow limit (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Emergency flow limit (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Flow limit penalty ($/MW)": {
+            type: "number",
+            minimum: 0,
+            default: 5000.0,
+          },
+        },
+        required: ["Source bus", "Target bus", "Susceptance (S)"],
+      },
+    },
+    StorageUnits: {
+      type: "object",
+      additionalProperties: {
+        type: "object",
+        properties: {
+          Bus: {
+            type: "string",
+            minLength: 1,
+          },
+          "Minimum level (MWh)": {
+            type: "number",
+          },
+          "Maximum level (MWh)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Allow simultaneous charging and discharging": {
+            type: "boolean",
+            default: true,
+          },
+          "Charge cost ($/MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Discharge cost ($/MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Charge efficiency": {
+            type: "number",
+            minimum: 0,
+            maximum: 1,
+          },
+          "Discharge efficiency": {
+            type: "number",
+            minimum: 0,
+            maximum: 1,
+          },
+          "Loss factor": {
+            type: "number",
+            minimum: 0,
+          },
+          "Minimum charge rate (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Maximum charge rate (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Minimum discharge rate (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Maximum discharge rate (MW)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Initial level (MWh)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Last period minimum level (MWh)": {
+            type: "number",
+            minimum: 0,
+          },
+          "Last period maximum level (MWh)": {
+            type: "number",
+            minimum: 0,
+          },
+        },
+        required: ["Bus"],
+      },
+    },
+    Generators: {
+      type: "object",
+      additionalProperties: {
+        type: "object",
+        if: {
+          properties: {
+            Type: { const: "Thermal" },
+          },
+        },
+        then: {
+          properties: {
+            Bus: {
+              type: "string",
+              minLength: 1,
+            },
+            Type: {
+              type: "string",
+              const: "Thermal",
+            },
+            "Production cost curve (MW)": {
+              type: "array",
+              items: {
+                type: "number",
+                minimum: 0,
+              },
+              minItems: 1,
+            },
+            "Production cost curve ($)": {
+              type: "array",
+              items: {
+                type: "number",
+                minimum: 0,
+              },
+              minItems: 1,
+            },
+            "Startup costs ($)": {
+              type: "array",
+              items: {
+                type: "number",
+                minimum: 0,
+              },
+              default: [0.0],
+            },
+            "Startup delays (h)": {
+              type: "array",
+              items: {
+                type: "integer",
+                minimum: 1,
+              },
+              default: [1],
+            },
+            "Minimum uptime (h)": {
+              type: "integer",
+              default: 1,
+              minimum: 0,
+            },
+            "Minimum downtime (h)": {
+              type: "integer",
+              default: 1,
+              minimum: 0,
+            },
+            "Ramp up limit (MW)": {
+              type: "number",
+              minimum: 0,
+            },
+            "Ramp down limit (MW)": {
+              type: "number",
+              minimum: 0,
+            },
+            "Startup limit (MW)": {
+              type: "number",
+              minimum: 0,
+            },
+            "Shutdown limit (MW)": {
+              type: "number",
+              minimum: 0,
+            },
+            "Initial status (h)": {
+              type: "integer",
+              default: 1,
+              not: { const: 0 },
+            },
+            "Initial power (MW)": {
+              type: "number",
+              minimum: 0,
+            },
+            "Must run?": {
+              type: "boolean",
+              default: false,
+            },
+          },
+          required: [
+            "Bus",
+            "Type",
+            "Production cost curve (MW)",
+            "Production cost curve ($)",
+            "Initial status (h)",
+            "Initial power (MW)",
+          ],
+        },
+        else: {
+          properties: {
+            Type: { const: "Profiled" },
+            Bus: {
+              type: "string",
+              minLength: 1,
+            },
+            "Maximum power (MW)": {
+              oneOf: [
+                {
+                  type: "number",
+                },
+                {
+                  type: "array",
+                  items: {
+                    type: "number",
+                  },
+                },
+              ],
+            },
+            "Cost ($/MW)": {
+              type: "number",
+              minimum: 0,
+            },
+          },
+          required: ["Type", "Bus", "Maximum power (MW)", "Cost ($/MW)"],
+        },
+      },
+    },
+    Contingencies: {
+      type: "object",
+      additionalProperties: {
+        type: "object",
+        properties: {
+          "Affected lines": {
+            type: "array",
+            items: {
+              type: "string",
+            },
+            maxItems: 1,
+            minItems: 1,
+          },
+        },
+        required: ["Affected lines"],
+      },
+    },
+  },
+  type: "object",
+  properties: {
+    Parameters: {
+      $ref: "#/definitions/Parameters",
+    },
+    Buses: {
+      $ref: "#/definitions/Bus",
+    },
+    "Transmission lines": {
+      $ref: "#/definitions/TransmissionLines",
+    },
+    "Storage units": {
+      $ref: "#/definitions/StorageUnits",
+    },
+    Generators: {
+      $ref: "#/definitions/Generators",
+    },
+    Contingencies: {
+      $ref: "#/definitions/Contingencies",
+    },
+  },
+  required: ["Parameters"],
+};
--- a/web/src/core/Validation/validate.ts
+++ b/web/src/core/Validation/validate.ts
@ -0,0 +1,22 @@
+/*
+ * 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 { schema } from "./schema";
+import Ajv from "ajv";
+
+// Create Ajv instance with detailed debug options
+const ajv = new Ajv({
+  useDefaults: true,
+  verbose: true,
+  allErrors: true,
+  $data: true,
+});
+
+export interface ValidationError {
+  message: string;
+}
+
+export const validate = ajv.compile(schema);
--- a/web/src/core/fixtures.tsx
+++ b/web/src/core/fixtures.tsx
@ -0,0 +1,121 @@
+/*
+ * 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.
+ */
+
+export interface Buses {
+  [busName: string]: { "Load (MW)": number[] };
+}
+
+export interface Generators {
+  [name: string]: ProfiledUnit;
+}
+
+export interface ProfiledUnit {
+  Bus: string;
+  Type: "Profiled";
+  "Minimum power (MW)": number[];
+  "Maximum power (MW)": number[];
+  "Cost ($/MW)": number;
+}
+
+export interface UnitCommitmentScenario {
+  Parameters: {
+    Version: string;
+    "Power balance penalty ($/MW)": number;
+    "Time horizon (h)": number;
+    "Time step (min)": number;
+  };
+  Buses: Buses;
+  Generators?: Generators;
+}
+
+export const BLANK_SCENARIO: UnitCommitmentScenario = {
+  Parameters: {
+    Version: "0.4",
+    "Power balance penalty ($/MW)": 1000.0,
+    "Time horizon (h)": 24,
+    "Time step (min)": 60,
+  },
+  Buses: {},
+  Generators: {},
+};
+
+export const TEST_SCENARIO: UnitCommitmentScenario = {
+  Parameters: {
+    Version: "0.4",
+    "Power balance penalty ($/MW)": 1000.0,
+    "Time horizon (h)": 36,
+    "Time step (min)": 60,
+  },
+  Buses: {
+    b1: {
+      "Load (MW)": [
+        35.79534, 34.38835, 33.45083, 32.89729, 33.25044, 33.93851, 35.8654,
+        37.27098, 38.08378, 38.99327, 38.65134, 38.83212, 37.60031, 37.27939,
+        37.11823, 37.73063, 40.951, 44.77115, 43.67527, 44.40959, 44.33812,
+        42.29071, 40.07654, 37.42093, 35.61175, 34.28185, 32.74174, 33.17336,
+        33.5181, 35.63558, 38.12722, 39.61689, 40.80105, 42.55277, 42.76017,
+        42.12535,
+      ],
+    },
+    b2: {
+      "Load (MW)": [
+        14.03739, 13.48563, 13.11797, 12.9009, 13.03939, 13.30922, 14.06486,
+        14.61607, 14.93482, 15.29148, 15.15739, 15.22828, 14.74522, 14.61937,
+        14.55617, 14.79633, 16.05921, 17.55731, 17.12756, 17.41553, 17.3875,
+        16.58459, 15.71629, 14.67487, 13.96539, 13.44386, 12.8399, 13.00916,
+        13.14435, 13.97474, 14.95185, 15.53603, 16.00041, 16.68736, 16.76869,
+        16.51974,
+      ],
+    },
+    b3: {
+      "Load (MW)": [
+        27.3729, 26.29698, 25.58005, 25.15675, 25.4268, 25.95298, 27.42649,
+        28.50134, 29.12289, 29.81839, 29.55691, 29.69515, 28.75318, 28.50777,
+        28.38453, 28.85284, 31.31547, 34.23676, 33.39874, 33.96028, 33.90562,
+        32.33996, 30.64676, 28.61601, 27.23252, 26.21553, 25.0378, 25.36786,
+        25.63149, 27.25074, 29.15611, 30.29527, 31.2008, 32.54035, 32.69895,
+        32.2135,
+      ],
+    },
+    b4: {
+      "Load (MW)": [
+        27.5, 26.29698, 25.58005, 25.15675, 25.4268, 25.95298, 27.42649,
+        28.50134, 29.12289, 29.81839, 29.55691, 29.69515, 28.75318, 28.50777,
+        28.38453, 28.85284, 31.31547, 34.23676, 33.39874, 33.96028, 33.90562,
+        32.33996, 30.64676, 28.61601, 27.23252, 26.21553, 25.0378, 25.36786,
+        25.63149, 27.25074, 29.15611, 30.29527, 31.2008, 32.54035, 32.69895,
+        32.2135,
+      ],
+    },
+  },
+  Generators: {
+    pu1: {
+      Bus: "b1",
+      Type: "Profiled",
+      "Minimum power (MW)": [
+        52.05076909, 14.57829614, 75.43577222, 67.33346472, 75.36556352,
+        21.57017795, 38.57431892, 46.71083643, 97.87434963, 95.12592361,
+        82.00040834, 25.97388027, 14.87169082, 8.68106053, 43.67452089,
+        18.95280541, 85.59390327, 59.62398136, 81.30530633, 83.61173632,
+        10.07929569, 87.96736565, 84.65719304, 30.57367207, 27.39181212,
+        78.27367461, 6.81518238, 68.40723311, 19.616812, 60.20940984,
+        58.57199889, 89.50587265, 65.26434981, 78.57656542, 52.20154156,
+        42.79584818,
+      ],
+      "Maximum power (MW)": [
+        260.25384545, 72.89148068, 377.17886108, 336.66732361, 376.82781758,
+        107.85088974, 192.8715946, 233.55418217, 489.37174815, 475.62961804,
+        410.00204171, 129.86940137, 74.35845412, 43.40530267, 218.37260447,
+        94.76402706, 427.96951634, 298.11990681, 406.52653167, 418.05868161,
+        50.39647843, 439.83682824, 423.28596522, 152.86836035, 136.95906058,
+        391.36837307, 34.0759119, 342.03616557, 98.08406001, 301.04704921,
+        292.85999447, 447.52936326, 326.32174903, 392.88282708, 261.0077078,
+        213.9792409,
+      ],
+      "Cost ($/MW)": 50.0,
+    },
+  },
+};
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@ -0,0 +1,22 @@
+/*
+ * 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 React from "react";
+import ReactDOM from "react-dom/client";
+import reportWebVitals from "./reportWebVitals";
+import CaseBuilder from "./components/CaseBuilder/CaseBuilder";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement,
+);
+
+root.render(
+  <React.StrictMode>
+    <CaseBuilder />
+  </React.StrictMode>,
+);
+
+reportWebVitals();
--- a/web/src/logo.svg
+++ b/web/src/logo.svg
@ -0,0 +1,13 @@
+<!--
+  - 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.
+  -->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>
--- a/web/src/react-app-env.d.ts
+++ b/web/src/react-app-env.d.ts
@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+/// <reference types="react-scripts" />
--- a/web/src/reportWebVitals.ts
+++ b/web/src/reportWebVitals.ts
@ -0,0 +1,21 @@
+/*
+ * 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 { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/web/src/setupTests.ts
+++ b/web/src/setupTests.ts
@ -0,0 +1,7 @@
+/*
+ * 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 "@testing-library/jest-dom";
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "checkJs": true
+  },
+  "include": ["src"]
+}
Author	SHA1	Message	Date
Alinson S. Xavier	80d8bb838c	web: Profiled units	4 months ago
Alinson S. Xavier	ee7a948a78	web: display toast, maintain table stage, localStorage	4 months ago
Alinson S. Xavier	0cf93e7aa0	web: use defaults; calculate table height	4 months ago
Alinson S. Xavier	6d9bbaab4e	web: Reorganize	4 months ago
Alinson S. Xavier	957294f220	web: Accept gz files	4 months ago
Alinson S. Xavier	d8feef5431	web: Allow changing parameters	4 months ago
Alinson S. Xavier	6469840f0a	Validation; reformat source code	4 months ago
Alinson S. Xavier	062b38514b	Buses	4 months ago
Alinson S. Xavier	ea58cf1615	web: Initial version	5 months ago
Alinson S. Xavier	facc9faabf	Update README.md	1 year ago