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