parent
ee7a948a78
commit
80d8bb838c
@ -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;
|
||||||
@ -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,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;
|
|
||||||
@ -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;
|
||||||
@ -0,0 +1,308 @@
|
|||||||
|
/*
|
||||||
|
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
|
||||||
|
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
|
||||||
|
* Released under the modified BSD license. See COPYING.md for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import {
|
||||||
|
CellComponent,
|
||||||
|
ColumnDefinition,
|
||||||
|
TabulatorFull as Tabulator,
|
||||||
|
} from "tabulator-tables";
|
||||||
|
import { ValidationError } from "../../../core/Validation/validate";
|
||||||
|
import { UnitCommitmentScenario } from "../../../core/fixtures";
|
||||||
|
|
||||||
|
export interface ColumnSpec {
|
||||||
|
title: string;
|
||||||
|
type: "string" | "number" | "number[]";
|
||||||
|
width: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const generateTableColumns = (
|
||||||
|
scenario: UnitCommitmentScenario,
|
||||||
|
colSpecs: ColumnSpec[],
|
||||||
|
) => {
|
||||||
|
const timeSlots = generateTimeslots(scenario);
|
||||||
|
const columns: ColumnDefinition[] = [];
|
||||||
|
colSpecs.forEach((spec) => {
|
||||||
|
switch (spec.type) {
|
||||||
|
case "string":
|
||||||
|
columns.push({
|
||||||
|
...columnsCommonAttrs,
|
||||||
|
title: spec.title,
|
||||||
|
field: spec.title,
|
||||||
|
minWidth: spec.width,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "number":
|
||||||
|
columns.push({
|
||||||
|
...columnsCommonAttrs,
|
||||||
|
title: spec.title,
|
||||||
|
field: spec.title,
|
||||||
|
minWidth: spec.width,
|
||||||
|
formatter: floatFormatter,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "number[]":
|
||||||
|
const subColumns: ColumnDefinition[] = [];
|
||||||
|
timeSlots.forEach((t) => {
|
||||||
|
subColumns.push({
|
||||||
|
...columnsCommonAttrs,
|
||||||
|
title: `${t}`,
|
||||||
|
field: `${spec.title} ${t}`,
|
||||||
|
minWidth: spec.width,
|
||||||
|
formatter: floatFormatter,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
columns.push({
|
||||||
|
title: spec.title,
|
||||||
|
columns: subColumns,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error(`Unknown type: ${spec.type}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return columns;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateTableData = (
|
||||||
|
container: any,
|
||||||
|
colSpecs: ColumnSpec[],
|
||||||
|
scenario: UnitCommitmentScenario,
|
||||||
|
): any[] => {
|
||||||
|
const data: any[] = [];
|
||||||
|
const timeslots = generateTimeslots(scenario);
|
||||||
|
for (const [entryName, entryData] of Object.entries(container) as [
|
||||||
|
string,
|
||||||
|
any,
|
||||||
|
]) {
|
||||||
|
const entry: any = {};
|
||||||
|
for (const spec of colSpecs) {
|
||||||
|
if (spec.title === "Name") {
|
||||||
|
entry["Name"] = entryName;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
switch (spec.type) {
|
||||||
|
case "string":
|
||||||
|
case "number":
|
||||||
|
entry[spec.title] = entryData[spec.title];
|
||||||
|
break;
|
||||||
|
case "number[]":
|
||||||
|
for (let i = 0; i < timeslots.length; i++) {
|
||||||
|
entry[`${spec.title} ${timeslots[i]}`] = entryData[spec.title][i];
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error(`Unknown type: ${spec.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
data.push(entry);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateCsv = (data: any[], columns: ColumnDefinition[]) => {
|
||||||
|
const header: string[] = [];
|
||||||
|
const body: string[][] = data.map(() => []);
|
||||||
|
columns.forEach((column) => {
|
||||||
|
if (column.columns) {
|
||||||
|
column.columns.forEach((subcolumn) => {
|
||||||
|
header.push(subcolumn.field!);
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
body[i]!.push(data[i]![subcolumn["field"]!]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
header.push(column.field!);
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
body[i]!.push(data[i]![column["field"]!]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const csvHeader = header.join(",");
|
||||||
|
const csvBody = body.map((row) => row.join(",")).join("\n");
|
||||||
|
return `${csvHeader}\n${csvBody}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const floatFormatter = (cell: CellComponent) => {
|
||||||
|
return parseFloat(cell.getValue()).toFixed(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addNameColumn = (columns: ColumnDefinition[]) => {
|
||||||
|
columns.push({
|
||||||
|
...columnsCommonAttrs,
|
||||||
|
title: "Name",
|
||||||
|
field: "Name",
|
||||||
|
minWidth: 150,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateTimeslots = (scenario: UnitCommitmentScenario) => {
|
||||||
|
const timeHorizonHours = scenario["Parameters"]["Time horizon (h)"];
|
||||||
|
const timeStepMin = scenario["Parameters"]["Time step (min)"];
|
||||||
|
const timeslots: string[] = [];
|
||||||
|
for (
|
||||||
|
let m = 0, offset = 0;
|
||||||
|
m < timeHorizonHours * 60;
|
||||||
|
m += timeStepMin, offset += 1
|
||||||
|
) {
|
||||||
|
const hours = Math.floor(m / 60);
|
||||||
|
const mins = m % 60;
|
||||||
|
const formattedTime = `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
|
||||||
|
timeslots.push(formattedTime);
|
||||||
|
}
|
||||||
|
return timeslots;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addTimeseriesColumn = (
|
||||||
|
scenario: UnitCommitmentScenario,
|
||||||
|
title: string,
|
||||||
|
columns: ColumnDefinition[],
|
||||||
|
minWidth: number = 65,
|
||||||
|
) => {
|
||||||
|
const timeSlots = generateTimeslots(scenario);
|
||||||
|
const subColumns: ColumnDefinition[] = [];
|
||||||
|
timeSlots.forEach((t) => {
|
||||||
|
subColumns.push({
|
||||||
|
...columnsCommonAttrs,
|
||||||
|
title: `${t}`,
|
||||||
|
field: `${title} ${t}`,
|
||||||
|
minWidth: minWidth,
|
||||||
|
formatter: floatFormatter,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
columns.push({
|
||||||
|
title: title,
|
||||||
|
columns: subColumns,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const columnsCommonAttrs: ColumnDefinition = {
|
||||||
|
headerHozAlign: "left",
|
||||||
|
hozAlign: "left",
|
||||||
|
title: "",
|
||||||
|
editor: "input",
|
||||||
|
editorParams: {
|
||||||
|
selectContents: true,
|
||||||
|
},
|
||||||
|
headerWordWrap: true,
|
||||||
|
formatter: "plaintext",
|
||||||
|
headerSort: false,
|
||||||
|
resizable: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
interface DataTableProps {
|
||||||
|
onRowDeleted: (rowName: string) => ValidationError | null;
|
||||||
|
onRowRenamed: (
|
||||||
|
oldRowName: string,
|
||||||
|
newRowName: string,
|
||||||
|
) => ValidationError | null;
|
||||||
|
onDataChanged: (
|
||||||
|
rowName: string,
|
||||||
|
key: string,
|
||||||
|
newValue: string,
|
||||||
|
) => ValidationError | null;
|
||||||
|
generateData: () => [any[], ColumnDefinition[]];
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeTableHeight(data: any[]): string {
|
||||||
|
const numRows = data.length;
|
||||||
|
const height = 70 + Math.min(numRows, 15) * 28;
|
||||||
|
return `${height}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DataTable = (props: DataTableProps) => {
|
||||||
|
const tableContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const tableRef = useRef<Tabulator | null>(null);
|
||||||
|
const [isTableBuilt, setTableBuilt] = useState<Boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onCellEdited = (cell: CellComponent) => {
|
||||||
|
let newValue = cell.getValue();
|
||||||
|
let oldValue = cell.getOldValue();
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
if (newValue == oldValue) return;
|
||||||
|
if (cell.getField() === "Name") {
|
||||||
|
if (newValue === "") {
|
||||||
|
const err = props.onRowDeleted(oldValue);
|
||||||
|
if (err) {
|
||||||
|
cell.restoreOldValue();
|
||||||
|
} else {
|
||||||
|
cell
|
||||||
|
.getRow()
|
||||||
|
.delete()
|
||||||
|
.then((r) => {});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = props.onRowRenamed(oldValue, newValue);
|
||||||
|
if (err) {
|
||||||
|
cell.restoreOldValue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const row = cell.getRow().getData();
|
||||||
|
const bus = row["Name"];
|
||||||
|
const err = props.onDataChanged(bus, cell.getField(), newValue);
|
||||||
|
if (err) {
|
||||||
|
cell.restoreOldValue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (tableContainerRef.current === null) return;
|
||||||
|
const [data, columns] = props.generateData();
|
||||||
|
const height = computeTableHeight(data);
|
||||||
|
|
||||||
|
if (tableRef.current === null) {
|
||||||
|
tableRef.current = new Tabulator(tableContainerRef.current, {
|
||||||
|
layout: "fitColumns",
|
||||||
|
data: data,
|
||||||
|
columns: columns,
|
||||||
|
height: height,
|
||||||
|
});
|
||||||
|
tableRef.current.on("tableBuilt", () => {
|
||||||
|
setTableBuilt(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (isTableBuilt) {
|
||||||
|
const newHeight = height;
|
||||||
|
const newColumns = columns;
|
||||||
|
const newData = data;
|
||||||
|
const oldRows = tableRef.current.getRows();
|
||||||
|
|
||||||
|
// Update data
|
||||||
|
tableRef.current.replaceData(newData).then(() => {});
|
||||||
|
|
||||||
|
// Update columns
|
||||||
|
if (newColumns.length !== tableRef.current.getColumns().length) {
|
||||||
|
tableRef.current.setColumns(newColumns);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update height
|
||||||
|
if (tableRef.current.options.height !== newHeight) {
|
||||||
|
tableRef.current.setHeight(newHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll to bottom
|
||||||
|
if (tableRef.current.getRows().length === oldRows.length + 1) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const rows = tableRef.current!.getRows()!;
|
||||||
|
const lastRow = rows[rows.length - 1]!;
|
||||||
|
lastRow.scrollTo().then((r) => {});
|
||||||
|
lastRow.getCell("Name").edit();
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update callbacks
|
||||||
|
tableRef.current.off("cellEdited");
|
||||||
|
tableRef.current.on("cellEdited", (cell) => {
|
||||||
|
onCellEdited(cell);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [props, isTableBuilt]);
|
||||||
|
|
||||||
|
return <div className="tableContainer" ref={tableContainerRef} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataTable;
|
||||||
Loading…
Reference in new issue