mirror of
https://github.com/ANL-CEEESA/UnitCommitment.jl.git
synced 2025-12-07 16:58:51 -06:00
web: Profiled units
This commit is contained in:
115
web/src/components/CaseBuilder/Buses/Buses.tsx
Normal file
115
web/src/components/CaseBuilder/Buses/Buses.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
|
||||
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
|
||||
* Released under the modified BSD license. See COPYING.md for more details.
|
||||
*/
|
||||
|
||||
import SectionHeader from "../../Common/SectionHeader/SectionHeader";
|
||||
import SectionButton from "../../Common/Buttons/SectionButton";
|
||||
import {
|
||||
faDownload,
|
||||
faPlus,
|
||||
faUpload,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { offerDownload } from "../../Common/io";
|
||||
import FileUploadElement from "../../Common/Buttons/FileUploadElement";
|
||||
import { useRef } from "react";
|
||||
import { ValidationError } from "../../../core/Validation/validate";
|
||||
import DataTable, {
|
||||
addNameColumn,
|
||||
addTimeseriesColumn,
|
||||
ColumnSpec,
|
||||
generateCsv,
|
||||
generateTableColumns,
|
||||
generateTableData,
|
||||
} from "../../Common/Forms/DataTable";
|
||||
|
||||
import { UnitCommitmentScenario } from "../../../core/fixtures";
|
||||
import { ColumnDefinition } from "tabulator-tables";
|
||||
import { parseBusesCsv } from "./BusesCsv";
|
||||
|
||||
export const generateBusesData = (
|
||||
scenario: UnitCommitmentScenario,
|
||||
): [any[], ColumnDefinition[]] => {
|
||||
const colSpecs: ColumnSpec[] = [
|
||||
{
|
||||
title: "Name",
|
||||
type: "string",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Load (MW)",
|
||||
type: "number[]",
|
||||
width: 60,
|
||||
},
|
||||
];
|
||||
const columns = generateTableColumns(scenario, colSpecs);
|
||||
const data = generateTableData(scenario.Buses, colSpecs, scenario);
|
||||
return [data, columns];
|
||||
};
|
||||
|
||||
export const generateBusesColumns = (
|
||||
scenario: UnitCommitmentScenario,
|
||||
): ColumnDefinition[] => {
|
||||
const columns: ColumnDefinition[] = [];
|
||||
addNameColumn(columns);
|
||||
addTimeseriesColumn(scenario, "Load (MW)", columns);
|
||||
return columns;
|
||||
};
|
||||
|
||||
interface BusesProps {
|
||||
scenario: UnitCommitmentScenario;
|
||||
onBusCreated: () => void;
|
||||
onBusDataChanged: (
|
||||
bus: string,
|
||||
field: string,
|
||||
newValue: string,
|
||||
) => ValidationError | null;
|
||||
onBusDeleted: (bus: string) => ValidationError | null;
|
||||
onBusRenamed: (oldName: string, newName: string) => ValidationError | null;
|
||||
onDataChanged: (scenario: UnitCommitmentScenario) => void;
|
||||
}
|
||||
|
||||
function BusesComponent(props: BusesProps) {
|
||||
const fileUploadElem = useRef<FileUploadElement>(null);
|
||||
|
||||
const onDownload = () => {
|
||||
const [data, columns] = generateBusesData(props.scenario);
|
||||
const csvContents = generateCsv(data, columns);
|
||||
offerDownload(csvContents, "text/csv", "buses.csv");
|
||||
};
|
||||
|
||||
const onUpload = () => {
|
||||
fileUploadElem.current!.showFilePicker((csvContents: any) => {
|
||||
const newScenario = parseBusesCsv(props.scenario, csvContents);
|
||||
props.onDataChanged(newScenario);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SectionHeader title="Buses">
|
||||
<SectionButton
|
||||
icon={faPlus}
|
||||
tooltip="Add"
|
||||
onClick={props.onBusCreated}
|
||||
/>
|
||||
<SectionButton
|
||||
icon={faDownload}
|
||||
tooltip="Download"
|
||||
onClick={onDownload}
|
||||
/>
|
||||
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
|
||||
</SectionHeader>
|
||||
<DataTable
|
||||
onRowDeleted={props.onBusDeleted}
|
||||
onRowRenamed={props.onBusRenamed}
|
||||
onDataChanged={props.onBusDataChanged}
|
||||
generateData={() => generateBusesData(props.scenario)}
|
||||
/>
|
||||
<FileUploadElement ref={fileUploadElem} accept=".csv" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BusesComponent;
|
||||
64
web/src/components/CaseBuilder/Buses/BusesCsv.ts
Normal file
64
web/src/components/CaseBuilder/Buses/BusesCsv.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
|
||||
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
|
||||
* Released under the modified BSD license. See COPYING.md for more details.
|
||||
*/
|
||||
|
||||
import { Buses, UnitCommitmentScenario } from "../../../core/fixtures";
|
||||
import Papa from "papaparse";
|
||||
import { generateBusesColumns } from "./Buses";
|
||||
|
||||
export const parseBusesCsv = (
|
||||
scenario: UnitCommitmentScenario,
|
||||
csvData: string,
|
||||
): UnitCommitmentScenario => {
|
||||
const results = Papa.parse(csvData, {
|
||||
header: true,
|
||||
skipEmptyLines: true,
|
||||
transformHeader: (header) => header.trim(),
|
||||
transform: (value) => value.trim(),
|
||||
});
|
||||
|
||||
// Check for parsing errors
|
||||
if (results.errors.length > 0) {
|
||||
throw Error(`Invalid CSV: Parsing error: ${results.errors}`);
|
||||
}
|
||||
|
||||
// Check CSV headers
|
||||
const expectedFields = generateBusesColumns(scenario).map(
|
||||
(col) => col.field,
|
||||
)!;
|
||||
const actualFields = results.meta.fields!;
|
||||
for (let i = 0; i < expectedFields.length; i++) {
|
||||
if (expectedFields[i] !== actualFields[i]) {
|
||||
throw Error(`Invalid CSV: Header mismatch at column ${i + 1}"`);
|
||||
}
|
||||
}
|
||||
|
||||
// Parse each row
|
||||
const T = getNumTimesteps(scenario);
|
||||
const buses: Buses = {};
|
||||
for (let i = 0; i < results.data.length; i++) {
|
||||
const row = results.data[i] as { [key: string]: any };
|
||||
const busName = row["Name"] as string;
|
||||
const busLoad: number[] = Array(T);
|
||||
for (let j = 0; j < T; j++) {
|
||||
busLoad[j] = parseFloat(row[`Load ${j}`]);
|
||||
}
|
||||
buses[busName] = {
|
||||
"Load (MW)": busLoad,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...scenario,
|
||||
Buses: buses,
|
||||
};
|
||||
};
|
||||
|
||||
function getNumTimesteps(scenario: UnitCommitmentScenario) {
|
||||
return (
|
||||
(scenario.Parameters["Time horizon (h)"] *
|
||||
scenario.Parameters["Time step (min)"]) /
|
||||
60
|
||||
);
|
||||
}
|
||||
@@ -1,75 +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 SectionHeader from "../Common/SectionHeader/SectionHeader";
|
||||
import { UnitCommitmentScenario } from "../../core/fixtures";
|
||||
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";
|
||||
import { ValidationError } from "../../core/Validation/validate";
|
||||
|
||||
interface BusesProps {
|
||||
scenario: UnitCommitmentScenario;
|
||||
onBusCreated: () => void;
|
||||
onBusDataChanged: (
|
||||
bus: string,
|
||||
field: string,
|
||||
newValue: string,
|
||||
) => ValidationError | null;
|
||||
onBusDeleted: (bus: string) => void;
|
||||
onBusRenamed: (oldName: string, newName: string) => ValidationError | null;
|
||||
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;
|
||||
@@ -1,55 +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 assert from "node:assert";
|
||||
import { generateBusesCsv, parseBusesCsv } from "./BusesTable";
|
||||
import { BUS_TEST_DATA_1 } from "../../core/Operations/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);
|
||||
});
|
||||
@@ -1,243 +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 Papa from "papaparse";
|
||||
import { Buses, UnitCommitmentScenario } from "../../core/fixtures";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
CellComponent,
|
||||
ColumnDefinition,
|
||||
TabulatorFull as Tabulator,
|
||||
} from "tabulator-tables";
|
||||
import { ValidationError } from "../../core/Validation/validate";
|
||||
|
||||
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",
|
||||
minWidth: 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}`,
|
||||
minWidth: 100,
|
||||
formatter: (cell) => {
|
||||
return parseFloat(cell.getValue()).toFixed(2);
|
||||
},
|
||||
});
|
||||
}
|
||||
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,
|
||||
) => ValidationError | null;
|
||||
onBusDeleted: (bus: string) => void;
|
||||
onBusRenamed: (oldName: string, newName: string) => ValidationError | null;
|
||||
}
|
||||
|
||||
function computeBusesTableHeight(scenario: UnitCommitmentScenario): string {
|
||||
const numBuses = Object.keys(scenario.Buses).length;
|
||||
const height = 70 + Math.min(numBuses, 15) * 28;
|
||||
return `${height}px`;
|
||||
}
|
||||
|
||||
function BusesTable(props: BusesTableProps) {
|
||||
const tableContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableRef = useRef<Tabulator | null>(null);
|
||||
const [isTableBuilt, setTableBuilt] = useState<Boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onCellEdited = (cell: CellComponent) => {
|
||||
let newValue = cell.getValue();
|
||||
let oldValue = cell.getOldValue();
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (newValue == oldValue) return;
|
||||
if (cell.getField() === "Name") {
|
||||
if (newValue === "") {
|
||||
props.onBusDeleted(oldValue);
|
||||
cell.getRow().delete();
|
||||
} else {
|
||||
const err = props.onBusRenamed(oldValue, newValue);
|
||||
if (err) {
|
||||
cell.restoreOldValue();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const row = cell.getRow().getData();
|
||||
const bus = row["Name"];
|
||||
const err = props.onBusDataChanged(bus, cell.getField(), newValue);
|
||||
if (err) {
|
||||
cell.restoreOldValue();
|
||||
}
|
||||
}
|
||||
};
|
||||
if (tableContainerRef.current === null) return;
|
||||
if (tableRef.current === null) {
|
||||
tableRef.current = new Tabulator(tableContainerRef.current, {
|
||||
layout: "fitColumns",
|
||||
data: generateBusesTableData(props.scenario),
|
||||
columns: generateBusesTableColumns(props.scenario),
|
||||
height: computeBusesTableHeight(props.scenario),
|
||||
});
|
||||
tableRef.current.on("tableBuilt", () => {
|
||||
setTableBuilt(true);
|
||||
});
|
||||
}
|
||||
if (isTableBuilt) {
|
||||
const newHeight = computeBusesTableHeight(props.scenario);
|
||||
const newColumns = generateBusesTableColumns(props.scenario);
|
||||
const newData = generateBusesTableData(props.scenario);
|
||||
const oldRows = tableRef.current.getRows();
|
||||
|
||||
// Update data
|
||||
tableRef.current.replaceData(newData).then(() => {});
|
||||
|
||||
// Update columns
|
||||
if (newColumns.length !== tableRef.current.getColumns().length) {
|
||||
tableRef.current.setColumns(newColumns);
|
||||
}
|
||||
|
||||
// Update height
|
||||
if (tableRef.current.options.height !== newHeight) {
|
||||
tableRef.current.setHeight(newHeight);
|
||||
}
|
||||
|
||||
// Scroll to bottom
|
||||
if (tableRef.current.getRows().length === oldRows.length + 1) {
|
||||
setTimeout(() => {
|
||||
const rows = tableRef.current!.getRows()!;
|
||||
const lastRow = rows[rows.length - 1]!;
|
||||
lastRow.scrollTo().then((r) => {});
|
||||
lastRow.getCell("Name").edit();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// Update callbacks
|
||||
tableRef.current.off("cellEdited");
|
||||
tableRef.current.on("cellEdited", (cell) => {
|
||||
onCellEdited(cell);
|
||||
});
|
||||
}
|
||||
}, [props, isTableBuilt]);
|
||||
|
||||
return <div className="tableContainer" ref={tableContainerRef} />;
|
||||
}
|
||||
|
||||
export default BusesTable;
|
||||
@@ -5,8 +5,8 @@
|
||||
*/
|
||||
|
||||
import Header from "./Header";
|
||||
import Parameters from "./Parameters";
|
||||
import BusesComponent from "./BusesComponent";
|
||||
import Parameters from "./Parameters/Parameters";
|
||||
import Buses from "./Buses/Buses";
|
||||
import {
|
||||
BLANK_SCENARIO,
|
||||
TEST_SCENARIO,
|
||||
@@ -32,11 +32,13 @@ import {
|
||||
} from "../../core/Operations/parameterOperations";
|
||||
import { preprocess } from "../../core/Operations/preprocessing";
|
||||
import Toast from "../Common/Forms/Toast";
|
||||
import ProfiledUnitsComponent from "./ProfiledUnits/ProfiledUnits";
|
||||
|
||||
const CaseBuilder = () => {
|
||||
const [scenario, setScenario] = useState(() => {
|
||||
const savedScenario = localStorage.getItem("scenario");
|
||||
return savedScenario ? JSON.parse(savedScenario) : TEST_SCENARIO;
|
||||
// const savedScenario = localStorage.getItem("scenario");
|
||||
// return savedScenario ? JSON.parse(savedScenario) : TEST_SCENARIO;
|
||||
return TEST_SCENARIO;
|
||||
});
|
||||
const [toastMessage, setToastMessage] = useState<string>("");
|
||||
|
||||
@@ -76,9 +78,10 @@ const CaseBuilder = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const onBusDeleted = (bus: string) => {
|
||||
const onBusDeleted = (bus: string): ValidationError | null => {
|
||||
const newScenario = deleteBus(bus, scenario);
|
||||
setAndSaveScenario(newScenario);
|
||||
return null;
|
||||
};
|
||||
|
||||
const onBusRenamed = (
|
||||
@@ -98,6 +101,8 @@ const CaseBuilder = () => {
|
||||
setAndSaveScenario(newScenario);
|
||||
};
|
||||
|
||||
const onProfiledUnitCreated = () => {};
|
||||
|
||||
const onLoad = (scenario: UnitCommitmentScenario) => {
|
||||
const preprocessed = preprocess(
|
||||
scenario,
|
||||
@@ -139,7 +144,7 @@ const CaseBuilder = () => {
|
||||
onParameterChanged={onParameterChanged}
|
||||
scenario={scenario}
|
||||
/>
|
||||
<BusesComponent
|
||||
<Buses
|
||||
scenario={scenario}
|
||||
onBusCreated={onBusCreated}
|
||||
onBusDataChanged={onBusDataChanged}
|
||||
@@ -147,6 +152,10 @@ const CaseBuilder = () => {
|
||||
onBusDeleted={onBusDeleted}
|
||||
onDataChanged={onDataChanged}
|
||||
/>
|
||||
<ProfiledUnitsComponent
|
||||
scenario={scenario}
|
||||
onProfiledUnitCreated={onProfiledUnitCreated}
|
||||
/>
|
||||
<Toast message={toastMessage} />
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
* Released under the modified BSD license. See COPYING.md for more details.
|
||||
*/
|
||||
|
||||
import SectionHeader from "../Common/SectionHeader/SectionHeader";
|
||||
import Form from "../Common/Forms/Form";
|
||||
import TextInputRow from "../Common/Forms/TextInputRow";
|
||||
import { UnitCommitmentScenario } from "../../core/fixtures";
|
||||
import { ValidationError } from "../../core/Validation/validate";
|
||||
import SectionHeader from "../../Common/SectionHeader/SectionHeader";
|
||||
import Form from "../../Common/Forms/Form";
|
||||
import TextInputRow from "../../Common/Forms/TextInputRow";
|
||||
import { UnitCommitmentScenario } from "../../../core/fixtures";
|
||||
import { ValidationError } from "../../../core/Validation/validate";
|
||||
|
||||
interface ParametersProps {
|
||||
scenario: UnitCommitmentScenario;
|
||||
102
web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
Normal file
102
web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
|
||||
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
|
||||
* Released under the modified BSD license. See COPYING.md for more details.
|
||||
*/
|
||||
|
||||
import SectionHeader from "../../Common/SectionHeader/SectionHeader";
|
||||
import SectionButton from "../../Common/Buttons/SectionButton";
|
||||
import {
|
||||
faDownload,
|
||||
faPlus,
|
||||
faUpload,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import DataTable, {
|
||||
ColumnSpec,
|
||||
generateCsv,
|
||||
generateTableColumns,
|
||||
generateTableData,
|
||||
} from "../../Common/Forms/DataTable";
|
||||
import { UnitCommitmentScenario } from "../../../core/fixtures";
|
||||
import { ColumnDefinition } from "tabulator-tables";
|
||||
import { offerDownload } from "../../Common/io";
|
||||
|
||||
interface ProfiledUnitsProps {
|
||||
scenario: UnitCommitmentScenario;
|
||||
onProfiledUnitCreated: () => void;
|
||||
}
|
||||
|
||||
const generateProfiledUnitsData = (
|
||||
scenario: UnitCommitmentScenario,
|
||||
): [any[], ColumnDefinition[]] => {
|
||||
const colSpecs: ColumnSpec[] = [
|
||||
{
|
||||
title: "Name",
|
||||
type: "string",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Bus",
|
||||
type: "string",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Cost ($/MW)",
|
||||
type: "number",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "Maximum power (MW)",
|
||||
type: "number[]",
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: "Minimum power (MW)",
|
||||
type: "number[]",
|
||||
width: 60,
|
||||
},
|
||||
];
|
||||
const columns = generateTableColumns(scenario, colSpecs);
|
||||
const data = generateTableData(scenario.Generators, colSpecs, scenario);
|
||||
return [data, columns];
|
||||
};
|
||||
|
||||
const ProfiledUnitsComponent = (props: ProfiledUnitsProps) => {
|
||||
const onDownload = () => {
|
||||
const [data, columns] = generateProfiledUnitsData(props.scenario);
|
||||
const csvContents = generateCsv(data, columns);
|
||||
offerDownload(csvContents, "text/csv", "profiled_units.csv");
|
||||
};
|
||||
const onUpload = () => {};
|
||||
return (
|
||||
<div>
|
||||
<SectionHeader title="Profiled Units">
|
||||
<SectionButton
|
||||
icon={faPlus}
|
||||
tooltip="Add"
|
||||
onClick={props.onProfiledUnitCreated}
|
||||
/>
|
||||
<SectionButton
|
||||
icon={faDownload}
|
||||
tooltip="Download"
|
||||
onClick={onDownload}
|
||||
/>
|
||||
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
|
||||
</SectionHeader>
|
||||
<DataTable
|
||||
onRowDeleted={() => {
|
||||
return null;
|
||||
}}
|
||||
onRowRenamed={() => {
|
||||
return null;
|
||||
}}
|
||||
onDataChanged={() => {
|
||||
return null;
|
||||
}}
|
||||
generateData={() => generateProfiledUnitsData(props.scenario)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfiledUnitsComponent;
|
||||
Reference in New Issue
Block a user