web: Minor changes to icons

This commit is contained in:
2025-11-14 11:14:27 -06:00
parent 61179bb7c7
commit 95ad6eca00
10 changed files with 53 additions and 90 deletions

View File

@@ -48,13 +48,13 @@ export const generateBusesData = (
function BusesComponent(props: CaseBuilderSectionProps) { function BusesComponent(props: CaseBuilderSectionProps) {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generateBusesData(props.scenario); const [data, columns] = generateBusesData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "buses.csv"); offerDownload(csvContents, "text/csv", "buses.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csvContents: any) => { fileUploadElem.current!.showFilePicker((csvContents: any) => {
const [newBuses, err] = parseCsv( const [newBuses, err] = parseCsv(
csvContents, csvContents,
@@ -119,11 +119,11 @@ function BusesComponent(props: CaseBuilderSectionProps) {
return ( return (
<div> <div>
<SectionHeader title="Buses"> <SectionHeader title="Buses">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -9,7 +9,7 @@ import SiteHeaderButton from "../Common/Buttons/SiteHeaderButton";
import { useRef } from "react"; import { useRef } from "react";
import FileUploadElement from "../Common/Buttons/FileUploadElement"; import FileUploadElement from "../Common/Buttons/FileUploadElement";
import { UnitCommitmentScenario } from "../../core/Data/types"; 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 { interface HeaderProps {
onClear: () => void; onClear: () => void;
@@ -63,7 +63,6 @@ function Header(props: HeaderProps) {
<SiteHeaderButton <SiteHeaderButton
title="Solve" title="Solve"
variant="primary" variant="primary"
icon={faGear}
onClick={props.onSolve} onClick={props.onSolve}
/> />
</div> </div>

View File

@@ -6,17 +6,13 @@
import SectionHeader from "../Common/SectionHeader/SectionHeader"; import SectionHeader from "../Common/SectionHeader/SectionHeader";
import SectionButton from "../Common/Buttons/SectionButton"; import SectionButton from "../Common/Buttons/SectionButton";
import { import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
faDownload,
faPlus,
faUpload,
} from "@fortawesome/free-solid-svg-icons";
import DataTable, { import DataTable, {
ColumnSpec, ColumnSpec,
generateCsv, generateCsv,
generateTableColumns, generateTableColumns,
generateTableData, generateTableData,
parseCsv, parseCsv
} from "../Common/Forms/DataTable"; } from "../Common/Forms/DataTable";
import { ColumnDefinition } from "tabulator-tables"; import { ColumnDefinition } from "tabulator-tables";
import { offerDownload } from "../Common/io"; import { offerDownload } from "../Common/io";
@@ -26,15 +22,11 @@ import {
changeProfiledUnitData, changeProfiledUnitData,
createProfiledUnit, createProfiledUnit,
deleteGenerator, deleteGenerator,
renameGenerator, renameGenerator
} from "../../core/Operations/generatorOps"; } from "../../core/Operations/generatorOps";
import { ValidationError } from "../../core/Data/validate"; import { ValidationError } from "../../core/Data/validate";
import { CaseBuilderSectionProps } from "./CaseBuilder"; import { CaseBuilderSectionProps } from "./CaseBuilder";
import { import { getProfiledGenerators, getThermalGenerators, UnitCommitmentScenario } from "../../core/Data/types";
getProfiledGenerators,
getThermalGenerators,
UnitCommitmentScenario,
} from "../../core/Data/types";
export const ProfiledUnitsColumnSpec: ColumnSpec[] = [ export const ProfiledUnitsColumnSpec: ColumnSpec[] = [
{ {
@@ -104,13 +96,13 @@ export const parseProfiledUnitsCsv = (
const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => { const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generateProfiledUnitsData(props.scenario); const [data, columns] = generateProfiledUnitsData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "profiled_units.csv"); offerDownload(csvContents, "text/csv", "profiled_units.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csv: any) => { fileUploadElem.current!.showFilePicker((csv: any) => {
const [newScenario, err] = parseProfiledUnitsCsv(csv, props.scenario); const [newScenario, err] = parseProfiledUnitsCsv(csv, props.scenario);
if (err) { if (err) {
@@ -175,11 +167,11 @@ const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
return ( return (
<div> <div>
<SectionHeader title="Profiled units"> <SectionHeader title="Profiled units">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -9,7 +9,7 @@ import DataTable, {
generateCsv, generateCsv,
generateTableColumns, generateTableColumns,
generateTableData, generateTableData,
parseCsv, parseCsv
} from "../Common/Forms/DataTable"; } from "../Common/Forms/DataTable";
import { CaseBuilderSectionProps } from "./CaseBuilder"; import { CaseBuilderSectionProps } from "./CaseBuilder";
import { useRef } from "react"; import { useRef } from "react";
@@ -17,18 +17,14 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
import { ValidationError } from "../../core/Data/validate"; import { ValidationError } from "../../core/Data/validate";
import SectionHeader from "../Common/SectionHeader/SectionHeader"; import SectionHeader from "../Common/SectionHeader/SectionHeader";
import SectionButton from "../Common/Buttons/SectionButton"; import SectionButton from "../Common/Buttons/SectionButton";
import { import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
faDownload,
faPlus,
faUpload,
} from "@fortawesome/free-solid-svg-icons";
import { UnitCommitmentScenario } from "../../core/Data/types"; import { UnitCommitmentScenario } from "../../core/Data/types";
import { ColumnDefinition } from "tabulator-tables"; import { ColumnDefinition } from "tabulator-tables";
import { import {
changePriceSensitiveLoadData, changePriceSensitiveLoadData,
createPriceSensitiveLoad, createPriceSensitiveLoad,
deletePriceSensitiveLoad, deletePriceSensitiveLoad,
renamePriceSensitiveLoad, renamePriceSensitiveLoad
} from "../../core/Operations/psloadOps"; } from "../../core/Operations/psloadOps";
import { offerDownload } from "../Common/io"; import { offerDownload } from "../Common/io";
@@ -70,13 +66,13 @@ export const generatePriceSensitiveLoadsData = (
const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => { const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generatePriceSensitiveLoadsData(props.scenario); const [data, columns] = generatePriceSensitiveLoadsData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "psloads.csv"); offerDownload(csvContents, "text/csv", "psloads.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csv: any) => { fileUploadElem.current!.showFilePicker((csv: any) => {
// Parse provided CSV file // Parse provided CSV file
const [psloads, err] = parseCsv( const [psloads, err] = parseCsv(
@@ -153,11 +149,11 @@ const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
return ( return (
<div> <div>
<SectionHeader title="Price-sensitive loads"> <SectionHeader title="Price-sensitive loads">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -9,7 +9,7 @@ import DataTable, {
generateCsv, generateCsv,
generateTableColumns, generateTableColumns,
generateTableData, generateTableData,
parseCsv, parseCsv
} from "../Common/Forms/DataTable"; } from "../Common/Forms/DataTable";
import { CaseBuilderSectionProps } from "./CaseBuilder"; import { CaseBuilderSectionProps } from "./CaseBuilder";
import { useRef } from "react"; import { useRef } from "react";
@@ -17,18 +17,14 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
import { ValidationError } from "../../core/Data/validate"; import { ValidationError } from "../../core/Data/validate";
import SectionHeader from "../Common/SectionHeader/SectionHeader"; import SectionHeader from "../Common/SectionHeader/SectionHeader";
import SectionButton from "../Common/Buttons/SectionButton"; import SectionButton from "../Common/Buttons/SectionButton";
import { import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
faDownload,
faPlus,
faUpload,
} from "@fortawesome/free-solid-svg-icons";
import { UnitCommitmentScenario } from "../../core/Data/types"; import { UnitCommitmentScenario } from "../../core/Data/types";
import { ColumnDefinition } from "tabulator-tables"; import { ColumnDefinition } from "tabulator-tables";
import { import {
changeStorageUnitData, changeStorageUnitData,
createStorageUnit, createStorageUnit,
deleteStorageUnit, deleteStorageUnit,
renameStorageUnit, renameStorageUnit
} from "../../core/Operations/storageOps"; } from "../../core/Operations/storageOps";
import { offerDownload } from "../Common/io"; import { offerDownload } from "../Common/io";
@@ -130,13 +126,13 @@ export const generateStorageUnitsData = (
const StorageUnitsComponent = (props: CaseBuilderSectionProps) => { const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generateStorageUnitsData(props.scenario); const [data, columns] = generateStorageUnitsData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "storage_units.csv"); offerDownload(csvContents, "text/csv", "storage_units.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csv: any) => { fileUploadElem.current!.showFilePicker((csv: any) => {
// Parse provided CSV file // Parse provided CSV file
const [storageUnits, err] = parseCsv( const [storageUnits, err] = parseCsv(
@@ -213,11 +209,11 @@ const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
return ( return (
<div> <div>
<SectionHeader title="Storage units"> <SectionHeader title="Storage units">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -9,7 +9,7 @@ import DataTable, {
generateCsv, generateCsv,
generateTableColumns, generateTableColumns,
generateTableData, generateTableData,
parseCsv, parseCsv
} from "../Common/Forms/DataTable"; } from "../Common/Forms/DataTable";
import { CaseBuilderSectionProps } from "./CaseBuilder"; import { CaseBuilderSectionProps } from "./CaseBuilder";
import { useRef } from "react"; import { useRef } from "react";
@@ -17,24 +17,16 @@ import FileUploadElement from "../Common/Buttons/FileUploadElement";
import { ValidationError } from "../../core/Data/validate"; import { ValidationError } from "../../core/Data/validate";
import SectionHeader from "../Common/SectionHeader/SectionHeader"; import SectionHeader from "../Common/SectionHeader/SectionHeader";
import SectionButton from "../Common/Buttons/SectionButton"; import SectionButton from "../Common/Buttons/SectionButton";
import { import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
faDownload,
faPlus,
faUpload,
} from "@fortawesome/free-solid-svg-icons";
import { ColumnDefinition } from "tabulator-tables"; import { ColumnDefinition } from "tabulator-tables";
import { offerDownload } from "../Common/io"; import { offerDownload } from "../Common/io";
import { import {
changeThermalUnitData, changeThermalUnitData,
createThermalUnit, createThermalUnit,
deleteGenerator, deleteGenerator,
renameGenerator, renameGenerator
} from "../../core/Operations/generatorOps"; } from "../../core/Operations/generatorOps";
import { import { getProfiledGenerators, getThermalGenerators, UnitCommitmentScenario } from "../../core/Data/types";
getProfiledGenerators,
getThermalGenerators,
UnitCommitmentScenario,
} from "../../core/Data/types";
export const ThermalUnitsColumnSpec: ColumnSpec[] = [ export const ThermalUnitsColumnSpec: ColumnSpec[] = [
{ {
@@ -158,13 +150,13 @@ export const parseThermalUnitsCsv = (
const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => { const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generateThermalUnitsData(props.scenario); const [data, columns] = generateThermalUnitsData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "thermal_units.csv"); offerDownload(csvContents, "text/csv", "thermal_units.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csv: any) => { fileUploadElem.current!.showFilePicker((csv: any) => {
const [newScenario, err] = parseThermalUnitsCsv(csv, props.scenario); const [newScenario, err] = parseThermalUnitsCsv(csv, props.scenario);
if (err) { if (err) {
@@ -229,11 +221,11 @@ const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
return ( return (
<div> <div>
<SectionHeader title="Thermal units"> <SectionHeader title="Thermal units">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -6,17 +6,13 @@
import SectionHeader from "../Common/SectionHeader/SectionHeader"; import SectionHeader from "../Common/SectionHeader/SectionHeader";
import SectionButton from "../Common/Buttons/SectionButton"; import SectionButton from "../Common/Buttons/SectionButton";
import { import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
faDownload,
faPlus,
faUpload,
} from "@fortawesome/free-solid-svg-icons";
import DataTable, { import DataTable, {
ColumnSpec, ColumnSpec,
generateCsv, generateCsv,
generateTableColumns, generateTableColumns,
generateTableData, generateTableData,
parseCsv, parseCsv
} from "../Common/Forms/DataTable"; } from "../Common/Forms/DataTable";
import { ColumnDefinition } from "tabulator-tables"; import { ColumnDefinition } from "tabulator-tables";
import FileUploadElement from "../Common/Buttons/FileUploadElement"; import FileUploadElement from "../Common/Buttons/FileUploadElement";
@@ -28,7 +24,7 @@ import {
createTransmissionLine, createTransmissionLine,
deleteTransmissionLine, deleteTransmissionLine,
rebuildContingencies, rebuildContingencies,
renameTransmissionLine, renameTransmissionLine
} from "../../core/Operations/transmissionOps"; } from "../../core/Operations/transmissionOps";
import { offerDownload } from "../Common/io"; import { offerDownload } from "../Common/io";
import { UnitCommitmentScenario } from "../../core/Data/types"; import { UnitCommitmentScenario } from "../../core/Data/types";
@@ -91,13 +87,13 @@ const generateTransmissionLinesData = (
const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => { const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
const fileUploadElem = useRef<FileUploadElement>(null); const fileUploadElem = useRef<FileUploadElement>(null);
const onDownload = () => { const onSave = () => {
const [data, columns] = generateTransmissionLinesData(props.scenario); const [data, columns] = generateTransmissionLinesData(props.scenario);
const csvContents = generateCsv(data, columns); const csvContents = generateCsv(data, columns);
offerDownload(csvContents, "text/csv", "transmission.csv"); offerDownload(csvContents, "text/csv", "transmission.csv");
}; };
const onUpload = () => { const onLoad = () => {
fileUploadElem.current!.showFilePicker((csv: any) => { fileUploadElem.current!.showFilePicker((csv: any) => {
// Parse the CSV data // Parse the CSV data
const [newLines, err] = parseCsv( const [newLines, err] = parseCsv(
@@ -181,11 +177,11 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
return ( return (
<div> <div>
<SectionHeader title="Transmission lines"> <SectionHeader title="Transmission lines">
<SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} /> <SectionButton icon={faUpload} tooltip="Load" onClick={onLoad} />
<SectionButton <SectionButton
icon={faDownload} icon={faDownload}
tooltip="Download" tooltip="Save"
onClick={onDownload} onClick={onSave}
/> />
<SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} /> <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
</SectionHeader> </SectionHeader>

View File

@@ -14,7 +14,7 @@
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 12px;
} }
.SiteHeaderButton:not(:last-child) { .SiteHeaderButton:not(:last-child) {

View File

@@ -16,7 +16,7 @@ function SiteHeaderButton({
disabled = false, disabled = false,
}: { }: {
title: string; title: string;
icon: IconDefinition; icon?: IconDefinition;
onClick?: () => void; onClick?: () => void;
variant?: "light" | "primary"; variant?: "light" | "primary";
disabled?: boolean; disabled?: boolean;
@@ -31,7 +31,7 @@ function SiteHeaderButton({
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled}
> >
<FontAwesomeIcon icon={icon} /> {!icon ? title : <FontAwesomeIcon icon={icon} />}
</button> </button>
); );
} }

View File

@@ -5,18 +5,10 @@
*/ */
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { import { CellComponent, ColumnDefinition, TabulatorFull as Tabulator } from "tabulator-tables";
CellComponent,
ColumnDefinition,
TabulatorFull as Tabulator,
} from "tabulator-tables";
import { ValidationError } from "../../../core/Data/validate"; import { ValidationError } from "../../../core/Data/validate";
import Papa from "papaparse"; import Papa from "papaparse";
import { import { parseBool, parseNullableNumber, parseNumber } from "../../../core/Operations/commonOps";
parseBool,
parseNullableNumber,
parseNumber,
} from "../../../core/Operations/commonOps";
import { UnitCommitmentScenario } from "../../../core/Data/types"; import { UnitCommitmentScenario } from "../../../core/Data/types";
import { getContingencyTransmissionLines } from "../../../core/Operations/transmissionOps"; import { getContingencyTransmissionLines } from "../../../core/Operations/transmissionOps";