ANL-CEEESA/UnitCommitment.jl
1
0
Fork 0
mirror of https://github.com/ANL-CEEESA/UnitCommitment.jl.git synced 2025-12-06 00:08:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

web: profiled units: Allow CSV upload

Browse Source
This commit is contained in:
Alinson S. Xavier
2025-06-23 16:06:23 -05:00
parent eb862e5701
commit 8827f9e6c8
7 changed files with 276 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/components/CaseBuilder/Buses/Buses.tsx
View File

@@ -16,58 +16,46 @@ import FileUploadElement from "../../Common/Buttons/FileUploadElement";
import { useRef } from "react";
import { ValidationError } from "../../../core/Validation/validate";
import DataTable, {
addNameColumn,
addTimeseriesColumn,
ColumnSpec,
generateCsv,
generateTableColumns,
generateTableData,
parseCsv,
} from "../../Common/Forms/DataTable";
import { UnitCommitmentScenario } from "../../../core/fixtures";
import { ColumnDefinition } from "tabulator-tables";
import { parseBusesCsv } from "./BusesCsv";
import {
changeBusData,
createBus,
deleteBus,
renameBus,
} from "../../../core/Operations/busOperations";
export const BusesColumnSpec: ColumnSpec[] = [
{
title: "Name",
type: "string",
width: 150,
},
{
title: "Load (MW)",
type: "number[]",
width: 60,
},
];
export const generateBusesData = (
scenario: UnitCommitmentScenario,
): [any[], ColumnDefinition[]] => {
const colSpecs: ColumnSpec[] = [
{
title: "Name",
type: "string",
width: 150,
},
{
title: "Load (MW)",
type: "number[]",
width: 60,
},
];
const columns = generateTableColumns(scenario, colSpecs);
const data = generateTableData(scenario.Buses, colSpecs, scenario);
const columns = generateTableColumns(scenario, BusesColumnSpec);
const data = generateTableData(scenario.Buses, BusesColumnSpec, scenario);
return [data, columns];
};
export const generateBusesColumns = (
scenario: UnitCommitmentScenario,
): ColumnDefinition[] => {
const columns: ColumnDefinition[] = [];
addNameColumn(columns);
addTimeseriesColumn(scenario, "Load (MW)", columns);
return columns;
};
interface BusesProps {
scenario: UnitCommitmentScenario;
onBusCreated: () => void;
onBusDataChanged: (
bus: string,
field: string,
newValue: string,
) => ValidationError | null;
onBusDeleted: (bus: string) => ValidationError | null;
onBusRenamed: (oldName: string, newName: string) => ValidationError | null;
onDataChanged: (scenario: UnitCommitmentScenario) => void;
onError: (msg: string) => void;
}
function BusesComponent(props: BusesProps) {
@@ -81,19 +69,70 @@ function BusesComponent(props: BusesProps) {
const onUpload = () => {
fileUploadElem.current!.showFilePicker((csvContents: any) => {
const newScenario = parseBusesCsv(props.scenario, csvContents);
const [newBuses, err] = parseCsv(
csvContents,
BusesColumnSpec,
props.scenario,
);
if (err) {
props.onError(err.message);
return;
}
const newScenario = {
...props.scenario,
Buses: newBuses,
};
props.onDataChanged(newScenario);
});
};
const onAdd = () => {
const newScenario = createBus(props.scenario);
props.onDataChanged(newScenario);
};
const onDataChanged = (
bus: string,
field: string,
newValue: string,
): ValidationError | null => {
const [newScenario, err] = changeBusData(
bus,
field,
newValue,
props.scenario,
);
if (err) {
props.onError(err.message);
return err;
}
props.onDataChanged(newScenario);
return null;
};
const onDelete = (bus: string): ValidationError | null => {
const newScenario = deleteBus(bus, props.scenario);
props.onDataChanged(newScenario);
return null;
};
const onRename = (
oldName: string,
newName: string,
): ValidationError | null => {
const [newScenario, err] = renameBus(oldName, newName, props.scenario);
if (err) {
props.onError(err.message);
return err;
}
props.onDataChanged(newScenario);
return null;
};
return (
<div>
<SectionHeader title="Buses">
<SectionButton
icon={faPlus}
tooltip="Add"
onClick={props.onBusCreated}
/>
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
<SectionButton
icon={faDownload}
tooltip="Download"
@@ -102,9 +141,9 @@ function BusesComponent(props: BusesProps) {
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
</SectionHeader>
<DataTable
onRowDeleted={props.onBusDeleted}
onRowRenamed={props.onBusRenamed}
onDataChanged={props.onBusDataChanged}
onRowDeleted={onDelete}
onRowRenamed={onRename}
onDataChanged={onDataChanged}
generateData={() => generateBusesData(props.scenario)}
/>
<FileUploadElement ref={fileUploadElem} accept=".csv" />

64
web/src/components/CaseBuilder/Buses/BusesCsv.ts
View File

@@ -1,64 +0,0 @@
/*
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
* Released under the modified BSD license. See COPYING.md for more details.
*/
import { Buses, UnitCommitmentScenario } from "../../../core/fixtures";
import Papa from "papaparse";
import { generateBusesColumns } from "./Buses";
export const parseBusesCsv = (
scenario: UnitCommitmentScenario,
csvData: string,
): UnitCommitmentScenario => {
const results = Papa.parse(csvData, {
header: true,
skipEmptyLines: true,
transformHeader: (header) => header.trim(),
transform: (value) => value.trim(),
});
// Check for parsing errors
if (results.errors.length > 0) {
throw Error(`Invalid CSV: Parsing error: ${results.errors}`);
}
// Check CSV headers
const expectedFields = generateBusesColumns(scenario).map(
(col) => col.field,
)!;
const actualFields = results.meta.fields!;
for (let i = 0; i < expectedFields.length; i++) {
if (expectedFields[i] !== actualFields[i]) {
throw Error(`Invalid CSV: Header mismatch at column ${i + 1}"`);
}
}
// Parse each row
const T = getNumTimesteps(scenario);
const buses: Buses = {};
for (let i = 0; i < results.data.length; i++) {
const row = results.data[i] as { [key: string]: any };
const busName = row["Name"] as string;
const busLoad: number[] = Array(T);
for (let j = 0; j < T; j++) {
busLoad[j] = parseFloat(row[`Load ${j}`]);
}
buses[busName] = {
"Load (MW)": busLoad,
};
}
return {
...scenario,
Buses: buses,
};
};
function getNumTimesteps(scenario: UnitCommitmentScenario) {
return (
(scenario.Parameters["Time horizon (h)"] *
scenario.Parameters["Time step (min)"]) /
60
);
}

81
web/src/components/CaseBuilder/CaseBuilder.tsx
View File

@@ -17,19 +17,8 @@ import "tabulator-tables/dist/css/tabulator.min.css";
import "../Common/Forms/Tables.css";
import { useState } from "react";
import Footer from "./Footer";
import { validate, ValidationError } from "../../core/Validation/validate";
import { validate } from "../../core/Validation/validate";
import { offerDownload } from "../Common/io";
import {
changeBusData,
createBus,
deleteBus,
renameBus,
} from "../../core/Operations/busOperations";
import {
changeParameter,
changeTimeHorizon,
changeTimeStep,
} from "../../core/Operations/parameterOperations";
import { preprocess } from "../../core/Operations/preprocessing";
import Toast from "../Common/Forms/Toast";
import ProfiledUnitsComponent from "./ProfiledUnits/ProfiledUnits";
@@ -59,50 +48,10 @@ const CaseBuilder = () => {
);
};
const onBusCreated = () => {
const newScenario = createBus(scenario);
setAndSaveScenario(newScenario);
};
const onBusDataChanged = (
bus: string,
field: string,
newValue: string,
): ValidationError | null => {
const [newScenario, err] = changeBusData(bus, field, newValue, scenario);
if (err) {
setToastMessage(err.message);
return err;
}
setAndSaveScenario(newScenario);
return null;
};
const onBusDeleted = (bus: string): ValidationError | null => {
const newScenario = deleteBus(bus, scenario);
setAndSaveScenario(newScenario);
return null;
};
const onBusRenamed = (
oldName: string,
newName: string,
): ValidationError | null => {
const [newScenario, err] = renameBus(oldName, newName, scenario);
if (err) {
setToastMessage(err.message);
return err;
}
setAndSaveScenario(newScenario);
return null;
};
const onDataChanged = (newScenario: UnitCommitmentScenario) => {
setAndSaveScenario(newScenario);
};
const onProfiledUnitCreated = () => {};
const onLoad = (scenario: UnitCommitmentScenario) => {
const preprocessed = preprocess(
scenario,
@@ -119,42 +68,24 @@ const CaseBuilder = () => {
setToastMessage("Data loaded successfully");
};
const onParameterChanged = (key: string, value: string) => {
let newScenario, err;
if (key === "Time horizon (h)") {
[newScenario, err] = changeTimeHorizon(scenario, value);
} else if (key === "Time step (min)") {
[newScenario, err] = changeTimeStep(scenario, value);
} else {
[newScenario, err] = changeParameter(scenario, key, value);
}
if (err) {
setToastMessage(err.message);
return err;
}
setAndSaveScenario(newScenario);
return null;
};
return (
<div>
<Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
<div className="content">
<Parameters
onParameterChanged={onParameterChanged}
scenario={scenario}
onDataChanged={onDataChanged}
onError={setToastMessage}
/>
<Buses
scenario={scenario}
onBusCreated={onBusCreated}
onBusDataChanged={onBusDataChanged}
onBusRenamed={onBusRenamed}
onBusDeleted={onBusDeleted}
onDataChanged={onDataChanged}
onError={setToastMessage}
/>
<ProfiledUnitsComponent
scenario={scenario}
onProfiledUnitCreated={onProfiledUnitCreated}
onDataChanged={onDataChanged}
onError={setToastMessage}
/>
<Toast message={toastMessage} />
</div>

34
web/src/components/CaseBuilder/Parameters/Parameters.tsx
View File

@@ -8,14 +8,36 @@ import SectionHeader from "../../Common/SectionHeader/SectionHeader";
import Form from "../../Common/Forms/Form";
import TextInputRow from "../../Common/Forms/TextInputRow";
import { UnitCommitmentScenario } from "../../../core/fixtures";
import { ValidationError } from "../../../core/Validation/validate";
import {
changeParameter,
changeTimeHorizon,
changeTimeStep,
} from "../../../core/Operations/parameterOperations";
interface ParametersProps {
scenario: UnitCommitmentScenario;
onParameterChanged: (key: string, value: string) => ValidationError | null;
onError: (msg: string) => void;
onDataChanged: (scenario: UnitCommitmentScenario) => void;
}
function Parameters(props: ParametersProps) {
const onDataChanged = (key: string, value: string) => {
let newScenario, err;
if (key === "Time horizon (h)") {
[newScenario, err] = changeTimeHorizon(props.scenario, value);
} else if (key === "Time step (min)") {
[newScenario, err] = changeTimeStep(props.scenario, value);
} else {
[newScenario, err] = changeParameter(props.scenario, key, value);
}
if (err) {
props.onError(err.message);
return err;
}
props.onDataChanged(newScenario);
return null;
};
return (
<div>
<SectionHeader title="Parameters"></SectionHeader>
@@ -25,23 +47,21 @@ function Parameters(props: ParametersProps) {
unit="h"
tooltip="Length of the planning horizon (in hours)."
initialValue={`${props.scenario.Parameters["Time horizon (h)"]}`}
onChange={(v) => props.onParameterChanged("Time horizon (h)", v)}
onChange={(v) => onDataChanged("Time horizon (h)", v)}
/>
<TextInputRow
label="Time step"
unit="min"
tooltip="Length of each time step (in minutes). Must be a divisor of 60 (e.g. 60, 30, 20, 15, etc)."
initialValue={`${props.scenario.Parameters["Time step (min)"]}`}
onChange={(v) => props.onParameterChanged("Time step (min)", v)}
onChange={(v) => onDataChanged("Time step (min)", v)}
/>
<TextInputRow
label="Power balance penalty"
unit="$/MW"
tooltip="Penalty for system-wide shortage or surplus in production (in /MW). This is charged per time step. For example, if there is a shortage of 1 MW for three time steps, three times this amount will be charged."
initialValue={`${props.scenario.Parameters["Power balance penalty ($/MW)"]}`}
onChange={(v) =>
props.onParameterChanged("Power balance penalty ($/MW)", v)
}
onChange={(v) => onDataChanged("Power balance penalty ($/MW)", v)}
/>
</Form>
</div>

101
web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
View File

@@ -16,66 +16,94 @@ import DataTable, {
generateCsv,
generateTableColumns,
generateTableData,
parseCsv,
} from "../../Common/Forms/DataTable";
import { UnitCommitmentScenario } from "../../../core/fixtures";
import { ColumnDefinition } from "tabulator-tables";
import { offerDownload } from "../../Common/io";
import FileUploadElement from "../../Common/Buttons/FileUploadElement";
import { useRef } from "react";
interface ProfiledUnitsProps {
scenario: UnitCommitmentScenario;
onProfiledUnitCreated: () => void;
onDataChanged: (scenario: UnitCommitmentScenario) => void;
onError: (msg: string) => void;
}
const ProfiledUnitsColumnSpec: ColumnSpec[] = [
{
title: "Name",
type: "string",
width: 150,
},
{
title: "Bus",
type: "string",
width: 150,
},
{
title: "Cost ($/MW)",
type: "number",
width: 100,
},
{
title: "Maximum power (MW)",
type: "number[]",
width: 60,
},
{
title: "Minimum power (MW)",
type: "number[]",
width: 60,
},
];
const generateProfiledUnitsData = (
scenario: UnitCommitmentScenario,
): [any[], ColumnDefinition[]] => {
const colSpecs: ColumnSpec[] = [
{
title: "Name",
type: "string",
width: 150,
},
{
title: "Bus",
type: "string",
width: 150,
},
{
title: "Cost ($/MW)",
type: "number",
width: 100,
},
{
title: "Maximum power (MW)",
type: "number[]",
width: 60,
},
{
title: "Minimum power (MW)",
type: "number[]",
width: 60,
},
];
const columns = generateTableColumns(scenario, colSpecs);
const data = generateTableData(scenario.Generators, colSpecs, scenario);
const columns = generateTableColumns(scenario, ProfiledUnitsColumnSpec);
const data = generateTableData(
scenario.Generators,
ProfiledUnitsColumnSpec,
scenario,
);
return [data, columns];
};
const ProfiledUnitsComponent = (props: ProfiledUnitsProps) => {
const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => {
const [data, columns] = generateProfiledUnitsData(props.scenario);
const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "profiled_units.csv");
};
const onUpload = () => {};
const onUpload = () => {
fileUploadElem.current!.showFilePicker((csvContents: any) => {
const [newGenerators, err] = parseCsv(
csvContents,
ProfiledUnitsColumnSpec,
props.scenario,
);
if (err) {
props.onError(err.message);
return;
}
const newScenario = {
...props.scenario,
Generators: newGenerators,
};
props.onDataChanged(newScenario);
});
};
const onAdd = () => {};
return (
<div>
<SectionHeader title="Profiled Units">
<SectionButton
icon={faPlus}
tooltip="Add"
onClick={props.onProfiledUnitCreated}
/>
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
<SectionButton
icon={faDownload}
tooltip="Download"
@@ -95,6 +123,7 @@ const ProfiledUnitsComponent = (props: ProfiledUnitsProps) => {
}}
generateData={() => generateProfiledUnitsData(props.scenario)}
/>
<FileUploadElement ref={fileUploadElem} accept=".csv" />
</div>
);
};

51
web/src/components/Common/Forms/DataTable.test.ts
View File

@@ -5,9 +5,11 @@
*/
import assert from "node:assert";
import { parseBusesCsv } from "../../CaseBuilder/Buses/BusesCsv";
import { generateBusesData } from "../../CaseBuilder/Buses/Buses";
import { generateCsv } from "./DataTable";
import {
BusesColumnSpec,
generateBusesData,
} from "../../CaseBuilder/Buses/Buses";
import { generateCsv, parseCsv } from "./DataTable";
import { TEST_DATA_1 } from "../../../core/fixtures.test";
test("generate CSV", () => {
@@ -21,38 +23,19 @@ test("generate CSV", () => {
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(FixturesTest, 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)", () => {
test("parse CSV", () => {
const csvContents =
"Name,Load 5,Load 7,Load 23,Load 3,Load 4\n" +
"Name,Load (MW) 00:00,Load (MW) 01:00,Load (MW) 02:00,Load (MW) 03:00,Load (MW) 04:00\n" +
"b1,0,1,2,3,4\n" +
"b3,27.3729,26.29698,25.58005,25.15675,25.4268";
expect(() => {
parseBusesCsv(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(TEST_DATA_1, csvContents);
}).toThrow(Error);
const [newBuses, err] = parseCsv(csvContents, BusesColumnSpec, TEST_DATA_1);
assert(err === null);
assert.deepEqual(newBuses, {
b1: {
"Load (MW)": [0, 1, 2, 3, 4],
},
b3: {
"Load (MW)": [27.3729, 26.29698, 25.58005, 25.15675, 25.4268],
},
});
});

110
web/src/components/Common/Forms/DataTable.tsx
View File

@@ -12,6 +12,7 @@ import {
} from "tabulator-tables";
import { ValidationError } from "../../../core/Validation/validate";
import { UnitCommitmentScenario } from "../../../core/fixtures";
import Papa from "papaparse";
export interface ColumnSpec {
title: string;
@@ -126,17 +127,85 @@ export const generateCsv = (data: any[], columns: ColumnDefinition[]) => {
return `${csvHeader}\n${csvBody}`;
};
export const floatFormatter = (cell: CellComponent) => {
return parseFloat(cell.getValue()).toFixed(1);
export const parseCsv = (
csvContents: string,
colSpecs: ColumnSpec[],
scenario: UnitCommitmentScenario,
): [any, ValidationError | null] => {
// Parse contents
const csv = Papa.parse(csvContents, {
header: true,
skipEmptyLines: true,
transformHeader: (header) => header.trim(),
transform: (value) => value.trim(),
});
// Check for parsing errors
if (csv.errors.length > 0) {
console.error(csv.errors);
return [null, { message: "Could not parse CSV file" }];
}
// Check CSV headers
const columns = generateTableColumns(scenario, colSpecs);
const expectedHeader: string[] = [];
columns.forEach((column) => {
if (column.columns) {
column.columns.forEach((subcolumn) => {
expectedHeader.push(subcolumn.field!);
});
} else {
expectedHeader.push(column.field!);
}
});
const actualHeader = csv.meta.fields!;
for (let i = 0; i < expectedHeader.length; i++) {
if (expectedHeader[i] !== actualHeader[i]) {
return [
null,
{
message: `Invalid CSV: Header mismatch at column ${i + 1}.
Expected "${expectedHeader[i]}", found "${actualHeader[i]}"`,
},
];
}
}
// Parse each row
const timeslots = generateTimeslots(scenario);
const data: { [key: string]: any } = {};
for (let i = 0; i < csv.data.length; i++) {
const row = csv.data[i] as { [key: string]: any };
const name = row["Name"] as string;
data[name] = {};
for (const spec of colSpecs) {
if (spec.title === "Name") continue;
switch (spec.type) {
case "string":
case "number":
data[name][spec.title] = row[spec.title];
break;
case "number[]":
data[name][spec.title] = Array(timeslots.length);
for (let i = 0; i < timeslots.length; i++) {
data[name][spec.title][i] = parseFloat(
row[`${spec.title} ${timeslots[i]}`],
);
}
break;
default:
console.error(`Unknown type: ${spec.type}`);
}
}
}
return [data, null];
};
export const addNameColumn = (columns: ColumnDefinition[]) => {
columns.push({
...columnsCommonAttrs,
title: "Name",
field: "Name",
minWidth: 150,
});
export const floatFormatter = (cell: CellComponent) => {
return parseFloat(cell.getValue()).toFixed(1);
};
export const generateTimeslots = (scenario: UnitCommitmentScenario) => {
@@ -156,29 +225,6 @@ export const generateTimeslots = (scenario: UnitCommitmentScenario) => {
return timeslots;
};
export const addTimeseriesColumn = (
scenario: UnitCommitmentScenario,
title: string,
columns: ColumnDefinition[],
minWidth: number = 65,
) => {
const timeSlots = generateTimeslots(scenario);
const subColumns: ColumnDefinition[] = [];
timeSlots.forEach((t) => {
subColumns.push({
...columnsCommonAttrs,
title: `${t}`,
field: `${title} ${t}`,
minWidth: minWidth,
formatter: floatFormatter,
});
});
columns.push({
title: title,
columns: subColumns,
});
};
export const columnsCommonAttrs: ColumnDefinition = {
headerHozAlign: "left",
hozAlign: "left",