Refactor downloadButton component

Make download button generic and reusable in other components

Author: UsamaEquinorAFK

frontend/src/components/DownloadButton.tsx

@@ -2,27 +2,22 @@
 import { Button, Icon } from "@equinor/eds-core-react";
 import { save } from "@equinor/eds-icons";
 import { downloadTabulatedDataAsCSV } from "@/functions/Formatting";
-import { ExperimentResult } from "@/dto/ExperimentResult";
-import { SimulationResults } from "@/dto/SimulationResults";
 
 interface DownloadButtonProps {
-    simulationResultsPerExperiment: Record<string, SimulationResults[]>;
-    experimentResults: ExperimentResult[];
-    isDisabled?: boolean;
-    isLoading?: boolean;
+    csvContent: string;
+    fileName: string;
+    isLoading: boolean;
 }
 
-const DownloadButton: React.FC<DownloadButtonProps> = ({ simulationResultsPerExperiment, experimentResults }) => {
+const DownloadButton: React.FC<DownloadButtonProps> = ({ csvContent, isLoading, fileName }) => {
     const handleDownload = () => {
-        downloadTabulatedDataAsCSV(simulationResultsPerExperiment, experimentResults);
+        downloadTabulatedDataAsCSV(csvContent, fileName);
     };
 
-    const hasData = simulationResultsPerExperiment || experimentResults.length > 0;
-
     return (
-        <Button variant="outlined" onClick={handleDownload} disabled={!hasData} style={{ marginLeft: "1rem" }}>
+        <Button variant="outlined" onClick={handleDownload} disabled={isLoading} style={{ marginLeft: "1rem" }}>
             <Icon data={save} />
-            {hasData ? "Processing..." : "Download CSV"}
+            {"Download CSV"}
         </Button>
     );
 };

frontend/src/functions/Formatting.tsx

@@ -119,16 +119,8 @@ export const convertExperimentResultsToTabulatedData = (
     );
 };
 
-export const downloadTabulatedDataAsCSV = (
-    simulationResultsPerExperiment: Record<string, SimulationResults[]>,
-    experimentResults: ExperimentResult[]
-) => {
-    const tabulatedData = [
-        ...convertSimulationQueriesResultToTabulatedData(simulationResultsPerExperiment),
-        ...convertExperimentResultsToTabulatedData(experimentResults),
-    ];
-
-    if (tabulatedData.length === 0) return;
+export function convertTabulatedDataToCSVFormat(tabulatedData: TabulatedResultRow[]): string {
+    if (tabulatedData.length === 0) return "";
 
     const allKeys = Array.from(
         tabulatedData.reduce((set, row) => {
@@ -151,11 +143,14 @@ export const downloadTabulatedDataAsCSV = (
         .map((row) => row.map((val) => `"${String(val).replace(/"/g, '""')}"`).join(","))
         .join("\r\n");
 
+    return csvContent;
+}
+export const downloadTabulatedDataAsCSV = (csvContent: string, fileName: string) => {
     const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "tabulated_data.csv";
+    a.download = fileName;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);

frontend/src/pages/LabResults.tsx

@@ -9,6 +9,11 @@ import { ExperimentResult } from "@/dto/ExperimentResult.tsx";
 import { useSimulationQueries } from "@/hooks/useSimulationQueriesResult.ts";
 import DownloadButton from "@/components/DownloadButton.tsx";
 import LabResultSimulationRunsStatus from "@/components/LabResultSimulationRunsStatus.tsx";
+import {
+    convertExperimentResultsToTabulatedData,
+    convertSimulationQueriesResultToTabulatedData,
+    convertTabulatedDataToCSVFormat,
+} from "@/functions/Formatting";
 
 const LabResults: React.FC = () => {
     const [selectedExperiments, setSelectedExperiments] = useState<ExperimentResult[]>([]);
@@ -72,8 +77,14 @@ const LabResults: React.FC = () => {
                     }}
                 >
                     <DownloadButton
-                        simulationResultsPerExperiment={simulationQueryResults.data}
-                        experimentResults={selectedExperiments}
+                        csvContent={convertTabulatedDataToCSVFormat([
+                            ...convertSimulationQueriesResultToTabulatedData(simulationQueryResults.data),
+                            ...convertExperimentResultsToTabulatedData(selectedExperiments),
+                        ])}
+                        fileName={`AcidWatch-LabResults-${new Date().toISOString().replace(/[:.]/g, "-")}.csv`}
+                        isLoading={
+                            isLoading || simulationQueryResults.statuses.some((status) => status.status === "pending")
+                        }
                     />
                 </div>
             )}

frontend/src/pages/Models.tsx

@@ -14,6 +14,8 @@ import { MainContainer } from "@/components/styles";
 import CenteredImage from "@/components/CenteredImage";
 import noModelImage from "@/assets/no-model-light.svg";
 import { useNavigate, useParams } from "react-router-dom";
+import DownloadButton from "@/components/DownloadButton";
+import { convertSimulationQueriesResultToTabulatedData, convertTabulatedDataToCSVFormat } from "@/functions/Formatting";
 
 const Models: React.FC = () => {
     const [currentModel, setCurrentModel] = useState<ModelConfig | undefined>(undefined);
@@ -70,7 +72,29 @@ const Models: React.FC = () => {
     } else if (simulationResults === undefined) {
         resultsStep = <NoResults />;
     } else {
-        resultsStep = <Results simulationResults={simulationResults} />;
+        resultsStep = (
+            <>
+                <Results simulationResults={simulationResults} />
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        marginTop: "1rem",
+                        marginBottom: "2rem",
+                    }}
+                >
+                    <DownloadButton
+                        csvContent={convertTabulatedDataToCSVFormat([
+                            ...convertSimulationQueriesResultToTabulatedData({
+                                [`${simulationResults.modelInput.modelId}`]: [simulationResults],
+                            }),
+                        ])}
+                        fileName={`AcidWatch-ModelResults-${new Date().toISOString().replace(/[:.]/g, "-")}.csv`}
+                        isLoading={isLoading}
+                    />
+                </div>
+            </>
+        );
     }
 
     return (