From 80d8bb838c46be51b4c79b7df1e3198674885094 Mon Sep 17 00:00:00 2001
From: "Alinson S. Xavier" <git@axavier.org>
Date: Thu, 29 May 2025 12:33:06 -0500
Subject: [PATCH] web: Profiled units

---
 web/public/index.html                         |   2 +-
 .../components/CaseBuilder/Buses/Buses.tsx    | 115 +++++++
 .../components/CaseBuilder/Buses/BusesCsv.ts  |  64 ++++
 .../components/CaseBuilder/BusesComponent.tsx |  75 -----
 web/src/components/CaseBuilder/BusesTable.tsx | 243 --------------
 .../components/CaseBuilder/CaseBuilder.tsx    |  21 +-
 .../{ => Parameters}/Parameters.tsx           |  10 +-
 .../ProfiledUnits/ProfiledUnits.tsx           | 102 ++++++
 .../Forms/DataTable.test.ts}                  |  37 ++-
 web/src/components/Common/Forms/DataTable.tsx | 308 ++++++++++++++++++
 web/src/components/Common/Forms/Tables.css    |  11 +-
 web/src/core/fixtures.tsx                     |  43 ++-
 12 files changed, 680 insertions(+), 351 deletions(-)
 create mode 100644 web/src/components/CaseBuilder/Buses/Buses.tsx
 create mode 100644 web/src/components/CaseBuilder/Buses/BusesCsv.ts
 delete mode 100644 web/src/components/CaseBuilder/BusesComponent.tsx
 delete mode 100644 web/src/components/CaseBuilder/BusesTable.tsx
 rename web/src/components/CaseBuilder/{ => Parameters}/Parameters.tsx (84%)
 create mode 100644 web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
 rename web/src/components/{CaseBuilder/BusesTable.test.ts => Common/Forms/DataTable.test.ts} (56%)
 create mode 100644 web/src/components/Common/Forms/DataTable.tsx

diff --git a/web/public/index.html b/web/public/index.html
index 30c50bc..ce077e2 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -11,7 +11,7 @@
     <title>Case Builder - UnitCommitment.jl</title>
     <style>
       :root {
-        --site-max-width: 1200px;
+        --site-max-width: 1500px;
         --site-min-width: 900px;
         --box-border: 1px solid rgba(0, 0, 0, 0.2);
         --box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.2);
diff --git a/web/src/components/CaseBuilder/Buses/Buses.tsx b/web/src/components/CaseBuilder/Buses/Buses.tsx
new file mode 100644
index 0000000..09f5d30
--- /dev/null
+++ b/web/src/components/CaseBuilder/Buses/Buses.tsx
@@ -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;
diff --git a/web/src/components/CaseBuilder/Buses/BusesCsv.ts b/web/src/components/CaseBuilder/Buses/BusesCsv.ts
new file mode 100644
index 0000000..a44b7dc
--- /dev/null
+++ b/web/src/components/CaseBuilder/Buses/BusesCsv.ts
@@ -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
+  );
+}
diff --git a/web/src/components/CaseBuilder/BusesComponent.tsx b/web/src/components/CaseBuilder/BusesComponent.tsx
deleted file mode 100644
index b4983d8..0000000
--- a/web/src/components/CaseBuilder/BusesComponent.tsx
+++ /dev/null
@@ -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;
diff --git a/web/src/components/CaseBuilder/BusesTable.tsx b/web/src/components/CaseBuilder/BusesTable.tsx
deleted file mode 100644
index f14f081..0000000
--- a/web/src/components/CaseBuilder/BusesTable.tsx
+++ /dev/null
@@ -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;
diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx
index 9539355..cfa7c3c 100644
--- a/web/src/components/CaseBuilder/CaseBuilder.tsx
+++ b/web/src/components/CaseBuilder/CaseBuilder.tsx
@@ -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 />
diff --git a/web/src/components/CaseBuilder/Parameters.tsx b/web/src/components/CaseBuilder/Parameters/Parameters.tsx
similarity index 84%
rename from web/src/components/CaseBuilder/Parameters.tsx
rename to web/src/components/CaseBuilder/Parameters/Parameters.tsx
index 11a2879..16b19ee 100644
--- a/web/src/components/CaseBuilder/Parameters.tsx
+++ b/web/src/components/CaseBuilder/Parameters/Parameters.tsx
@@ -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;
diff --git a/web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx b/web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
new file mode 100644
index 0000000..3dd3df3
--- /dev/null
+++ b/web/src/components/CaseBuilder/ProfiledUnits/ProfiledUnits.tsx
@@ -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;
diff --git a/web/src/components/CaseBuilder/BusesTable.test.ts b/web/src/components/Common/Forms/DataTable.test.ts
similarity index 56%
rename from web/src/components/CaseBuilder/BusesTable.test.ts
rename to web/src/components/Common/Forms/DataTable.test.ts
index b199df8..b3cdcb8 100644
--- a/web/src/components/CaseBuilder/BusesTable.test.ts
+++ b/web/src/components/Common/Forms/DataTable.test.ts
@@ -5,13 +5,16 @@
  */
 
 import assert from "node:assert";
-import { generateBusesCsv, parseBusesCsv } from "./BusesTable";
-import { BUS_TEST_DATA_1 } from "../../core/Operations/busOperations.test";
+import { BUS_TEST_DATA_1 } from "../../../core/Operations/busOperations.test";
+import { parseBusesCsv } from "../../CaseBuilder/Buses/BusesCsv";
+import { generateBusesData } from "../../CaseBuilder/Buses/Buses";
+import { generateCsv } from "./DataTable";
 
 test("generate CSV", () => {
-  const actualCsv = generateBusesCsv(BUS_TEST_DATA_1);
+  const [data, columns] = generateBusesData(BUS_TEST_DATA_1);
+  const actualCsv = generateCsv(data, columns);
   const expectedCsv =
-    "Name,Load 0,Load 1,Load 2,Load 3,Load 4\n" +
+    "Name,Load (MW) 00:00,Load (MW) 01:00,Load (MW) 02:00,Load (MW) 03:00,Load (MW) 04:00\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";
@@ -19,19 +22,19 @@ test("generate CSV", () => {
 });
 
 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],
-    },
-  });
+  // 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)", () => {
diff --git a/web/src/components/Common/Forms/DataTable.tsx b/web/src/components/Common/Forms/DataTable.tsx
new file mode 100644
index 0000000..56eb92f
--- /dev/null
+++ b/web/src/components/Common/Forms/DataTable.tsx
@@ -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;
diff --git a/web/src/components/Common/Forms/Tables.css b/web/src/components/Common/Forms/Tables.css
index c64bf29..002b2c8 100644
--- a/web/src/components/Common/Forms/Tables.css
+++ b/web/src/components/Common/Forms/Tables.css
@@ -35,8 +35,9 @@
 }
 
 .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding: 6px 8px;
-  height: 48px;
+  text-align: left;
+  padding: 0 8px;
+  line-height: 24px;
 }
 
 .tabulator .tabulator-header .tabulator-col:last-child {
@@ -71,6 +72,10 @@
 
 .tabulator-row .tabulator-cell.tabulator-editing input {
   font-family: monospace;
-  text-align: right;
+  text-align: left;
   font-size: 12px;
 }
+
+.tabulator-col-group-cols {
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/web/src/core/fixtures.tsx b/web/src/core/fixtures.tsx
index 4c27387..7e5513b 100644
--- a/web/src/core/fixtures.tsx
+++ b/web/src/core/fixtures.tsx
@@ -8,6 +8,18 @@ export interface Buses {
   [busName: string]: { "Load (MW)": number[] };
 }
 
+export interface Generators {
+  [name: string]: ProfiledUnit;
+}
+
+export interface ProfiledUnit {
+  Bus: string;
+  Type: "Profiled";
+  "Minimum power (MW)": number[];
+  "Maximum power (MW)": number[];
+  "Cost ($/MW)": number;
+}
+
 export interface UnitCommitmentScenario {
   Parameters: {
     Version: string;
@@ -16,6 +28,7 @@ export interface UnitCommitmentScenario {
     "Time step (min)": number;
   };
   Buses: Buses;
+  Generators?: Generators;
 }
 
 export const BLANK_SCENARIO: UnitCommitmentScenario = {
@@ -26,6 +39,7 @@ export const BLANK_SCENARIO: UnitCommitmentScenario = {
     "Time step (min)": 60,
   },
   Buses: {},
+  Generators: {},
 };
 
 export const TEST_SCENARIO: UnitCommitmentScenario = {
@@ -68,7 +82,7 @@ export const TEST_SCENARIO: UnitCommitmentScenario = {
     },
     b4: {
       "Load (MW)": [
-        27.3729, 26.29698, 25.58005, 25.15675, 25.4268, 25.95298, 27.42649,
+        27.5, 26.29698, 25.58005, 25.15675, 25.4268, 25.95298, 27.42649,
         28.50134, 29.12289, 29.81839, 29.55691, 29.69515, 28.75318, 28.50777,
         28.38453, 28.85284, 31.31547, 34.23676, 33.39874, 33.96028, 33.90562,
         32.33996, 30.64676, 28.61601, 27.23252, 26.21553, 25.0378, 25.36786,
@@ -77,4 +91,31 @@ export const TEST_SCENARIO: UnitCommitmentScenario = {
       ],
     },
   },
+  Generators: {
+    pu1: {
+      Bus: "b1",
+      Type: "Profiled",
+      "Minimum power (MW)": [
+        52.05076909, 14.57829614, 75.43577222, 67.33346472, 75.36556352,
+        21.57017795, 38.57431892, 46.71083643, 97.87434963, 95.12592361,
+        82.00040834, 25.97388027, 14.87169082, 8.68106053, 43.67452089,
+        18.95280541, 85.59390327, 59.62398136, 81.30530633, 83.61173632,
+        10.07929569, 87.96736565, 84.65719304, 30.57367207, 27.39181212,
+        78.27367461, 6.81518238, 68.40723311, 19.616812, 60.20940984,
+        58.57199889, 89.50587265, 65.26434981, 78.57656542, 52.20154156,
+        42.79584818,
+      ],
+      "Maximum power (MW)": [
+        260.25384545, 72.89148068, 377.17886108, 336.66732361, 376.82781758,
+        107.85088974, 192.8715946, 233.55418217, 489.37174815, 475.62961804,
+        410.00204171, 129.86940137, 74.35845412, 43.40530267, 218.37260447,
+        94.76402706, 427.96951634, 298.11990681, 406.52653167, 418.05868161,
+        50.39647843, 439.83682824, 423.28596522, 152.86836035, 136.95906058,
+        391.36837307, 34.0759119, 342.03616557, 98.08406001, 301.04704921,
+        292.85999447, 447.52936326, 326.32174903, 392.88282708, 261.0077078,
+        213.9792409,
+      ],
+      "Cost ($/MW)": 50.0,
+    },
+  },
 };