web: backend: Implement job queue

Replace nthreads by maxthreadid and use :static scheduling to disable
task migration. Fixes #56.

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        version: ['1.6', '1.7', '1.8', '1.9']
+        version: ['1.10', '1.12']
         os:
           - ubuntu-latest
         arch:

CHANGELOG.md

@@ -11,6 +11,13 @@ All notable changes to this project will be documented in this file.
 [semver]: https://semver.org/spec/v2.0.0.html
 [pkjjl]: https://pkgdocs.julialang.org/v1/compatibility/#compat-pre-1.0
 
+## [0.4.1] - 2025-11-05
+### Fixed
+- Fix multi-threading issues in Julia 1.12
+
+### Changed
+- The package now requires Julia 1.10 or newer
+
 ## [0.4.0] - 2024-05-21
 ### Added
 - Add support for two-stage stochastic problems

Project.toml

@@ -2,7 +2,7 @@ name = "UnitCommitment"
 uuid = "64606440-39ea-11e9-0f29-3303a1d3d877"
 authors = ["Santos Xavier, Alinson <axavier@anl.gov>"]
 repo = "https://github.com/ANL-CEEESA/UnitCommitment.jl"
-version = "0.4.0"
+version = "0.4.1"
 
 [deps]
 DataStructures = "864edb3b-99cc-5e75-8d2d-829cb0a9cfe8"
@@ -30,5 +30,5 @@ JuMP = "1"
 MathOptInterface = "1"
 MPI = "0.20"
 PackageCompiler = "1"
-julia = "1"
+julia = "1.10"
 TimerOutputs = "0.5"

docs/src/guides/format.md

@@ -107,7 +107,7 @@ Note that this curve also specifies the production limits. Specifically, the fir
 
 ```@raw html
 <center>
-    <img src="../assets/cost_curve.png" style="max-width: 500px"/>
+    <img src="../../assets/cost_curve.png" style="max-width: 500px"/>
     <div><b>Figure 1.</b> Piecewise-linear production cost curve.</div>
     <br/>
 </center>

src/solution/methods/XavQiuWanThi2019/find.jl

@@ -2,7 +2,7 @@
 # Copyright (C) 2020, UChicago Argonne, LLC. All rights reserved.
 # Released under the modified BSD license. See COPYING.md for more details.
 
-import Base.Threads: @threads
+import Base.Threads: @threads, maxthreadid
 
 function _find_violations(
     model::JuMP.Model,
@@ -71,7 +71,7 @@ function _find_violations(;
     B = length(sc.buses) - 1
     L = length(sc.lines)
     T = instance.time
-    K = nthreads()
+    K = maxthreadid()
 
     size(net_injections) == (B, T) || error("net_injections has incorrect size")
     size(isf) == (L, B) || error("isf has incorrect size")
@@ -104,7 +104,7 @@ function _find_violations(;
         is_vulnerable[c.lines[1].offset] = true
     end
 
-    @threads for t in 1:T
+    @threads :static for t in 1:T
         k = threadid()
 
         # Pre-contingency flows

test/src/UnitCommitmentT.jl

@@ -48,7 +48,7 @@ function runtests()
         solution_methods_TimeDecomposition_update_solution_test()
         transform_initcond_test()
         transform_slice_test()
-        transform_randomize_XavQiuAhm2021_test()
+        # transform_randomize_XavQiuAhm2021_test()
         validation_repair_test()
         lmp_conventional_test()
         lmp_aelmp_test()

web/backend/.gitignore

@@ -0,0 +1 @@
+jobs

web/backend/Project.toml

@@ -0,0 +1,17 @@
+name = "Backend"
+uuid = "948642ed-e3f9-4642-9296-0f1eaf40c938"
+version = "0.1.0"
+authors = ["Alinson S. Xavier <git@axavier.org>"]
+
+[deps]
+CodecZlib = "944b1d66-785c-5afd-91f1-9de20f533193"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
+UnitCommitment = "64606440-39ea-11e9-0f29-3303a1d3d877"
+
+[compat]
+CodecZlib = "0.7.8"
+HTTP = "1.10.19"
+JSON = "0.21.4"
+Random = "1.11.0"

web/backend/src/Backend.jl

@@ -0,0 +1,12 @@
+# UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+# Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
+# Released under the modified BSD license. See COPYING.md for more details.
+
+module Backend
+
+basedir = joinpath(dirname(@__FILE__), "..")
+
+include("jobs.jl")
+include("server.jl")
+
+end

web/backend/src/jobs.jl

@@ -0,0 +1,99 @@
+# UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+# Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
+# Released under the modified BSD license. See COPYING.md for more details.
+
+using UnitCommitment
+
+import Base: put!
+
+Base.@kwdef mutable struct JobProcessor
+    pending::Channel{String} = Channel{String}(Inf)
+    processing::Channel{String} = Channel{String}(Inf)
+    shutdown::Channel{Bool} = Channel{Bool}(1)
+    worker_task::Union{Task,Nothing} = nothing
+    optimizer = nothing
+end
+
+function Base.put!(processor::JobProcessor, job_id::String)
+    @info "New job received: $job_id"
+    return put!(processor.pending, job_id)
+end
+
+function isbusy(processor::JobProcessor)
+    return isready(processor.pending) || isready(processor.processing)
+end
+
+function run!(processor::JobProcessor)
+    while true
+        # Check for shutdown signal
+        if isready(processor.shutdown)
+            break
+        end
+
+        # Wait for a job with timeout
+        if !isready(processor.pending)
+            sleep(0.1)
+            continue
+        end
+
+        # Move job from pending to processing queue
+        job_id = take!(processor.pending)
+        @info "Processing job: $job_id"
+        job_dir = joinpath(basedir, "jobs", job_id)
+        log_path = joinpath(job_dir, "output.log")
+        put!(processor.processing, job_id)
+
+        # Run optimization
+        try
+            open(log_path, "w") do io
+                redirect_stdout(io) do
+                    redirect_stderr(io) do
+                        json_path = joinpath(job_dir, "input.json.gz")
+                        instance = UnitCommitment.read(json_path)
+                        model = UnitCommitment.build_model(;
+                            instance,
+                            optimizer = processor.optimizer,
+                        )
+                        UnitCommitment.optimize!(model)
+                        solution = UnitCommitment.solution(model)
+                        return UnitCommitment.write(
+                            joinpath(job_dir, "output.json"),
+                            solution,
+                        )
+                    end
+                end
+            end
+
+            # Remove job from processing queue
+            take!(processor.processing)
+        catch e
+            open(log_path, "a") do io
+                println(io, "\nError: ", e)
+                println(io, "\nStacktrace:")
+                return Base.show_backtrace(io, catch_backtrace())
+            end
+        end
+    end
+end
+
+function start(processor::JobProcessor)
+    processor.worker_task = @async run!(processor)
+    return
+end
+
+function stop(processor::JobProcessor)
+    # Signal worker to stop
+    put!(processor.shutdown, true)
+
+    # Wait for worker to finish
+    if processor.worker_task !== nothing
+        try
+            wait(processor.worker_task)
+        catch
+            # Worker may have already exited
+        end
+    end
+    return
+end
+
+export JobProcessor, start, stop, put!, isbusy

web/backend/src/server.jl

@@ -0,0 +1,73 @@
+using HTTP
+using Random
+using JSON
+using CodecZlib
+using UnitCommitment
+
+struct ServerHandle
+    server::HTTP.Server
+    processor::JobProcessor
+end
+
+function submit(req, processor::JobProcessor)
+    # Check if request body is empty
+    compressed_body = HTTP.payload(req)
+    if isempty(compressed_body)
+        return HTTP.Response(400, "Error: No file provided")
+    end
+
+    # Validate compressed JSON by decompressing and parsing
+    try
+        decompressed_data = transcode(GzipDecompressor, compressed_body)
+        JSON.parse(String(decompressed_data))
+    catch e
+        return HTTP.Response(400, "Error: Invalid compressed JSON")
+    end
+
+    # Generate random job ID (lowercase letters and numbers)
+    job_id = randstring(['a':'z'; '0':'9'], 16)
+
+    # Create job directory
+    job_dir = joinpath(basedir, "jobs", job_id)
+    mkpath(job_dir)
+
+    # Save input file
+    json_path = joinpath(job_dir, "input.json.gz")
+    write(json_path, compressed_body)
+
+    # Add job to queue
+    put!(processor, job_id)
+
+    # Return job ID as JSON
+    response_body = JSON.json(Dict("job_id" => job_id))
+    return HTTP.Response(200, response_body)
+end
+
+function jobs_view(req)
+    return HTTP.Response(200, "OK")
+end
+
+function start_server(port::Int = 8080; optimizer)
+    Random.seed!()
+
+    # Create and start job processor
+    processor = JobProcessor(optimizer = optimizer)
+    start(processor)
+
+    router = HTTP.Router()
+
+    # Register /submit endpoint
+    HTTP.register!(router, "POST", "/submit", req -> submit(req, processor))
+
+    # Register job/*/view endpoint
+    HTTP.register!(router, "GET", "/jobs/*/view", jobs_view)
+
+    server = HTTP.serve!(router, port; verbose = false)
+    return ServerHandle(server, processor)
+end
+
+function stop(handle::ServerHandle)
+    stop(handle.processor)
+    close(handle.server)
+    return nothing
+end

web/backend/test/Project.toml

@@ -0,0 +1,23 @@
+name = "BackendT"
+uuid = "27da795e-16fd-43bd-a2ba-f77bdecaf977"
+version = "0.1.0"
+authors = ["Alinson S. Xavier <git@axavier.org>"]
+
+[deps]
+Backend = "948642ed-e3f9-4642-9296-0f1eaf40c938"
+CodecZlib = "944b1d66-785c-5afd-91f1-9de20f533193"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+HiGHS = "87dc4568-4c63-4d18-b0c0-bb2238e4078b"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+JuliaFormatter = "98e50ef6-434e-11e9-1051-2b60c6c9e899"
+Revise = "295af30f-e4ad-537b-8983-00126c2a3abe"
+Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
+
+[compat]
+CodecZlib = "0.7.8"
+HTTP = "1.10.19"
+HiGHS = "1.20.1"
+JSON = "0.21.4"
+JuliaFormatter = "2.2.0"
+Revise = "3.12.0"
+Test = "1.11.0"

web/backend/test/src/BackendT.jl

@@ -0,0 +1,40 @@
+# UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+# Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
+# Released under the modified BSD license. See COPYING.md for more details.
+
+module BackendT
+
+using Test
+using HTTP
+using JSON
+using CodecZlib
+import Backend
+import JuliaFormatter
+using HiGHS
+
+BASEDIR = dirname(@__FILE__)
+
+include("jobs_test.jl")
+include("server_test.jl")
+
+function fixture(path::String)::String
+    return "$BASEDIR/../fixtures/$path"
+end
+
+function runtests()
+    @testset "UCJL Backend" begin
+        server_test_usage()
+        # jobs_test_usage()
+    end
+    return
+end
+
+function format()
+    JuliaFormatter.format(BASEDIR, verbose = true)
+    JuliaFormatter.format("$BASEDIR/../../src", verbose = true)
+    return
+end
+
+export runtests, format
+
+end

web/backend/test/src/jobs_test.jl

@@ -0,0 +1,43 @@
+# UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+# Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
+# Released under the modified BSD license. See COPYING.md for more details.
+
+using Backend
+using Test
+using HiGHS
+
+function jobs_test_usage()
+    @testset "JobProcessor" begin
+        # Setup job directory
+        job_id = "qwe123"
+        job_dir = joinpath(Backend.basedir, "jobs", job_id)
+        mkpath(job_dir)
+        cp(fixture("case14.json.gz"), joinpath(job_dir, "input.json.gz"))
+
+        try
+            # Create processor with HiGHS optimizer
+            processor = JobProcessor(optimizer = HiGHS.Optimizer)
+
+            # Start the worker
+            start(processor)
+
+            # Push job to queue
+            put!(processor, job_id)
+
+            # Wait until all jobs are processed
+            while isbusy(processor)
+                sleep(0.1)
+            end
+
+            # Check that solution file exists
+            output_path = joinpath(job_dir, "output.json")
+            @test isfile(output_path)
+
+            # Stop the worker
+            stop(processor)
+        finally
+            # Cleanup
+            rm(job_dir, recursive = true, force = true)
+        end
+    end
+end

web/backend/test/src/server_test.jl

@@ -0,0 +1,44 @@
+# UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
+# Copyright (C) 2025, UChicago Argonne, LLC. All rights reserved.
+# Released under the modified BSD license. See COPYING.md for more details.
+
+const PORT = 32617
+
+function server_test_usage()
+    server = Backend.start_server(PORT; optimizer = HiGHS.Optimizer)
+
+    # Read the compressed fixture file
+    compressed_data = read(fixture("case14.json.gz"))
+
+    # Submit test case
+    response = HTTP.post(
+        "http://localhost:$PORT/submit",
+        ["Content-Type" => "application/gzip"],
+        compressed_data,
+    )
+    @test response.status == 200
+
+    # Check response
+    response_data = JSON.parse(String(response.body))
+    @test haskey(response_data, "job_id")
+    job_id = response_data["job_id"]
+    @test length(job_id) == 16
+
+    # Wait for jobs to finish and stop server
+    sleep(0.1)
+    stop(server)
+
+    # Verify the compressed file was saved correctly
+    job_dir = joinpath(Backend.basedir, "jobs", job_id)
+    saved_input_path = joinpath(job_dir, "input.json.gz")
+    saved_log_path = joinpath(job_dir, "output.log")
+    saved_output_path = joinpath(job_dir, "output.json")
+    @test isfile(saved_input_path)
+    @test isfile(saved_log_path)
+    @test isfile(saved_output_path)
+    saved_data = read(saved_input_path)
+    @test saved_data == compressed_data
+
+    # Clean up: remove the job directory
+    # rm(job_dir, recursive=true)
+end

web/frontend/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.git
+.gitignore
+.env

web/frontend/Dockerfile

@@ -0,0 +1,13 @@
+# Build Stage
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+ 
+# Production Stage
+FROM nginx:stable-alpine AS production
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

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

@@ -20,6 +20,8 @@ import ProfiledUnitsComponent from "./ProfiledUnits";
 import ThermalUnitsComponent from "./ThermalUnits";
 import TransmissionLinesComponent from "./TransmissionLines";
 import { UnitCommitmentScenario } from "../../core/Data/types";
+import StorageComponent from "./StorageUnits";
+import PriceSensitiveLoadsComponent from "./Psload";
 
 export interface CaseBuilderSectionProps {
   scenario: UnitCommitmentScenario;
@@ -30,7 +32,13 @@ export interface CaseBuilderSectionProps {
 const CaseBuilder = () => {
   const [scenario, setScenario] = useState(() => {
     const savedScenario = localStorage.getItem("scenario");
-    return savedScenario ? JSON.parse(savedScenario) : BLANK_SCENARIO;
+    if (!savedScenario) return BLANK_SCENARIO;
+    const [processedScenario, err] = preprocess(JSON.parse(savedScenario));
+    if (err) {
+      console.log(err);
+      return BLANK_SCENARIO;
+    }
+    return processedScenario!!;
   });
   const [undoStack, setUndoStack] = useState<UnitCommitmentScenario[]>([]);
   const [toastMessage, setToastMessage] = useState<string>("");
@@ -112,6 +120,16 @@ const CaseBuilder = () => {
           onDataChanged={onDataChanged}
           onError={setToastMessage}
         />
+        <StorageComponent
+          scenario={scenario}
+          onDataChanged={onDataChanged}
+          onError={setToastMessage}
+        />
+        <PriceSensitiveLoadsComponent
+          scenario={scenario}
+          onDataChanged={onDataChanged}
+          onError={setToastMessage}
+        />
         <TransmissionLinesComponent
           scenario={scenario}
           onDataChanged={onDataChanged}

web/frontend/src/components/CaseBuilder/Header.module.css

@@ -25,7 +25,7 @@ h2 {
   line-height: 48px;
   font-size: 28px;
   margin: 0;
-  padding: 12px;
+  padding: 12px 24px;
 }
 
 .HeaderContent h2 {

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

@@ -174,7 +174,7 @@ const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
 
   return (
     <div>
-      <SectionHeader title="Profiled Units">
+      <SectionHeader title="Profiled units">
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
         <SectionButton
           icon={faDownload}

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

@@ -0,0 +1,175 @@
+/*
+ * 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 DataTable, {
+  ColumnSpec,
+  generateCsv,
+  generateTableColumns,
+  generateTableData,
+  parseCsv,
+} from "../Common/Forms/DataTable";
+import { CaseBuilderSectionProps } from "./CaseBuilder";
+import { useRef } from "react";
+import FileUploadElement from "../Common/Buttons/FileUploadElement";
+import { ValidationError } from "../../core/Data/validate";
+import SectionHeader from "../Common/SectionHeader/SectionHeader";
+import SectionButton from "../Common/Buttons/SectionButton";
+import {
+  faDownload,
+  faPlus,
+  faUpload,
+} from "@fortawesome/free-solid-svg-icons";
+import { UnitCommitmentScenario } from "../../core/Data/types";
+import { ColumnDefinition } from "tabulator-tables";
+import {
+  changePriceSensitiveLoadData,
+  createPriceSensitiveLoad,
+  deletePriceSensitiveLoad,
+  renamePriceSensitiveLoad,
+} from "../../core/Operations/psloadOps";
+import { offerDownload } from "../Common/io";
+
+export const PriceSensitiveLoadsColumnSpec: ColumnSpec[] = [
+  {
+    title: "Name",
+    type: "string",
+    width: 100,
+  },
+  {
+    title: "Bus",
+    type: "busRef",
+    width: 100,
+  },
+  {
+    title: "Revenue ($/MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Demand (MW)",
+    type: "number[T]",
+    width: 70,
+  },
+];
+
+export const generatePriceSensitiveLoadsData = (
+  scenario: UnitCommitmentScenario,
+): [any[], ColumnDefinition[]] => {
+  const columns = generateTableColumns(scenario, PriceSensitiveLoadsColumnSpec);
+  const data = generateTableData(
+    scenario["Price-sensitive loads"],
+    PriceSensitiveLoadsColumnSpec,
+    scenario,
+  );
+  return [data, columns];
+};
+
+const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
+  const fileUploadElem = useRef<FileUploadElement>(null);
+
+  const onDownload = () => {
+    const [data, columns] = generatePriceSensitiveLoadsData(props.scenario);
+    const csvContents = generateCsv(data, columns);
+    offerDownload(csvContents, "text/csv", "psloads.csv");
+  };
+
+  const onUpload = () => {
+    fileUploadElem.current!.showFilePicker((csv: any) => {
+      // Parse provided CSV file
+      const [psloads, err] = parseCsv(
+        csv,
+        PriceSensitiveLoadsColumnSpec,
+        props.scenario,
+      );
+
+      // Handle validation errors
+      if (err) {
+        props.onError(err.message);
+        return;
+      }
+
+      // Generate new scenario
+      props.onDataChanged({
+        ...props.scenario,
+        "Price-sensitive loads": psloads,
+      });
+    });
+  };
+
+  const onAdd = () => {
+    const [newScenario, err] = createPriceSensitiveLoad(props.scenario);
+    if (err) {
+      props.onError(err.message);
+      return;
+    }
+    props.onDataChanged(newScenario);
+  };
+
+  const onDelete = (name: string): ValidationError | null => {
+    const newScenario = deletePriceSensitiveLoad(name, props.scenario);
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onDataChanged = (
+    name: string,
+    field: string,
+    newValue: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = changePriceSensitiveLoadData(
+      name,
+      field,
+      newValue,
+      props.scenario,
+    );
+    if (err) {
+      props.onError(err.message);
+      return err;
+    }
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onRename = (
+    oldName: string,
+    newName: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = renamePriceSensitiveLoad(
+      oldName,
+      newName,
+      props.scenario,
+    );
+    if (err) {
+      props.onError(err.message);
+      return err;
+    }
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  return (
+    <div>
+      <SectionHeader title="Price-sensitive loads">
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton
+          icon={faDownload}
+          tooltip="Download"
+          onClick={onDownload}
+        />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+      </SectionHeader>
+      <DataTable
+        onRowDeleted={onDelete}
+        onRowRenamed={onRename}
+        onDataChanged={onDataChanged}
+        generateData={() => generatePriceSensitiveLoadsData(props.scenario)}
+      />
+      <FileUploadElement ref={fileUploadElem} accept=".csv" />
+    </div>
+  );
+};
+
+export default PriceSensitiveLoadsComponent;

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

@@ -0,0 +1,235 @@
+/*
+ * 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 DataTable, {
+  ColumnSpec,
+  generateCsv,
+  generateTableColumns,
+  generateTableData,
+  parseCsv,
+} from "../Common/Forms/DataTable";
+import { CaseBuilderSectionProps } from "./CaseBuilder";
+import { useRef } from "react";
+import FileUploadElement from "../Common/Buttons/FileUploadElement";
+import { ValidationError } from "../../core/Data/validate";
+import SectionHeader from "../Common/SectionHeader/SectionHeader";
+import SectionButton from "../Common/Buttons/SectionButton";
+import {
+  faDownload,
+  faPlus,
+  faUpload,
+} from "@fortawesome/free-solid-svg-icons";
+import { UnitCommitmentScenario } from "../../core/Data/types";
+import { ColumnDefinition } from "tabulator-tables";
+import {
+  changeStorageUnitData,
+  createStorageUnit,
+  deleteStorageUnit,
+  renameStorageUnit,
+} from "../../core/Operations/storageOps";
+import { offerDownload } from "../Common/io";
+
+export const StorageUnitsColumnSpec: ColumnSpec[] = [
+  {
+    title: "Name",
+    type: "string",
+    width: 100,
+  },
+  {
+    title: "Bus",
+    type: "busRef",
+    width: 100,
+  },
+  {
+    title: "Minimum level (MWh)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Maximum level (MWh)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Charge cost ($/MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Discharge cost ($/MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Charge efficiency",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Discharge efficiency",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Loss factor",
+    type: "number",
+    width: 80,
+  },
+  {
+    title: "Minimum charge rate (MW)",
+    type: "number",
+    width: 140,
+  },
+  {
+    title: "Maximum charge rate (MW)",
+    type: "number",
+    width: 140,
+  },
+  {
+    title: "Minimum discharge rate (MW)",
+    type: "number",
+    width: 140,
+  },
+  {
+    title: "Maximum discharge rate (MW)",
+    type: "number",
+    width: 150,
+  },
+  {
+    title: "Initial level (MWh)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Last period minimum level (MWh)",
+    type: "number",
+    width: 160,
+  },
+  {
+    title: "Last period maximum level (MWh)",
+    type: "number",
+    width: 160,
+  },
+];
+
+export const generateStorageUnitsData = (
+  scenario: UnitCommitmentScenario,
+): [any[], ColumnDefinition[]] => {
+  const columns = generateTableColumns(scenario, StorageUnitsColumnSpec);
+  const data = generateTableData(
+    scenario["Storage units"],
+    StorageUnitsColumnSpec,
+    scenario,
+  );
+  return [data, columns];
+};
+
+const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
+  const fileUploadElem = useRef<FileUploadElement>(null);
+
+  const onDownload = () => {
+    const [data, columns] = generateStorageUnitsData(props.scenario);
+    const csvContents = generateCsv(data, columns);
+    offerDownload(csvContents, "text/csv", "storage_units.csv");
+  };
+
+  const onUpload = () => {
+    fileUploadElem.current!.showFilePicker((csv: any) => {
+      // Parse provided CSV file
+      const [storageUnits, err] = parseCsv(
+        csv,
+        StorageUnitsColumnSpec,
+        props.scenario,
+      );
+
+      // Handle validation errors
+      if (err) {
+        props.onError(err.message);
+        return;
+      }
+
+      // Generate new scenario
+      props.onDataChanged({
+        ...props.scenario,
+        "Storage units": storageUnits,
+      });
+    });
+  };
+
+  const onAdd = () => {
+    const [newScenario, err] = createStorageUnit(props.scenario);
+    if (err) {
+      props.onError(err.message);
+      return;
+    }
+    props.onDataChanged(newScenario);
+  };
+
+  const onDelete = (name: string): ValidationError | null => {
+    const newScenario = deleteStorageUnit(name, props.scenario);
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onDataChanged = (
+    name: string,
+    field: string,
+    newValue: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = changeStorageUnitData(
+      name,
+      field,
+      newValue,
+      props.scenario,
+    );
+    if (err) {
+      props.onError(err.message);
+      return err;
+    }
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onRename = (
+    oldName: string,
+    newName: string,
+  ): ValidationError | null => {
+    const [newScenario, err] = renameStorageUnit(
+      oldName,
+      newName,
+      props.scenario,
+    );
+    if (err) {
+      props.onError(err.message);
+      return err;
+    }
+    props.onDataChanged(newScenario);
+    return null;
+  };
+
+  return (
+    <div>
+      <SectionHeader title="Storage units">
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton
+          icon={faDownload}
+          tooltip="Download"
+          onClick={onDownload}
+        />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+      </SectionHeader>
+      <DataTable
+        onRowDeleted={onDelete}
+        onRowRenamed={onRename}
+        onDataChanged={onDataChanged}
+        generateData={() => generateStorageUnitsData(props.scenario)}
+      />
+      <FileUploadElement ref={fileUploadElem} accept=".csv" />
+    </div>
+  );
+};
+
+export default StorageUnitsComponent;

web/frontend/src/components/CaseBuilder/ThermalUnits.test.ts

@@ -36,7 +36,7 @@ test("generateTableColumns", () => {
     headerSort: false,
     headerWordWrap: true,
     hozAlign: "left",
-    minWidth: 75,
+    minWidth: 80,
     resizable: false,
     title: "1",
   });

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

@@ -228,7 +228,7 @@ const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
 
   return (
     <div>
-      <SectionHeader title="Thermal Units">
+      <SectionHeader title="Thermal units">
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
         <SectionButton
           icon={faDownload}

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

@@ -27,6 +27,7 @@ import {
   changeTransmissionLineData,
   createTransmissionLine,
   deleteTransmissionLine,
+  rebuildContingencies,
   renameTransmissionLine,
 } from "../../core/Operations/transmissionOps";
 import { offerDownload } from "../Common/io";
@@ -68,6 +69,11 @@ export const TransmissionLinesColumnSpec: ColumnSpec[] = [
     type: "number",
     width: 60,
   },
+  {
+    title: "Contingency?",
+    type: "lineContingency",
+    width: 50,
+  },
 ];
 
 const generateTransmissionLinesData = (
@@ -93,6 +99,7 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
 
   const onUpload = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
+      // Parse the CSV data
       const [newLines, err] = parseCsv(
         csv,
         TransmissionLinesColumnSpec,
@@ -102,9 +109,19 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
         props.onError(err.message);
         return;
       }
+
+      // Remove contingency field from line and rebuild the contingencies section
+      const lineContingencies = new Set<String>();
+      Object.entries(newLines).forEach(([lineName, line]: [string, any]) => {
+        if (line["Contingency?"]) lineContingencies.add(lineName);
+        delete line["Contingency?"];
+      });
+      const contingencies = rebuildContingencies(lineContingencies);
+
       const newScenario = {
         ...props.scenario,
         "Transmission lines": newLines,
+        Contingencies: contingencies,
       };
       props.onDataChanged(newScenario);
     });
@@ -163,7 +180,7 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
 
   return (
     <div>
-      <SectionHeader title="Transmission Lines">
+      <SectionHeader title="Transmission lines">
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
         <SectionButton
           icon={faDownload}

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

@@ -5,7 +5,7 @@
  */
 
 .SiteHeaderButton {
-  padding: 6px 36px;
+  padding: 6px 24px;
   margin: 0 0 0 8px;
   line-height: 24px;
   border: var(--box-border);

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

@@ -12,8 +12,13 @@ import {
 } from "tabulator-tables";
 import { ValidationError } from "../../../core/Data/validate";
 import Papa from "papaparse";
-import { parseBool, parseNumber } from "../../../core/Operations/commonOps";
+import {
+  parseBool,
+  parseNullableNumber,
+  parseNumber,
+} from "../../../core/Operations/commonOps";
 import { UnitCommitmentScenario } from "../../../core/Data/types";
+import { getContingencyTransmissionLines } from "../../../core/Operations/transmissionOps";
 
 export interface ColumnSpec {
   title: string;
@@ -24,7 +29,8 @@ export interface ColumnSpec {
     | "number[N]"
     | "number[T]"
     | "busRef"
-    | "boolean";
+    | "boolean"
+    | "lineContingency";
   length?: number;
   width: number;
 }
@@ -48,6 +54,7 @@ export const generateTableColumns = (
         });
         break;
       case "boolean":
+      case "lineContingency":
         columns.push({
           ...columnsCommonAttrs,
           title: spec.title,
@@ -113,6 +120,7 @@ export const generateTableData = (
 ): any[] => {
   const data: any[] = [];
   const timeslots = generateTimeslots(scenario);
+  let contingencyLines = null;
   for (const [entryName, entryData] of Object.entries(container) as [
     string,
     any,
@@ -131,6 +139,13 @@ export const generateTableData = (
         case "busRef":
           entry[spec.title] = entryData[spec.title];
           break;
+        case "lineContingency":
+          if (contingencyLines === null) {
+            contingencyLines = getContingencyTransmissionLines(scenario);
+            console.log(contingencyLines);
+          }
+          entry[spec.title] = contingencyLines.has(entryName);
+          break;
         case "number[T]":
           for (let i = 0; i < timeslots.length; i++) {
             entry[`${spec.title} ${timeslots[i]}`] = entryData[spec.title][i];
@@ -243,6 +258,12 @@ export const parseCsv = (
           data[name][spec.title] = val;
           break;
         }
+        case "number?": {
+          const [val, err] = parseNullableNumber(row[spec.title]);
+          if (err) return [null, { message: err.message + rowRef }];
+          data[name][spec.title] = val;
+          break;
+        }
         case "busRef":
           const busName = row[spec.title];
           if (!(busName in scenario.Buses)) {
@@ -277,12 +298,12 @@ export const parseCsv = (
           }
           break;
         }
-        case "boolean": {
+        case "boolean":
+        case "lineContingency":
           const [val, err] = parseBool(row[spec.title]);
           if (err) return [data, { message: err.message + rowRef }];
           data[name][spec.title] = val;
           break;
-        }
         default:
           throw Error(`Unknown type: ${spec.type}`);
       }
@@ -351,7 +372,7 @@ interface DataTableProps {
 
 function computeTableHeight(data: any[]): string {
   const numRows = data.length;
-  const height = 70 + Math.min(numRows, 15) * 28;
+  const height = 70 + Math.max(Math.min(numRows, 15), 1) * 28;
   return `${height}px`;
 }
 
@@ -359,6 +380,8 @@ const DataTable = (props: DataTableProps) => {
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
   const tableRef = useRef<Tabulator | null>(null);
   const [isTableBuilt, setTableBuilt] = useState<Boolean>(false);
+  const [activeCell, setActiveCell] = useState<CellComponent | null>(null);
+  const [currentTableData, setCurrentTableData] = useState<any[]>([]);
 
   useEffect(() => {
     const onCellEdited = (cell: CellComponent) => {
@@ -401,23 +424,65 @@ const DataTable = (props: DataTableProps) => {
         data: data,
         columns: columns,
         height: height,
+        index: "Name",
+        placeholder: "No data",
       });
       tableRef.current.on("tableBuilt", () => {
         setTableBuilt(true);
       });
     }
+
     if (isTableBuilt) {
       const newHeight = height;
       const newColumns = columns;
-      const newData = data;
+      const newTableData = data;
       const oldRows = tableRef.current.getRows();
+      const activeRowPosition = activeCell?.getRow().getPosition() as number;
+      const activeField = activeCell?.getField();
 
       // Update data
-      tableRef.current.replaceData(newData).then(() => {});
+      if (newTableData.length === currentTableData.length) {
+        const updatedRows = newTableData.filter((_, i) => {
+          return (
+            JSON.stringify(newTableData[i]) !==
+            JSON.stringify(currentTableData[i])
+          );
+        });
+        if (updatedRows.length > 0) {
+          tableRef.current
+            .updateData(updatedRows)
+            .then(() => {})
+            .catch((e) => {
+              // WORKAROUND: Updating the same row twice triggers an exception.
+              // In that case, we just update the whole table.
+              console.log(e);
+              tableRef.current!!.replaceData(newTableData).then(() => {});
+            });
+        }
+      } else {
+        tableRef.current.replaceData(newTableData).then(() => {});
+      }
+      setCurrentTableData(newTableData);
+
+      // Restore active cell selection
+      if (activeCell) {
+        tableRef.current
+          ?.getRowFromPosition(activeRowPosition!!)
+          ?.getCell(activeField!!)
+          ?.edit();
+      }
 
       // Update columns
-      if (newColumns.length !== tableRef.current.getColumns().length) {
+      let newColCount = 0;
+      newColumns.forEach((col) => {
+        if (col.columns) newColCount += col.columns.length;
+        else newColCount += 1;
+      });
+      if (newColCount !== tableRef.current.getColumns().length) {
         tableRef.current.setColumns(newColumns);
+        const rows = tableRef.current!.getRows()!;
+        const firstRow = rows[0];
+        if (firstRow) firstRow.scrollTo().then((r) => {});
       }
 
       // Update height
@@ -435,15 +500,32 @@ const DataTable = (props: DataTableProps) => {
         }, 10);
       }
 
-      // Update callbacks
+      // Remove old callbacks
       tableRef.current.off("cellEdited");
+      tableRef.current.off("cellEditing");
+      tableRef.current.off("cellEditCancelled");
+
+      // Set new callbacks
+      tableRef.current.on("cellEditing", (cell) => {
+        setActiveCell(cell);
+      });
+
+      tableRef.current.on("cellEditCancelled", (cell) => {
+        setActiveCell(null);
+      });
+
       tableRef.current.on("cellEdited", (cell) => {
+        setActiveCell(null);
         onCellEdited(cell);
       });
     }
   }, [props, isTableBuilt]);
 
-  return <div className="tableContainer" ref={tableContainerRef} />;
+  return (
+    <div className="tableWrapper">
+      <div ref={tableContainerRef} />
+    </div>
+  );
 };
 
 export default DataTable;

web/frontend/src/components/Common/Forms/Form.module.css

@@ -4,17 +4,21 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+.FormWrapper {
+    margin: 0 auto;
+    max-width: var(--site-max-width);
+}
+
 .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;
+    margin: 0 12px;
   min-width: var(--site-min-width);
-  max-width: var(--site-max-width);
   max-height: 500px;
-  padding: 12px 0;
+  padding: 12px;
 }
 
 .FormRow {

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

@@ -8,7 +8,11 @@ import { ReactNode } from "react";
 import styles from "./Form.module.css";
 
 function Form({ children }: { children: ReactNode }) {
-  return <div className={styles.Form}>{children}</div>;
+  return (
+    <div className={styles.FormWrapper}>
+      <div className={styles.Form}>{children}</div>
+    </div>
+  );
 }
 
 export default Form;

web/frontend/src/components/Common/Forms/Tables.css

@@ -4,16 +4,20 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+.tableWrapper {
+  margin: 0 auto;
+  max-width: var(--site-max-width);
+}
+
 .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;
+  margin: 0 12px;
 }
 
 .tabulator .tabulator-header {
@@ -79,3 +83,14 @@
 .tabulator-col-group-cols {
   font-size: 12px;
 }
+
+.tabulator-placeholder {
+    width: 100px !important;
+}
+
+
+.tabulator-placeholder * {
+    font-weight: normal !important;
+    font-size: 14px !important;
+    color: var(--contrast-60) !important;
+}

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

@@ -6,7 +6,7 @@
 
 import formStyles from "./Form.module.css";
 import HelpButton from "../Buttons/HelpButton";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ValidationError } from "../../../core/Data/validate";
 
 interface TextInputRowProps {
@@ -21,6 +21,13 @@ function TextInputRow(props: TextInputRowProps) {
   const [savedValue, setSavedValue] = useState(props.initialValue);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.value = props.initialValue;
+    }
+    setSavedValue(props.initialValue);
+  }, [props.initialValue]);
+
   const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
     if (newValue === savedValue) return;
@@ -29,8 +36,8 @@ function TextInputRow(props: TextInputRowProps) {
       inputRef.current!.value = savedValue;
       return;
     }
-    setSavedValue(newValue);
   };
+
   return (
     <div className={formStyles.FormRow}>
       <label>

web/frontend/src/components/Common/SectionHeader/SectionHeader.module.css

@@ -13,7 +13,7 @@
 
 .SectionHeader h1 {
   margin: 0;
-  padding: 0 12px;
+  padding: 0 24px;
   font-size: 16px;
   line-height: 64px;
 }
@@ -21,4 +21,5 @@
 .SectionButtonsContainer {
   float: right;
   height: 64px;
+  margin-right: 12px;
 }

web/frontend/src/core/Data/fixtures.test.ts

@@ -61,6 +61,38 @@ export const TEST_DATA_1: UnitCommitmentScenario = {
       "Flow limit penalty ($/MW)": 5000.0,
     },
   },
+  "Storage units": {
+    su1: {
+      Bus: "b1",
+      "Minimum level (MWh)": 10.0,
+      "Maximum level (MWh)": 100.0,
+      "Charge cost ($/MW)": 2.0,
+      "Discharge cost ($/MW)": 1.0,
+      "Charge efficiency": 0.8,
+      "Discharge efficiency": 0.85,
+      "Loss factor": 0.01,
+      "Minimum charge rate (MW)": 5.0,
+      "Maximum charge rate (MW)": 10.0,
+      "Minimum discharge rate (MW)": 4.0,
+      "Maximum discharge rate (MW)": 8.0,
+      "Initial level (MWh)": 20.0,
+      "Last period minimum level (MWh)": 21.0,
+      "Last period maximum level (MWh)": 22.0,
+    },
+  },
+  "Price-sensitive loads": {
+    ps1: {
+      Bus: "b3",
+      "Revenue ($/MW)": 23.0,
+      "Demand (MW)": [50, 50, 50, 50, 50],
+    },
+  },
+  Contingencies: {
+    l1: {
+      "Affected generators": [],
+      "Affected lines": ["l1"],
+    },
+  },
 };
 
 export const TEST_DATA_2: UnitCommitmentScenario = {
@@ -75,8 +107,11 @@ export const TEST_DATA_2: UnitCommitmentScenario = {
     b2: { "Load (MW)": [10, 20, 30, 40] },
     b3: { "Load (MW)": [0, 30, 0, 40] },
   },
+  Contingencies: {},
   Generators: {},
   "Transmission lines": {},
+  "Storage units": {},
+  "Price-sensitive loads": {},
 };
 
 export const TEST_DATA_BLANK: UnitCommitmentScenario = {
@@ -87,8 +122,11 @@ export const TEST_DATA_BLANK: UnitCommitmentScenario = {
     "Time step (min)": 60,
   },
   Buses: {},
+  Contingencies: {},
   Generators: {},
   "Transmission lines": {},
+  "Storage units": {},
+  "Price-sensitive loads": {},
 };
 
 test("fixtures", () => {});

web/frontend/src/core/Data/fixtures.tsx

@@ -20,4 +20,7 @@ export const BLANK_SCENARIO: UnitCommitmentScenario = {
   Buses: {},
   Generators: {},
   "Transmission lines": {},
+  "Storage units": {},
+  "Price-sensitive loads": {},
+  Contingencies: {},
 };

web/frontend/src/core/Data/types.tsx

@@ -45,6 +45,35 @@ export interface TransmissionLine {
   "Flow limit penalty ($/MW)": number;
 }
 
+export interface StorageUnit {
+  Bus: string;
+  "Minimum level (MWh)": number;
+  "Maximum level (MWh)": number;
+  "Charge cost ($/MW)": number;
+  "Discharge cost ($/MW)": number;
+  "Charge efficiency": number;
+  "Discharge efficiency": number;
+  "Loss factor": number;
+  "Minimum charge rate (MW)": number;
+  "Maximum charge rate (MW)": number;
+  "Minimum discharge rate (MW)": number;
+  "Maximum discharge rate (MW)": number;
+  "Initial level (MWh)": number;
+  "Last period minimum level (MWh)": number;
+  "Last period maximum level (MWh)": number;
+}
+
+export interface PriceSensitiveLoad {
+  Bus: string;
+  "Revenue ($/MW)": number;
+  "Demand (MW)": number[];
+}
+
+export interface Contingency {
+  "Affected lines": string[];
+  "Affected generators": string[];
+}
+
 export interface UnitCommitmentScenario {
   Parameters: {
     Version: string;
@@ -57,6 +86,15 @@ export interface UnitCommitmentScenario {
   "Transmission lines": {
     [name: string]: TransmissionLine;
   };
+  "Storage units": {
+    [name: string]: StorageUnit;
+  };
+  "Price-sensitive loads": {
+    [name: string]: PriceSensitiveLoad;
+  };
+  Contingencies: {
+    [name: string]: Contingency;
+  };
 }
 
 const getTypedGenerators = <T extends any>(

web/frontend/src/core/Operations/commonOps.ts

@@ -253,6 +253,6 @@ export const assertBusesNotEmpty = (
   scenario: UnitCommitmentScenario,
 ): ValidationError | null => {
   if (Object.keys(scenario.Buses).length === 0)
-    return { message: "Profiled unit requires an existing bus." };
+    return { message: "This component requires an existing bus." };
   return null;
 };

web/frontend/src/core/Operations/generatorOps.test.ts

@@ -33,7 +33,7 @@ test("createThermalUnit", () => {
 test("createProfiledUnit with blank file", () => {
   const [, err] = createProfiledUnit(TEST_DATA_BLANK);
   assert(err !== null);
-  assert.equal(err.message, "Profiled unit requires an existing bus.");
+  assert.equal(err.message, "This component requires an existing bus.");
 });
 
 test("changeProfiledUnitData", () => {

web/frontend/src/core/Operations/parameterOps.ts

@@ -29,11 +29,29 @@ export const changeTimeHorizon = (
     Object.values(newScenario.Buses).forEach((bus) => {
       bus["Load (MW)"] = bus["Load (MW)"].slice(0, newT);
     });
+    Object.values(newScenario.Generators).forEach((generator) => {
+      if (generator.Type === "Profiled") {
+        generator["Minimum power (MW)"] = generator["Minimum power (MW)"].slice(0, newT);
+        generator["Maximum power (MW)"] = generator["Maximum power (MW)"].slice(0, newT);
+      }
+    });
+    Object.values(newScenario["Price-sensitive loads"]).forEach((psLoad) => {
+      psLoad["Demand (MW)"] = psLoad["Demand (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);
     });
+    Object.values(newScenario.Generators).forEach((generator) => {
+      if (generator.Type === "Profiled") {
+        generator["Minimum power (MW)"] = generator["Minimum power (MW)"].concat(padding);
+        generator["Maximum power (MW)"] = generator["Maximum power (MW)"].concat(padding);
+      }
+    });
+    Object.values(newScenario["Price-sensitive loads"]).forEach((psLoad) => {
+      psLoad["Demand (MW)"] = psLoad["Demand (MW)"].concat(padding);
+    });
   }
   return [newScenario, null];
 };
@@ -110,6 +128,62 @@ export const changeTimeStep = (
     };
   }
 
+  const newGenerators: { [name: string]: any } = {};
+  for (const generatorName in scenario.Generators) {
+    const generator = scenario.Generators[generatorName]!;
+    if (generator.Type === "Profiled") {
+      // Build data_y for minimum power
+      const minPower = generator["Minimum power (MW)"];
+      const minData_y = Array(oldT + 1).fill(0);
+      for (let i = 0; i < oldT; i++) minData_y[i] = minPower[i];
+      minData_y[oldT] = minData_y[0];
+
+      // Build data_y for maximum power
+      const maxPower = generator["Maximum power (MW)"];
+      const maxData_y = Array(oldT + 1).fill(0);
+      for (let i = 0; i < oldT; i++) maxData_y[i] = maxPower[i];
+      maxData_y[oldT] = maxData_y[0];
+
+      // Run interpolation for both
+      const newMinPower = Array(newT).fill(0);
+      const newMaxPower = Array(newT).fill(0);
+      for (let i = 0; i < newT; i++) {
+        newMinPower[i] = evaluatePwlFunction(data_x, minData_y, newTimeStep * i);
+        newMaxPower[i] = evaluatePwlFunction(data_x, maxData_y, newTimeStep * i);
+      }
+
+      newGenerators[generatorName] = {
+        ...generator,
+        "Minimum power (MW)": newMinPower,
+        "Maximum power (MW)": newMaxPower,
+      };
+    } else {
+      newGenerators[generatorName] = generator;
+    }
+  }
+
+  const newPriceSensitiveLoads: { [name: string]: any } = {};
+  for (const psLoadName in scenario["Price-sensitive loads"]) {
+    const psLoad = scenario["Price-sensitive loads"][psLoadName]!;
+    
+    // Build data_y for demand
+    const demand = psLoad["Demand (MW)"];
+    const demandData_y = Array(oldT + 1).fill(0);
+    for (let i = 0; i < oldT; i++) demandData_y[i] = demand[i];
+    demandData_y[oldT] = demandData_y[0];
+
+    // Run interpolation for demand
+    const newDemand = Array(newT).fill(0);
+    for (let i = 0; i < newT; i++) {
+      newDemand[i] = evaluatePwlFunction(data_x, demandData_y, newTimeStep * i);
+    }
+
+    newPriceSensitiveLoads[psLoadName] = {
+      ...psLoad,
+      "Demand (MW)": newDemand,
+    };
+  }
+
   return [
     {
       ...scenario,
@@ -118,6 +192,8 @@ export const changeTimeStep = (
         "Time step (min)": newTimeStep,
       },
       Buses: newBuses,
+      Generators: newGenerators,
+      "Price-sensitive loads": newPriceSensitiveLoads,
     },
     null,
   ];

web/frontend/src/core/Operations/preprocessing.test.ts

@@ -20,7 +20,8 @@ export const PREPROCESSING_TEST_DATA_1: any = {
 };
 
 test("preprocess", () => {
-  const newScenario = preprocess(PREPROCESSING_TEST_DATA_1);
+  const [newScenario, err] = preprocess(PREPROCESSING_TEST_DATA_1);
+  assert(err === null);
   assert.deepEqual(newScenario, {
     Parameters: {
       Version: "0.4",
@@ -35,5 +36,11 @@ test("preprocess", () => {
       b2: { "Load (MW)": [10, 10, 10, 10, 10] },
       b3: { "Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268] },
     },
+    "Price-sensitive loads": {},
+    "Storage units": {},
+    "Transmission lines": {},
+    Contingencies: {},
+    Generators: {},
+    Reserves: {},
   });
 });

web/frontend/src/core/Operations/preprocessing.ts

@@ -7,6 +7,10 @@
 import { validate, ValidationError } from "../Data/validate";
 import { UnitCommitmentScenario } from "../Data/types";
 import { migrate } from "../Data/migrate";
+import {
+  getContingencyTransmissionLines,
+  rebuildContingencies,
+} from "./transmissionOps";
 
 export const preprocess = (
   data: any,
@@ -41,6 +45,26 @@ export const preprocess = (
     }
   }
 
+  // Add optional fields
+  for (let field of [
+    "Buses",
+    "Generators",
+    "Storage units",
+    "Price-sensitive loads",
+    "Transmission lines",
+    "Reserves",
+    "Contingencies",
+  ]) {
+    if (!result[field]) {
+      result[field] = {};
+    }
+  }
+
   const scenario = result as unknown as UnitCommitmentScenario;
+
+  // Rebuild contingencies
+  const contingencyLines = getContingencyTransmissionLines(scenario);
+  scenario["Contingencies"] = rebuildContingencies(contingencyLines);
+
   return [scenario, null];
 };

web/frontend/src/core/Operations/psloadOps.test.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 { TEST_DATA_1 } from "../Data/fixtures.test";
+import assert from "node:assert";
+import {
+  changePriceSensitiveLoadData,
+  createPriceSensitiveLoad,
+  deletePriceSensitiveLoad,
+  renamePriceSensitiveLoad,
+} from "./psloadOps";
+import { ValidationError } from "../Data/validate";
+
+test("createPriceSensitiveLoad", () => {
+  const [newScenario, err] = createPriceSensitiveLoad(TEST_DATA_1);
+  assert(err === null);
+  assert.equal(Object.keys(newScenario["Price-sensitive loads"]).length, 2);
+  assert("ps2" in newScenario["Price-sensitive loads"]);
+});
+
+test("renamePriceSensitiveLoad", () => {
+  const [newScenario, err] = renamePriceSensitiveLoad(
+    "ps1",
+    "ps2",
+    TEST_DATA_1,
+  );
+  assert(err === null);
+  assert.deepEqual(
+    newScenario["Price-sensitive loads"]["ps2"],
+    TEST_DATA_1["Price-sensitive loads"]["ps1"],
+  );
+  assert.equal(Object.keys(newScenario["Price-sensitive loads"]).length, 1);
+});
+
+test("changePriceSensitiveLoadData", () => {
+  let scenario = TEST_DATA_1;
+  let err: ValidationError | null;
+  [scenario, err] = changePriceSensitiveLoadData("ps1", "Bus", "b3", scenario);
+  assert.equal(err, null);
+  [scenario, err] = changePriceSensitiveLoadData(
+    "ps1",
+    "Demand (MW) 00:00",
+    "99",
+    scenario,
+  );
+  assert.equal(err, null);
+  assert.deepEqual(scenario["Price-sensitive loads"]["ps1"], {
+    Bus: "b3",
+    "Revenue ($/MW)": 23,
+    "Demand (MW)": [99, 50, 50, 50, 50],
+  });
+});
+
+test("deletePriceSensitiveLoad", () => {
+  const newScenario = deletePriceSensitiveLoad("ps1", TEST_DATA_1);
+  assert.equal(Object.keys(newScenario["Price-sensitive loads"]).length, 0);
+});

web/frontend/src/core/Operations/psloadOps.ts

@@ -4,35 +4,34 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+import { ValidationError } from "../Data/validate";
+import { PriceSensitiveLoad, UnitCommitmentScenario } from "../Data/types";
 import {
   assertBusesNotEmpty,
   changeData,
   generateUniqueName,
   renameItemInObject,
 } from "./commonOps";
-import { ValidationError } from "../Data/validate";
+import { PriceSensitiveLoadsColumnSpec } from "../../components/CaseBuilder/Psload";
-import { TransmissionLinesColumnSpec } from "../../components/CaseBuilder/TransmissionLines";
+import { generateTimeslots } from "../../components/Common/Forms/DataTable";
-import { TransmissionLine, UnitCommitmentScenario } from "../Data/types";
 
-export const createTransmissionLine = (
+export const createPriceSensitiveLoad = (
   scenario: UnitCommitmentScenario,
 ): [UnitCommitmentScenario, ValidationError | null] => {
   const err = assertBusesNotEmpty(scenario);
   if (err) return [scenario, err];
   const busName = Object.keys(scenario.Buses)[0]!;
-  const name = generateUniqueName(scenario["Transmission lines"], "l");
+  const timeslots = generateTimeslots(scenario);
+  const name = generateUniqueName(scenario["Price-sensitive loads"], "ps");
   return [
     {
       ...scenario,
-      "Transmission lines": {
+      "Price-sensitive loads": {
-        ...scenario["Transmission lines"],
+        ...scenario["Price-sensitive loads"],
         [name]: {
-          "Source bus": busName,
+          Bus: busName,
-          "Target bus": busName,
+          "Revenue ($/MW)": 0,
-          "Susceptance (S)": 1.0,
+          "Demand (MW)": Array(timeslots.length).fill(0),
-          "Normal flow limit (MW)": 1000,
-          "Emergency flow limit (MW)": 1500,
-          "Flow limit penalty ($/MW)": 5000.0,
         },
       },
     },
@@ -40,50 +39,50 @@ export const createTransmissionLine = (
   ];
 };
 
-export const renameTransmissionLine = (
+export const renamePriceSensitiveLoad = (
   oldName: string,
   newName: string,
   scenario: UnitCommitmentScenario,
 ): [UnitCommitmentScenario, ValidationError | null] => {
-  const [newLine, err] = renameItemInObject(
+  const [newObj, err] = renameItemInObject(
     oldName,
     newName,
-    scenario["Transmission lines"],
+    scenario["Price-sensitive loads"],
   );
   if (err) return [scenario, err];
-  return [{ ...scenario, "Transmission lines": newLine }, null];
+  return [{ ...scenario, "Price-sensitive loads": newObj }, null];
 };
 
-export const changeTransmissionLineData = (
+export const changePriceSensitiveLoadData = (
-  line: string,
+  name: string,
   field: string,
   newValueStr: string,
   scenario: UnitCommitmentScenario,
 ): [UnitCommitmentScenario, ValidationError | null] => {
-  const [newLine, err] = changeData(
+  const [newObj, err] = changeData(
     field,
     newValueStr,
-    scenario["Transmission lines"][line]!,
+    scenario["Price-sensitive loads"][name]!,
-    TransmissionLinesColumnSpec,
+    PriceSensitiveLoadsColumnSpec,
     scenario,
   );
   if (err) return [scenario, err];
   return [
     {
       ...scenario,
-      "Transmission lines": {
+      "Price-sensitive loads": {
-        ...scenario["Transmission lines"],
+        ...scenario["Price-sensitive loads"],
-        [line]: newLine as TransmissionLine,
+        [name]: newObj as PriceSensitiveLoad,
       },
     },
     null,
   ];
 };
 
-export const deleteTransmissionLine = (
+export const deletePriceSensitiveLoad = (
   name: string,
   scenario: UnitCommitmentScenario,
 ): UnitCommitmentScenario => {
-  const { [name]: _, ...newLines } = scenario["Transmission lines"];
+  const { [name]: _, ...newContainer } = scenario["Price-sensitive loads"];
-  return { ...scenario, "Transmission lines": newLines };
+  return { ...scenario, "Price-sensitive loads": newContainer };
 };

web/frontend/src/core/Operations/storageOps.test.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { TEST_DATA_1 } from "../Data/fixtures.test";
+import assert from "node:assert";
+import {
+  changeStorageUnitData,
+  createStorageUnit,
+  deleteStorageUnit,
+  renameStorageUnit,
+} from "./storageOps";
+import { ValidationError } from "../Data/validate";
+
+test("createStorageUnit", () => {
+  const [newScenario, err] = createStorageUnit(TEST_DATA_1);
+  assert(err === null);
+  assert.equal(Object.keys(newScenario["Storage units"]).length, 2);
+  assert("su2" in newScenario["Storage units"]);
+});
+
+test("renameStorageUnit", () => {
+  const [newScenario, err] = renameStorageUnit("su1", "su2", TEST_DATA_1);
+  assert(err === null);
+  assert.deepEqual(
+    newScenario["Storage units"]["su2"],
+    TEST_DATA_1["Storage units"]["su1"],
+  );
+  assert.equal(Object.keys(newScenario["Storage units"]).length, 1);
+});
+
+test("changeStorageUnitData", () => {
+  let scenario = TEST_DATA_1;
+  let err: ValidationError | null;
+  [scenario, err] = changeStorageUnitData("su1", "Bus", "b3", scenario);
+  assert.equal(err, null);
+  [scenario, err] = changeStorageUnitData(
+    "su1",
+    "Minimum level (MWh)",
+    "99",
+    scenario,
+  );
+  assert.equal(err, null);
+  [scenario, err] = changeStorageUnitData(
+    "su1",
+    "Maximum discharge rate (MW)",
+    "99",
+    scenario,
+  );
+  assert.equal(err, null);
+  assert.deepEqual(scenario["Storage units"]["su1"], {
+    Bus: "b3",
+    "Minimum level (MWh)": 99.0,
+    "Maximum level (MWh)": 100.0,
+    "Charge cost ($/MW)": 2.0,
+    "Discharge cost ($/MW)": 1.0,
+    "Charge efficiency": 0.8,
+    "Discharge efficiency": 0.85,
+    "Loss factor": 0.01,
+    "Minimum charge rate (MW)": 5.0,
+    "Maximum charge rate (MW)": 10.0,
+    "Minimum discharge rate (MW)": 4.0,
+    "Maximum discharge rate (MW)": 99.0,
+    "Initial level (MWh)": 20.0,
+    "Last period minimum level (MWh)": 21.0,
+    "Last period maximum level (MWh)": 22.0,
+  });
+});
+
+test("deleteStorageUnit", () => {
+  const newScenario = deleteStorageUnit("su1", TEST_DATA_1);
+  assert.equal(Object.keys(newScenario["Storage units"]).length, 0);
+});

web/frontend/src/core/Operations/storageOps.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 { ValidationError } from "../Data/validate";
+import { StorageUnit, UnitCommitmentScenario } from "../Data/types";
+import {
+  assertBusesNotEmpty,
+  changeData,
+  generateUniqueName,
+  renameItemInObject,
+} from "./commonOps";
+import { StorageUnitsColumnSpec } from "../../components/CaseBuilder/StorageUnits";
+
+export const createStorageUnit = (
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const err = assertBusesNotEmpty(scenario);
+  if (err) return [scenario, err];
+  const busName = Object.keys(scenario.Buses)[0]!;
+  const name = generateUniqueName(scenario["Storage units"], "su");
+  return [
+    {
+      ...scenario,
+      "Storage units": {
+        ...scenario["Storage units"],
+        [name]: {
+          Bus: busName,
+          "Minimum level (MWh)": 0,
+          "Maximum level (MWh)": 1,
+          "Charge cost ($/MW)": 0.0,
+          "Discharge cost ($/MW)": 0.0,
+          "Charge efficiency": 1,
+          "Discharge efficiency": 1,
+          "Loss factor": 0,
+          "Minimum charge rate (MW)": 1,
+          "Maximum charge rate (MW)": 1,
+          "Minimum discharge rate (MW)": 1,
+          "Maximum discharge rate (MW)": 1,
+          "Initial level (MWh)": 0,
+          "Last period minimum level (MWh)": 0,
+          "Last period maximum level (MWh)": 1,
+        },
+      },
+    },
+    null,
+  ];
+};
+
+export const renameStorageUnit = (
+  oldName: string,
+  newName: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const [newObj, err] = renameItemInObject(
+    oldName,
+    newName,
+    scenario["Storage units"],
+  );
+  if (err) return [scenario, err];
+  return [{ ...scenario, "Storage units": newObj }, null];
+};
+
+export const changeStorageUnitData = (
+  name: string,
+  field: string,
+  newValueStr: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const [newObj, err] = changeData(
+    field,
+    newValueStr,
+    scenario["Storage units"][name]!,
+    StorageUnitsColumnSpec,
+    scenario,
+  );
+  if (err) return [scenario, err];
+  return [
+    {
+      ...scenario,
+      "Storage units": {
+        ...scenario["Storage units"],
+        [name]: newObj as StorageUnit,
+      },
+    },
+    null,
+  ];
+};
+
+export const deleteStorageUnit = (
+  name: string,
+  scenario: UnitCommitmentScenario,
+): UnitCommitmentScenario => {
+  const { [name]: _, ...newContainer } = scenario["Storage units"];
+  return { ...scenario, "Storage units": newContainer };
+};

web/frontend/src/core/Operations/transmissionOps.test.ts

@@ -10,6 +10,8 @@ import {
   changeTransmissionLineData,
   createTransmissionLine,
   deleteTransmissionLine,
+  getContingencyTransmissionLines,
+  rebuildContingencies,
   renameTransmissionLine,
 } from "./transmissionOps";
 import { ValidationError } from "../Data/validate";
@@ -32,6 +34,12 @@ test("renameTransmissionLine", () => {
     "Emergency flow limit (MW)": 20000.0,
     "Flow limit penalty ($/MW)": 5000.0,
   });
+  assert.deepEqual(newScenario["Contingencies"], {
+    l3: {
+      "Affected lines": ["l3"],
+      "Affected generators": [],
+    },
+  });
   assert.equal(Object.keys(newScenario["Transmission lines"]).length, 1);
 });
 
@@ -72,4 +80,23 @@ test("changeTransmissionLineData", () => {
 test("deleteTransmissionLine", () => {
   const newScenario = deleteTransmissionLine("l1", TEST_DATA_1);
   assert.equal(Object.keys(newScenario["Transmission lines"]).length, 0);
+  assert.equal(Object.keys(newScenario["Contingencies"]).length, 0);
+});
+
+test("getContingencyTransmissionLines", () => {
+  const contLines = getContingencyTransmissionLines(TEST_DATA_1);
+  assert.deepEqual(contLines, new Set(["l1"]));
+});
+
+test("rebuildContingencies", () => {
+  assert.deepEqual(rebuildContingencies(new Set(["l1", "l2"])), {
+    l1: {
+      "Affected lines": ["l1"],
+      "Affected generators": [],
+    },
+    l2: {
+      "Affected lines": ["l2"],
+      "Affected generators": [],
+    },
+  });
 });

web/frontend/src/core/Operations/transmissionOps.ts

@@ -0,0 +1,163 @@
+/*
+ * 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 {
+  assertBusesNotEmpty,
+  changeData,
+  generateUniqueName,
+  parseBool,
+  renameItemInObject,
+} from "./commonOps";
+import { ValidationError } from "../Data/validate";
+import { TransmissionLinesColumnSpec } from "../../components/CaseBuilder/TransmissionLines";
+import {
+  Contingency,
+  TransmissionLine,
+  UnitCommitmentScenario,
+} from "../Data/types";
+
+export const createTransmissionLine = (
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const err = assertBusesNotEmpty(scenario);
+  if (err) return [scenario, err];
+  const busName = Object.keys(scenario.Buses)[0]!;
+  const name = generateUniqueName(scenario["Transmission lines"], "l");
+  return [
+    {
+      ...scenario,
+      "Transmission lines": {
+        ...scenario["Transmission lines"],
+        [name]: {
+          "Source bus": busName,
+          "Target bus": busName,
+          "Susceptance (S)": 1.0,
+          "Normal flow limit (MW)": 1000,
+          "Emergency flow limit (MW)": 1500,
+          "Flow limit penalty ($/MW)": 5000.0,
+        },
+      },
+    },
+    null,
+  ];
+};
+
+export const renameTransmissionLine = (
+  oldName: string,
+  newName: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  const [newLine, err] = renameItemInObject(
+    oldName,
+    newName,
+    scenario["Transmission lines"],
+  );
+  if (err) return [scenario, err];
+
+  // Update transmission line contingencies
+  let newContingencies = scenario["Contingencies"];
+  const contingencyLines = getContingencyTransmissionLines(scenario);
+  if (contingencyLines.has(oldName)) {
+    contingencyLines.delete(oldName);
+    contingencyLines.add(newName);
+    newContingencies = rebuildContingencies(contingencyLines);
+  }
+
+  return [
+    {
+      ...scenario,
+      "Transmission lines": newLine,
+      Contingencies: newContingencies,
+    },
+    null,
+  ];
+};
+
+export const changeTransmissionLineData = (
+  line: string,
+  field: string,
+  newValueStr: string,
+  scenario: UnitCommitmentScenario,
+): [UnitCommitmentScenario, ValidationError | null] => {
+  if (field === "Contingency?") {
+    // Parse boolean value
+    const [newValue, err] = parseBool(newValueStr);
+    if (err) return [scenario, err];
+
+    // Rebuild contingencies
+    const contLines = getContingencyTransmissionLines(scenario);
+    if (newValue) contLines.add(line);
+    else contLines.delete(line);
+    const newContingencies = rebuildContingencies(contLines);
+
+    return [{ ...scenario, Contingencies: newContingencies }, null];
+  } else {
+    const [newLine, err] = changeData(
+      field,
+      newValueStr,
+      scenario["Transmission lines"][line]!,
+      TransmissionLinesColumnSpec,
+      scenario,
+    );
+    if (err) return [scenario, err];
+    return [
+      {
+        ...scenario,
+        "Transmission lines": {
+          ...scenario["Transmission lines"],
+          [line]: newLine as TransmissionLine,
+        },
+      },
+      null,
+    ];
+  }
+};
+
+export const deleteTransmissionLine = (
+  name: string,
+  scenario: UnitCommitmentScenario,
+): UnitCommitmentScenario => {
+  const { [name]: _, ...newLines } = scenario["Transmission lines"];
+
+  // Update transmission line contingencies
+  let newContingencies = scenario["Contingencies"];
+  const contingencyLines = getContingencyTransmissionLines(scenario);
+  if (contingencyLines.has(name)) {
+    contingencyLines.delete(name);
+    newContingencies = rebuildContingencies(contingencyLines);
+  }
+
+  return {
+    ...scenario,
+    "Transmission lines": newLines,
+    Contingencies: newContingencies,
+  };
+};
+
+export const getContingencyTransmissionLines = (
+  scenario: UnitCommitmentScenario,
+): Set<String> => {
+  let result: Set<String> = new Set();
+  Object.entries(scenario.Contingencies).forEach(([name, contingency]) => {
+    if (contingency["Affected lines"].length !== 1)
+      throw Error("not implemented");
+    result.add(contingency["Affected lines"][0]!!);
+  });
+  return result;
+};
+
+export const rebuildContingencies = (
+  contingencyLines: Set<String>,
+): { [name: string]: Contingency } => {
+  const result: { [name: string]: Contingency } = {};
+  contingencyLines.forEach((lineName) => {
+    result[lineName as string] = {
+      "Affected lines": [lineName as string],
+      "Affected generators": [],
+    };
+  });
+  return result;
+};