web: Start implementation of ThermalUnitsComponent

web/src/components/CaseBuilder/Buses.tsx

@@ -31,16 +31,17 @@ import {
   deleteBus,
   renameBus,
 } from "../../core/Operations/busOps";
+import { CaseBuilderSectionProps } from "./CaseBuilder";
 
 export const BusesColumnSpec: ColumnSpec[] = [
   {
     title: "Name",
     type: "string",
-    width: 150,
+    width: 100,
   },
   {
     title: "Load (MW)",
-    type: "number[]",
+    type: "number[T]",
     width: 60,
   },
 ];
@@ -52,13 +53,8 @@ export const generateBusesData = (
   const data = generateTableData(scenario.Buses, BusesColumnSpec, scenario);
   return [data, columns];
 };
-interface BusesProps {
-  scenario: UnitCommitmentScenario;
-  onDataChanged: (scenario: UnitCommitmentScenario) => void;
-  onError: (msg: string) => void;
-}
 
-function BusesComponent(props: BusesProps) {
+function BusesComponent(props: CaseBuilderSectionProps) {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
   const onDownload = () => {

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -6,7 +6,7 @@
 
 import Header from "./Header";
 import Parameters from "./Parameters";
-import Buses from "./Buses";
+import BusesComponent from "./Buses";
 import {
   BLANK_SCENARIO,
   TEST_SCENARIO,
@@ -22,6 +22,13 @@ import { offerDownload } from "../Common/io";
 import { preprocess } from "../../core/Operations/preprocessing";
 import Toast from "../Common/Forms/Toast";
 import ProfiledUnitsComponent from "./ProfiledUnits";
+import ThermalUnitsComponent from "./ThermalUnits";
+
+export interface CaseBuilderSectionProps {
+  scenario: UnitCommitmentScenario;
+  onDataChanged: (scenario: UnitCommitmentScenario) => void;
+  onError: (msg: string) => void;
+}
 
 const CaseBuilder = () => {
   const [scenario, setScenario] = useState(() => {
@@ -99,7 +106,12 @@ const CaseBuilder = () => {
           onDataChanged={onDataChanged}
           onError={setToastMessage}
         />
-        <Buses
+        <BusesComponent
+          scenario={scenario}
+          onDataChanged={onDataChanged}
+          onError={setToastMessage}
+        />
+        <ThermalUnitsComponent
           scenario={scenario}
           onDataChanged={onDataChanged}
           onError={setToastMessage}

web/src/components/CaseBuilder/ProfiledUnits.tsx

@@ -18,7 +18,10 @@ import DataTable, {
   generateTableData,
   parseCsv,
 } from "../Common/Forms/DataTable";
-import { UnitCommitmentScenario } from "../../core/fixtures";
+import {
+  getProfiledGenerators,
+  UnitCommitmentScenario,
+} from "../../core/fixtures";
 import { ColumnDefinition } from "tabulator-tables";
 import { offerDownload } from "../Common/io";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
@@ -30,23 +33,18 @@ import {
   renameGenerator,
 } from "../../core/Operations/generatorOps";
 import { ValidationError } from "../../core/Validation/validate";
-
-interface ProfiledUnitsProps {
-  scenario: UnitCommitmentScenario;
-  onDataChanged: (scenario: UnitCommitmentScenario) => void;
-  onError: (msg: string) => void;
-}
+import { CaseBuilderSectionProps } from "./CaseBuilder";
 
 export const ProfiledUnitsColumnSpec: ColumnSpec[] = [
   {
     title: "Name",
     type: "string",
-    width: 150,
+    width: 100,
   },
   {
     title: "Bus",
     type: "busRef",
-    width: 150,
+    width: 100,
   },
   {
     title: "Cost ($/MW)",
@@ -55,12 +53,12 @@ export const ProfiledUnitsColumnSpec: ColumnSpec[] = [
   },
   {
     title: "Maximum power (MW)",
-    type: "number[]",
+    type: "number[T]",
     width: 60,
   },
   {
     title: "Minimum power (MW)",
-    type: "number[]",
+    type: "number[T]",
     width: 60,
   },
 ];
@@ -70,14 +68,14 @@ const generateProfiledUnitsData = (
 ): [any[], ColumnDefinition[]] => {
   const columns = generateTableColumns(scenario, ProfiledUnitsColumnSpec);
   const data = generateTableData(
-    scenario.Generators,
+    getProfiledGenerators(scenario),
     ProfiledUnitsColumnSpec,
     scenario,
   );
   return [data, columns];
 };
 
-const ProfiledUnitsComponent = (props: ProfiledUnitsProps) => {
+const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
   const onDownload = () => {

web/src/components/CaseBuilder/ThermalUnits.tsx

@@ -0,0 +1,228 @@
+/*
+ * 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 DataTable, {
+  ColumnSpec,
+  generateTableColumns,
+  generateTableData,
+} from "../Common/Forms/DataTable";
+import { CaseBuilderSectionProps } from "./CaseBuilder";
+import { useRef } from "react";
+import FileUploadElement from "../Common/Buttons/FileUploadElement";
+import { ValidationError } from "../../core/Validation/validate";
+import SectionHeader from "../Common/SectionHeader/SectionHeader";
+import SectionButton from "../Common/Buttons/SectionButton";
+import {
+  faDownload,
+  faPlus,
+  faUpload,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  getThermalGenerators,
+  UnitCommitmentScenario,
+} from "../../core/fixtures";
+import { ColumnDefinition } from "tabulator-tables";
+
+export const ThermalUnitsColumnSpec: ColumnSpec[] = [
+  {
+    title: "Name",
+    type: "string",
+    width: 100,
+  },
+  {
+    title: "Bus",
+    type: "busRef",
+    width: 100,
+  },
+  {
+    title: "Production cost curve (MW)",
+    type: "number[N]",
+    length: 10,
+    width: 60,
+  },
+  {
+    title: "Production cost curve ($)",
+    type: "number[N]",
+    length: 10,
+    width: 60,
+  },
+  {
+    title: "Startup costs ($)",
+    type: "number[N]",
+    length: 5,
+    width: 60,
+  },
+  {
+    title: "Startup delays (h)",
+    type: "number[N]",
+    length: 5,
+    width: 60,
+  },
+  {
+    title: "Min uptime (h)",
+    type: "number",
+    width: 80,
+  },
+  {
+    title: "Min downtime (h)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Ramp up limit (MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Ramp down limit (MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Startup limit (MW)",
+    type: "number",
+    width: 80,
+  },
+  {
+    title: "Shutdown limit (MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Initial status (h)",
+    type: "number",
+    width: 80,
+  },
+  {
+    title: "Initial power (MW)",
+    type: "number",
+    width: 100,
+  },
+  {
+    title: "Must run?",
+    type: "boolean",
+    width: 80,
+  },
+];
+
+const generateThermalUnitsData = (
+  scenario: UnitCommitmentScenario,
+): [any[], ColumnDefinition[]] => {
+  const columns = generateTableColumns(scenario, ThermalUnitsColumnSpec);
+  const data = generateTableData(
+    getThermalGenerators(scenario),
+    ThermalUnitsColumnSpec,
+    scenario,
+  );
+  return [data, columns];
+};
+
+const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
+  const fileUploadElem = useRef<FileUploadElement>(null);
+
+  const onDownload = () => {
+    // const [data, columns] = generateThermalUnitsData(props.scenario);
+    // const csvContents = generateCsv(data, columns);
+    // offerDownload(csvContents, "text/csv", "profiled_units.csv");
+  };
+
+  const onUpload = () => {
+    // fileUploadElem.current!.showFilePicker((csvContents: any) => {
+    //   const [newGenerators, err] = parseCsv(
+    //     csvContents,
+    //     ThermalUnitsColumnSpec,
+    //     props.scenario,
+    //   );
+    //   if (err) {
+    //     props.onError(err.message);
+    //     return;
+    //   }
+    //   for (const gen in newGenerators) {
+    //     newGenerators[gen]["Type"] = "Thermal";
+    //   }
+    //
+    //   const newScenario = {
+    //     ...props.scenario,
+    //     Generators: newGenerators,
+    //   };
+    //   props.onDataChanged(newScenario);
+    // });
+  };
+
+  const onAdd = () => {
+    // const [newScenario, err] = createThermalUnit(props.scenario);
+    // if (err) {
+    //   props.onError(err.message);
+    //   return;
+    // }
+    // props.onDataChanged(newScenario);
+  };
+
+  const onDelete = (name: string): ValidationError | null => {
+    // const newScenario = deleteGenerator(name, props.scenario);
+    // props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onDataChanged = (
+    name: string,
+    field: string,
+    newValue: string,
+  ): ValidationError | null => {
+    //   const [newScenario, err] = changeThermalUnitData(
+    //     name,
+    //     field,
+    //     newValue,
+    //     props.scenario,
+    //   );
+    //   if (err) {
+    //     props.onError(err.message);
+    //     return err;
+    //   }
+    //   props.onDataChanged(newScenario);
+    return null;
+  };
+
+  const onRename = (
+    oldName: string,
+    newName: string,
+  ): ValidationError | null => {
+    // const [newScenario, err] = renameGenerator(
+    //   oldName,
+    //   newName,
+    //   props.scenario,
+    // );
+    // if (err) {
+    //   props.onError(err.message);
+    //   return err;
+    // }
+    // props.onDataChanged(newScenario);
+    return null;
+  };
+
+  return (
+    <div>
+      <SectionHeader title="Thermal Units">
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton
+          icon={faDownload}
+          tooltip="Download"
+          onClick={onDownload}
+        />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+      </SectionHeader>
+      <DataTable
+        onRowDeleted={onDelete}
+        onRowRenamed={onRename}
+        onDataChanged={onDataChanged}
+        generateData={() => generateThermalUnitsData(props.scenario)}
+      />
+      <FileUploadElement ref={fileUploadElem} accept=".csv" />
+    </div>
+  );
+};
+
+export default ThermalUnitsComponent;