From 95ad6eca00b4fc3cf2458ac5ce76589c9aa8a86c Mon Sep 17 00:00:00 2001
From: "Alinson S. Xavier" <git@axavier.org>
Date: Fri, 14 Nov 2025 11:14:27 -0600
Subject: [PATCH] web: Minor changes to icons

---
 .../src/components/CaseBuilder/Buses.tsx      | 10 +++----
 .../src/components/CaseBuilder/Header.tsx     |  3 +--
 .../components/CaseBuilder/ProfiledUnits.tsx  | 26 +++++++------------
 .../src/components/CaseBuilder/Psload.tsx     | 20 ++++++--------
 .../components/CaseBuilder/StorageUnits.tsx   | 20 ++++++--------
 .../components/CaseBuilder/ThermalUnits.tsx   | 26 +++++++------------
 .../CaseBuilder/TransmissionLines.tsx         | 20 ++++++--------
 .../Buttons/SiteHeaderButton.module.css       |  2 +-
 .../Common/Buttons/SiteHeaderButton.tsx       |  4 +--
 .../src/components/Common/Forms/DataTable.tsx | 12 ++-------
 10 files changed, 53 insertions(+), 90 deletions(-)

diff --git a/web/frontend/src/components/CaseBuilder/Buses.tsx b/web/frontend/src/components/CaseBuilder/Buses.tsx
index d6aa8e7..942f3c0 100644
--- a/web/frontend/src/components/CaseBuilder/Buses.tsx
+++ b/web/frontend/src/components/CaseBuilder/Buses.tsx
@@ -48,13 +48,13 @@ export const generateBusesData = (
 function BusesComponent(props: CaseBuilderSectionProps) {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generateBusesData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "buses.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csvContents: any) => {
       const [newBuses, err] = parseCsv(
         csvContents,
@@ -119,11 +119,11 @@ function BusesComponent(props: CaseBuilderSectionProps) {
   return (
     <div>
       <SectionHeader title="Buses">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/CaseBuilder/Header.tsx b/web/frontend/src/components/CaseBuilder/Header.tsx
index b454bdc..4d7fc22 100644
--- a/web/frontend/src/components/CaseBuilder/Header.tsx
+++ b/web/frontend/src/components/CaseBuilder/Header.tsx
@@ -9,7 +9,7 @@ import SiteHeaderButton from "../Common/Buttons/SiteHeaderButton";
 import { useRef } from "react";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { UnitCommitmentScenario } from "../../core/Data/types";
-import { faDownload, faGear, faRotateLeft, faRotateRight, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faRotateLeft, faRotateRight, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 
 interface HeaderProps {
   onClear: () => void;
@@ -63,7 +63,6 @@ function Header(props: HeaderProps) {
           <SiteHeaderButton
             title="Solve"
             variant="primary"
-            icon={faGear}
             onClick={props.onSolve}
           />
         </div>
diff --git a/web/frontend/src/components/CaseBuilder/ProfiledUnits.tsx b/web/frontend/src/components/CaseBuilder/ProfiledUnits.tsx
index 54c505a..850f689 100644
--- a/web/frontend/src/components/CaseBuilder/ProfiledUnits.tsx
+++ b/web/frontend/src/components/CaseBuilder/ProfiledUnits.tsx
@@ -6,17 +6,13 @@
 
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import DataTable, {
   ColumnSpec,
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 import { ColumnDefinition } from "tabulator-tables";
 import { offerDownload } from "../Common/io";
@@ -26,15 +22,11 @@ import {
   changeProfiledUnitData,
   createProfiledUnit,
   deleteGenerator,
-  renameGenerator,
+  renameGenerator
 } from "../../core/Operations/generatorOps";
 import { ValidationError } from "../../core/Data/validate";
 import { CaseBuilderSectionProps } from "./CaseBuilder";
-import {
-  getProfiledGenerators,
-  getThermalGenerators,
-  UnitCommitmentScenario,
-} from "../../core/Data/types";
+import { getProfiledGenerators, getThermalGenerators, UnitCommitmentScenario } from "../../core/Data/types";
 
 export const ProfiledUnitsColumnSpec: ColumnSpec[] = [
   {
@@ -104,13 +96,13 @@ export const parseProfiledUnitsCsv = (
 const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generateProfiledUnitsData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "profiled_units.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
       const [newScenario, err] = parseProfiledUnitsCsv(csv, props.scenario);
       if (err) {
@@ -175,11 +167,11 @@ const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Profiled units">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/CaseBuilder/Psload.tsx b/web/frontend/src/components/CaseBuilder/Psload.tsx
index 01950a4..f815058 100644
--- a/web/frontend/src/components/CaseBuilder/Psload.tsx
+++ b/web/frontend/src/components/CaseBuilder/Psload.tsx
@@ -9,7 +9,7 @@ import DataTable, {
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 import { CaseBuilderSectionProps } from "./CaseBuilder";
 import { useRef } from "react";
@@ -17,18 +17,14 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { ValidationError } from "../../core/Data/validate";
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { UnitCommitmentScenario } from "../../core/Data/types";
 import { ColumnDefinition } from "tabulator-tables";
 import {
   changePriceSensitiveLoadData,
   createPriceSensitiveLoad,
   deletePriceSensitiveLoad,
-  renamePriceSensitiveLoad,
+  renamePriceSensitiveLoad
 } from "../../core/Operations/psloadOps";
 import { offerDownload } from "../Common/io";
 
@@ -70,13 +66,13 @@ export const generatePriceSensitiveLoadsData = (
 const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generatePriceSensitiveLoadsData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "psloads.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
       // Parse provided CSV file
       const [psloads, err] = parseCsv(
@@ -153,11 +149,11 @@ const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Price-sensitive loads">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/CaseBuilder/StorageUnits.tsx b/web/frontend/src/components/CaseBuilder/StorageUnits.tsx
index 5cfd44d..153bd6d 100644
--- a/web/frontend/src/components/CaseBuilder/StorageUnits.tsx
+++ b/web/frontend/src/components/CaseBuilder/StorageUnits.tsx
@@ -9,7 +9,7 @@ import DataTable, {
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 import { CaseBuilderSectionProps } from "./CaseBuilder";
 import { useRef } from "react";
@@ -17,18 +17,14 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { ValidationError } from "../../core/Data/validate";
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { UnitCommitmentScenario } from "../../core/Data/types";
 import { ColumnDefinition } from "tabulator-tables";
 import {
   changeStorageUnitData,
   createStorageUnit,
   deleteStorageUnit,
-  renameStorageUnit,
+  renameStorageUnit
 } from "../../core/Operations/storageOps";
 import { offerDownload } from "../Common/io";
 
@@ -130,13 +126,13 @@ export const generateStorageUnitsData = (
 const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generateStorageUnitsData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "storage_units.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
       // Parse provided CSV file
       const [storageUnits, err] = parseCsv(
@@ -213,11 +209,11 @@ const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Storage units">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/CaseBuilder/ThermalUnits.tsx b/web/frontend/src/components/CaseBuilder/ThermalUnits.tsx
index 74892b3..b4ba6b3 100644
--- a/web/frontend/src/components/CaseBuilder/ThermalUnits.tsx
+++ b/web/frontend/src/components/CaseBuilder/ThermalUnits.tsx
@@ -9,7 +9,7 @@ import DataTable, {
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 import { CaseBuilderSectionProps } from "./CaseBuilder";
 import { useRef } from "react";
@@ -17,24 +17,16 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { ValidationError } from "../../core/Data/validate";
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { ColumnDefinition } from "tabulator-tables";
 import { offerDownload } from "../Common/io";
 import {
   changeThermalUnitData,
   createThermalUnit,
   deleteGenerator,
-  renameGenerator,
+  renameGenerator
 } from "../../core/Operations/generatorOps";
-import {
-  getProfiledGenerators,
-  getThermalGenerators,
-  UnitCommitmentScenario,
-} from "../../core/Data/types";
+import { getProfiledGenerators, getThermalGenerators, UnitCommitmentScenario } from "../../core/Data/types";
 
 export const ThermalUnitsColumnSpec: ColumnSpec[] = [
   {
@@ -158,13 +150,13 @@ export const parseThermalUnitsCsv = (
 const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generateThermalUnitsData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "thermal_units.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
       const [newScenario, err] = parseThermalUnitsCsv(csv, props.scenario);
       if (err) {
@@ -229,11 +221,11 @@ const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Thermal units">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/CaseBuilder/TransmissionLines.tsx b/web/frontend/src/components/CaseBuilder/TransmissionLines.tsx
index 162803a..5eb190b 100644
--- a/web/frontend/src/components/CaseBuilder/TransmissionLines.tsx
+++ b/web/frontend/src/components/CaseBuilder/TransmissionLines.tsx
@@ -6,17 +6,13 @@
 
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import DataTable, {
   ColumnSpec,
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 import { ColumnDefinition } from "tabulator-tables";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
@@ -28,7 +24,7 @@ import {
   createTransmissionLine,
   deleteTransmissionLine,
   rebuildContingencies,
-  renameTransmissionLine,
+  renameTransmissionLine
 } from "../../core/Operations/transmissionOps";
 import { offerDownload } from "../Common/io";
 import { UnitCommitmentScenario } from "../../core/Data/types";
@@ -91,13 +87,13 @@ const generateTransmissionLinesData = (
 const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
   const fileUploadElem = useRef<FileUploadElement>(null);
 
-  const onDownload = () => {
+  const onSave = () => {
     const [data, columns] = generateTransmissionLinesData(props.scenario);
     const csvContents = generateCsv(data, columns);
     offerDownload(csvContents, "text/csv", "transmission.csv");
   };
 
-  const onUpload = () => {
+  const onLoad = () => {
     fileUploadElem.current!.showFilePicker((csv: any) => {
       // Parse the CSV data
       const [newLines, err] = parseCsv(
@@ -181,11 +177,11 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Transmission lines">
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
         <SectionButton
           icon={faDownload}
-          tooltip="Download"
-          onClick={onDownload}
+          tooltip="Save"
+          onClick={onSave}
         />
         <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
diff --git a/web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css b/web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css
index a751354..9344f7c 100644
--- a/web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css
+++ b/web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css
@@ -14,7 +14,7 @@
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .SiteHeaderButton:not(:last-child) {
diff --git a/web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx b/web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx
index 34fc1c9..9d7ec09 100644
--- a/web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx
+++ b/web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx
@@ -16,7 +16,7 @@ function SiteHeaderButton({
   disabled = false,
 }: {
   title: string;
-  icon: IconDefinition;
+  icon?: IconDefinition;
   onClick?: () => void;
   variant?: "light" | "primary";
   disabled?: boolean;
@@ -31,7 +31,7 @@ function SiteHeaderButton({
       onClick={onClick}
       disabled={disabled}
     >
-      <FontAwesomeIcon icon={icon} />
+      {!icon ? title : <FontAwesomeIcon icon={icon} />}
     </button>
   );
 }
diff --git a/web/frontend/src/components/Common/Forms/DataTable.tsx b/web/frontend/src/components/Common/Forms/DataTable.tsx
index 9c4a460..8ff267e 100644
--- a/web/frontend/src/components/Common/Forms/DataTable.tsx
+++ b/web/frontend/src/components/Common/Forms/DataTable.tsx
@@ -5,18 +5,10 @@
  */
 
 import { useEffect, useRef, useState } from "react";
-import {
-  CellComponent,
-  ColumnDefinition,
-  TabulatorFull as Tabulator,
-} from "tabulator-tables";
+import { CellComponent, ColumnDefinition, TabulatorFull as Tabulator } from "tabulator-tables";
 import { ValidationError } from "../../../core/Data/validate";
 import Papa from "papaparse";
-import {
-  parseBool,
-  parseNullableNumber,
-  parseNumber,
-} from "../../../core/Operations/commonOps";
+import { parseBool, parseNullableNumber, parseNumber } from "../../../core/Operations/commonOps";
 import { UnitCommitmentScenario } from "../../../core/Data/types";
 import { getContingencyTransmissionLines } from "../../../core/Operations/transmissionOps";