web: profiled units: Allow CSV upload

web/src/components/CaseBuilder/Buses/Buses.tsx

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

web/src/components/CaseBuilder/Buses/BusesCsv.ts

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

web/src/components/CaseBuilder/CaseBuilder.tsx

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

web/src/components/CaseBuilder/Parameters/Parameters.tsx

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

web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx

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