Buses

web/src/components/CaseBuilder/Buses/BusOperations.test.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 "../../../core/data";
+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]},
+    }
+};
+
+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;
+    scenario = changeBusData("b1", "Load 0", "99", scenario);
+    scenario = changeBusData("b1", "Load 3", "99", scenario);
+    scenario = changeBusData("b3", "Load 4", "99", 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)": [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("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 = BUS_TEST_DATA_1;
+    scenario = renameBus("b2", "b99", 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]},
+            "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]},
+        }
+    });
+});

web/src/components/CaseBuilder/Buses/BusOperations.ts

@@ -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.
+ */
+
+import {Buses, UnitCommitmentScenario} from "../../../core/data";
+
+function generateUniqueBusName(scenario: UnitCommitmentScenario) {
+    let newBusName = "b";
+    let counter = 1;
+    let name = `${newBusName}${counter}`;
+    while (name in scenario.Buses) {
+        counter++;
+        name = `${newBusName}${counter}`;
+    }
+    return name;
+}
+
+function generateDefaultBusLoad(scenario: UnitCommitmentScenario) {
+    const T = scenario.Parameters["Time horizon (h)"] * (60 / scenario.Parameters["Time step (min)"]);
+    return new Array(T).fill(0);
+}
+
+export function createBus(scenario: UnitCommitmentScenario) {
+    const load = generateDefaultBusLoad(scenario);
+    let name = generateUniqueBusName(scenario);
+    return {
+        ...scenario,
+        "Buses": {
+            ...scenario.Buses,
+            [name]: {
+                "Load (MW)": load
+            }
+        }
+    };
+}
+
+export function changeBusData(bus: string, field: string, newValue: string, scenario: UnitCommitmentScenario) {
+    // Load (MW)
+    const match = field.match(/Load (\d+)/);
+    if(match) {
+        const idx = parseInt(match[1]!, 10);
+        const newLoad = [...scenario.Buses[bus]!["Load (MW)"]];
+        newLoad[idx] = parseFloat(newValue);
+        return {
+            ...scenario,
+            Buses: {
+                ...scenario.Buses,
+                [bus]: {
+                    "Load (MW)": newLoad,
+                }
+            }
+        };
+    }
+
+    throw Error(`Unknown field: ${field}`);
+}
+
+export function deleteBus(bus: string, scenario: UnitCommitmentScenario) {
+    const { [bus]: _, ...newBuses} = scenario.Buses;
+    return {
+        ...scenario,
+        Buses: newBuses
+    };
+}
+
+export function renameBus(oldName: string, newName: string, scenario: UnitCommitmentScenario) {
+    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
+    };
+}

web/src/components/CaseBuilder/Buses/Buses.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 SectionHeader from "../../Common/SectionHeader/SectionHeader";
+import {UnitCommitmentScenario} from "../../../core/data";
+import BusesTable, {generateBusesCsv, parseBusesCsv} from "./BusesTable";
+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";
+
+interface BusesProps {
+    scenario: UnitCommitmentScenario,
+    onBusCreated: () => void,
+    onBusDataChanged: (bus: string, field: string, newValue: string) => void,
+    onBusDeleted: (bus: string) => void,
+    onBusRenamed: (oldName: string, newName: string) => void,
+    onDataChanged: (scenario: UnitCommitmentScenario) => void,
+}
+
+function BusesComponent(props: BusesProps) {
+    const fileUploadElem = useRef<FileUploadElement>(null);
+
+    const onDownload = () => {
+        const csvContents = generateBusesCsv(props.scenario);
+        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>
+            <BusesTable
+                scenario={props.scenario}
+                onBusDataChanged={props.onBusDataChanged}
+                onBusDeleted={props.onBusDeleted}
+                onBusRenamed={props.onBusRenamed}
+            />
+            <FileUploadElement ref={fileUploadElem} accept=".csv"/>
+        </div>
+    );
+}
+
+export default BusesComponent;

web/src/components/CaseBuilder/Buses/BusesTable.test.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 {generateBusesCsv, parseBusesCsv} from "./BusesTable";
+import {BUS_TEST_DATA_1} from "./BusOperations.test";
+
+test("generate CSV", () => {
+    const actualCsv = generateBusesCsv(BUS_TEST_DATA_1);
+    const expectedCsv =
+        "Name,Load 0,Load 1,Load 2,Load 3,Load 4\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);
+});

web/src/components/CaseBuilder/Buses/BusesTable.tsx

@@ -0,0 +1,177 @@
+/*
+ * 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 Papa from 'papaparse';
+import {Buses, UnitCommitmentScenario} from "../../../core/data";
+import {useEffect, useRef} from "react";
+import {CellComponent, ColumnDefinition, TabulatorFull as Tabulator} from "tabulator-tables";
+
+const generateBusesTableData = (scenario: UnitCommitmentScenario) => {
+    const tableData: { [name: string]: any }[] = [];
+    for (const [busName, busData] of Object.entries(scenario.Buses)) {
+        const entry: { [key: string]: any } = {};
+        entry["Name"] = busName;
+        for (const [i, mw] of Object.entries(busData["Load (MW)"])) {
+            entry[`Load ${i}`] = mw;
+        }
+        tableData.push(entry);
+    }
+    return tableData;
+};
+
+const generateBusesTableColumns = (scenario: UnitCommitmentScenario): [ColumnDefinition] => {
+    const timeHorizonHours = scenario["Parameters"]["Time horizon (h)"];
+    const timeStepMin = scenario["Parameters"]["Time step (min)"];
+    const columnsCommonAttrs: ColumnDefinition = {
+        title: "",
+        editor: "input",
+        editorParams: {
+            selectContents: true,
+        },
+        headerHozAlign: "right",
+        cssClass: "custom-cell-style",
+        headerWordWrap: true,
+        formatter: "plaintext",
+        headerSort: false,
+        resizable: false,
+    };
+    const columns: [ColumnDefinition] = [
+        {
+            ...columnsCommonAttrs,
+            title: "Name",
+            field: "Name",
+            width: 150,
+        },
+    ];
+    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')}`;
+        columns.push({
+            ...columnsCommonAttrs,
+            title: `Load (MW)<div class="subtitle">${formattedTime}</div>`,
+            field: `Load ${offset}`,
+            width: 100,
+        });
+    }
+    return columns;
+};
+
+export const generateBusesCsv = (scenario: UnitCommitmentScenario) => {
+    const columns = generateBusesTableColumns(scenario);
+    const csvHeader = columns.map(row => row.field).join(",");
+    const csvBody = Object.entries(scenario.Buses).map(([busName, busData]) => {
+        const csvLoad = busData["Load (MW)"].join(",");
+        return `${busName},${csvLoad}`;
+    }).join("\n");
+    return `${csvHeader}\n${csvBody}`;
+};
+
+function getNumTimesteps(scenario: UnitCommitmentScenario) {
+    return scenario.Parameters["Time horizon (h)"] * scenario.Parameters["Time step (min)"] / 60;
+}
+
+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 = generateBusesTableColumns(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,
+    };
+};
+
+interface BusesTableProps {
+    scenario: UnitCommitmentScenario
+    onBusDataChanged: (bus: string, field: string, newValue: string) => void,
+    onBusDeleted: (bus: string) => void,
+    onBusRenamed: (oldName: string, newName: string) => void,
+}
+
+function BusesTable(props: BusesTableProps) {
+    const tableContainerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const onCellEdited = (cell: CellComponent) => {
+            let newValue = cell.getValue();
+            let oldValue = cell.getOldValue();
+            if (newValue === oldValue) return;
+
+            if (cell.getField() === "Name") {
+                if (newValue === "") {
+                    props.onBusDeleted(oldValue);
+                    cell.getRow().delete();
+                } else {
+                    props.onBusRenamed(
+                        oldValue,
+                        newValue,
+                    );
+                }
+            } else {
+                const row = cell.getRow().getData();
+                const bus = row["Name"];
+                props.onBusDataChanged(
+                    bus, cell.getField(), newValue
+                );
+            }
+        };
+        
+        if (tableContainerRef.current === null) return;
+        const table = new Tabulator(tableContainerRef.current, {
+            layout: "fitColumns",
+            data: generateBusesTableData(props.scenario),
+            columns: generateBusesTableColumns(props.scenario),
+            maxHeight: "500px",
+        });
+        table.on("cellEdited", (cell) => {
+            onCellEdited(cell);
+        });
+        table.on("cellEditing", (cell) => {
+        });
+        // table.on("scrollHorizontal", (left, leftDir) => {
+        //   console.log(left, leftDir);
+        // });
+        table.rowManager.scrollHorizontal(100, false);
+        // table.columnManager.scrollHorizontal(100, false);
+    }, [props, props.scenario]);
+
+    return <div className="tableContainer" ref={tableContainerRef}/>;
+}
+
+export default BusesTable;
+

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -1,11 +1,88 @@
+/*
+ * 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/Header";
 import Parameters from "./Parameters/Parameters";
+import BusesComponent from "./Buses/Buses";
+import {BLANK_SCENARIO, TEST_SCENARIO, UnitCommitmentScenario} from "../../core/data";
+
+import "tabulator-tables/dist/css/tabulator.min.css";
+import "../Common/Forms/Tables.css";
+import {useState} from "react";
+import Footer from "./Footer/Footer";
+import {validate} from "../../core/Validation/validate";
+import {offerDownload} from "../Common/io";
+import {changeBusData, createBus, deleteBus, renameBus} from "./Buses/BusOperations";
+
+const CaseBuilder = () => {
+    const [scenario, setScenario] = useState(TEST_SCENARIO);
+
+    const onClear = () => {
+        setScenario(BLANK_SCENARIO);
+    };
+
+    const onSave = () => {
+        offerDownload(
+            JSON.stringify(scenario, null, 2),
+            'application/json',
+            'case.json',
+        );
+    };
+
+    const onBusCreated = () => {
+        const newScenario = createBus(scenario);
+        setScenario(newScenario);
+    };
+
+    const onBusDataChanged = (bus: string, field: string, newValue: string) => {
+        const newScenario = changeBusData(bus, field, newValue, scenario);
+        setScenario(newScenario);
+    };
+
+    const onBusDeleted = (bus: string) => {
+        const newScenario = deleteBus(bus, scenario);
+        setScenario(newScenario);
+    };
+
+    const onBusRenamed = (oldName: string, newName: string) => {
+        const newScenario = renameBus(oldName, newName, scenario);
+        setScenario(newScenario);
+    };
+
+    const onDataChanged = (newScenario: UnitCommitmentScenario) => {
+        setScenario(newScenario);
+    };
+
+    const onLoad = (scenario: UnitCommitmentScenario) => {
+        if (!validate(scenario)) {
+            console.error(validate.errors);
+            return;
+        }
+        setScenario(scenario);
+    };
 
-function CaseBuilder() {
     return <div>
-        <Header/>
-        <Parameters/>
+        <Header
+            onClear={onClear}
+            onSave={onSave}
+            onLoad={onLoad}
+        />
+        <div className="content">
+            <Parameters scenario={scenario}/>
+            <BusesComponent
+                scenario={scenario}
+                onBusCreated={onBusCreated}
+                onBusDataChanged={onBusDataChanged}
+                onBusRenamed={onBusRenamed}
+                onBusDeleted={onBusDeleted}
+                onDataChanged={onDataChanged}
+            />
+        </div>
+        <Footer/>
     </div>;
-}
+};
 
 export default CaseBuilder;

web/src/components/CaseBuilder/Footer/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;
+}

web/src/components/CaseBuilder/Footer/Footer.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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;

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

@@ -1,3 +1,9 @@
+/*
+ * 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);

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

@@ -1,18 +1,42 @@
-import styles from "./Header.module.css"
-import Button from "../../Common/Buttons/Button";
+/*
+ * 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/data";
+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);
+        });
+    }
 
-function Header() {
     return (
         <div className={styles.HeaderBox}>
             <div className={styles.HeaderContent}>
                 <h1>UnitCommitment.jl</h1>
                 <h2>Case Builder</h2>
                 <div className={styles.buttonContainer}>
-                    <Button title="Clear"/>
-                    <Button title="Load"/>
-                    <Button title="Save"/>
-                    <Button title="Submit"/>
+                    <SiteHeaderButton title="Clear" onClick={props.onClear}/>
+                    <SiteHeaderButton title="Load" onClick={onLoad}/>
+                    <SiteHeaderButton title="Save" onClick={props.onSave}/>
                 </div>
+                <FileUploadElement ref={fileElem} accept=".json"/>
             </div>
         </div>
     );

web/src/components/CaseBuilder/Parameters/Parameters.tsx

@@ -1,36 +1,48 @@
+/*
+ * 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/data";
 
-function Parameters() {
+interface ParametersProps {
+    scenario: UnitCommitmentScenario
+}
+
+function Parameters({scenario}: ParametersProps) {
     return (
         <div>
-            <SectionHeader title="Parameters" />
+            <SectionHeader title="Parameters">
+            </SectionHeader>
             <Form>
                 <TextInputRow
                     label="Time horizon"
                     unit="h"
                     tooltip="Length of the planning horizon (in hours)."
-                    currentValue="48"
+                    currentValue={`${scenario.Parameters["Time horizon (h)"]}`}
                     defaultValue="24"
                 />
                 <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)."
-                    currentValue=""
+                    currentValue={`${scenario.Parameters["Time step (min)"]}`}
                     defaultValue="60"
                 />
                 <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."
-                    currentValue=""
+                    currentValue={`${scenario.Parameters["Power balance penalty ($/MW)"]}`}
                     defaultValue="1000.0"
                 />
             </Form>
         </div>
-    )
+    );
 }
 
 export default Parameters;