From 6dd66bfa2760305763fdb28c93c13dfe2cb4ad42 Mon Sep 17 00:00:00 2001
From: Aarsh <aarshpatel2101@gmail.com>
Date: Thu, 10 Jul 2025 12:01:09 -0500
Subject: [PATCH 1/4] Implement data download when box runs

---
 .../src/components/DataExportBox.tsx          | 120 +++++++++++++++++-
 1 file changed, 113 insertions(+), 7 deletions(-)

diff --git a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
index 41c0562d..dfb64a47 100644
--- a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
+++ b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useRef } from "react";
 import { Handle, Position } from "reactflow";
 import BoxEditor from "./editing/BoxEditor";
 
@@ -16,6 +17,7 @@ import DescriptionModal from "./DescriptionModal";
 import TemplateModal from "./TemplateModal";
 import { useUserContext } from "../providers/UserProvider";
 import { InputIcon } from "./edges/InputIcon";
+import { fetchData } from "../services/api";
 
 function DataExportBox({ data, isConnectable }) {
   const [output, setOutput] = useState<{ code: string; content: string, outputType: string }>({
@@ -24,7 +26,14 @@ function DataExportBox({ data, isConnectable }) {
     outputType: ""
   }); // stores the output produced by the last execution of this box
   const [code, setCode] = useState<string>("");
-  const [sendCode, setSendCode] = useState();
+  const sendCode = async () => {
+    setOutput({ code: "exec", content: "", outputType: "" }); // trigger spinner
+
+    await downloadData();
+
+    setOutput({ code: "success", content: "Download complete.", outputType: "" }); // hide spinner
+  };
+
   const [templateData, setTemplateData] = useState<Template | any>({});
 
   const [newTemplateFlag, setNewTemplateFlag] = useState(false);
@@ -83,9 +92,105 @@ function DataExportBox({ data, isConnectable }) {
     editUserTemplate(template);
   };
 
-  const setSendCodeCallback = (_sendCode: any) => {
-    setSendCode(() => _sendCode);
-  };
+
+  // useEffect(() => {
+  //   const downloadData = async () => {
+  //     if (output.code !== "success") return;
+
+  //     let filePath = "";
+  //     if (data.input && typeof data.input === "object" && data.input.path) {
+  //       filePath = data.input.path;
+  //     }
+
+  //     if (!filePath) return;
+
+  //     try {
+  //       const result: any = await fetchData(`${filePath}`);
+  //       let fileName = "data_export";
+  //       let fileContent = "";
+
+  //       if (result.dataType === "dataframe" && result.data) {
+  //         const columns = Object.keys(result.data);
+  //         const rows = result.data[columns[0]]?.length || 0;
+  //         const csvRows = [] as string[];
+  //         csvRows.push(columns.join(","));
+  //         for (let i = 0; i < rows; i++) {
+  //           const row = columns.map((col) => result.data[col][i]);
+  //           csvRows.push(row.join(","));
+  //         }
+  //         fileContent = csvRows.join("\n");
+  //         fileName += ".csv";
+  //       } else if (result.dataType === "geodataframe" && result.data) {
+  //         fileContent = JSON.stringify(result.data);
+  //         fileName += ".geojson";
+  //       } else {
+  //         fileContent = JSON.stringify(result.data);
+  //         fileName += ".json";
+  //       }
+
+  //       const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+  //       const link = document.createElement("a");
+  //       link.href = URL.createObjectURL(blob);
+  //       link.download = fileName;
+  //       document.body.appendChild(link);
+  //       link.click();
+  //       document.body.removeChild(link);
+  //     } catch (err) {
+  //       console.error("Failed to download data", err);
+  //     }
+  //   };
+
+  //   downloadData();
+  // }, [output]);
+  
+  const downloadData = async () => {
+  let filePath = "";
+  if (data.input && typeof data.input === "object" && data.input.path) {
+    filePath = data.input.path;
+  }
+
+  if (!filePath) return;
+
+  try {
+    const result: any = await fetchData(`${filePath}`);
+    let fileName = "data_export";
+    let fileContent = "";
+
+    if (result.dataType === "dataframe" && result.data) {
+      const columns = Object.keys(result.data);
+      const rows = result.data[columns[0]]?.length || 0;
+      const csvRows = [] as string[];
+      csvRows.push(columns.join(","));
+      for (let i = 0; i < rows; i++) {
+        const row = columns.map((col) => result.data[col][i]);
+        csvRows.push(row.join(","));
+      }
+      fileContent = csvRows.join("\n");
+      fileName += ".csv";
+    } else if (result.dataType === "geodataframe") {
+      fileContent = JSON.stringify(result.data);
+      fileName += ".geojson";
+    } else {
+      fileContent = JSON.stringify(result.data);
+      fileName += ".json";
+    }
+
+    const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (err) {
+    console.error("Failed to download data", err);
+  }
+};
+
+useEffect(() => {
+  setOutput({ code: "success", content: "", outputType: "" });
+}, [data.input]);
+
 
   const iconStyle: CSS.Properties = {
     fontSize: "1.5em",
@@ -137,10 +242,11 @@ function DataExportBox({ data, isConnectable }) {
         />
 
         <BoxEditor
-          setSendCodeCallback={setSendCodeCallback}
-          code={true}
+          setSendCodeCallback={(_: any) => {}}
+          code={false}
           grammar={false}
-          widgets={true}
+          widgets={false}
+          provenance={false}
           setOutputCallback={setOutput}
           data={data}
           output={output}

From 2c1e14498ad95f40cb2652a943b648b1580ffd5d Mon Sep 17 00:00:00 2001
From: Aarsh <aarshpatel2101@gmail.com>
Date: Fri, 11 Jul 2025 12:54:40 -0500
Subject: [PATCH 2/4] Added export format selection

---
 .../src/components/DataExportBox.tsx          | 96 ++++++++-----------
 1 file changed, 39 insertions(+), 57 deletions(-)

diff --git a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
index dfb64a47..c420ff3b 100644
--- a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
+++ b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
@@ -25,13 +25,15 @@ function DataExportBox({ data, isConnectable }) {
     content: "",
     outputType: ""
   }); // stores the output produced by the last execution of this box
+  
+  const [downloadFormat, setDownloadFormat] = useState<string>("csv");
   const [code, setCode] = useState<string>("");
   const sendCode = async () => {
-    setOutput({ code: "exec", content: "", outputType: "" }); // trigger spinner
+    setOutput({ code: "exec", content: "", outputType: downloadFormat }); // trigger spinner
 
     await downloadData();
 
-    setOutput({ code: "success", content: "Download complete.", outputType: "" }); // hide spinner
+    setOutput({ code: "success", content: "Download complete.", outputType: downloadFormat }); // hide spinner
   };
 
   const [templateData, setTemplateData] = useState<Template | any>({});
@@ -92,57 +94,35 @@ function DataExportBox({ data, isConnectable }) {
     editUserTemplate(template);
   };
 
+  const customWidgetsCallback = (div: HTMLElement) => {
+    const label = document.createElement("label");
+    label.setAttribute("for", "exportFormat");
+    label.style.marginRight = "5px";
+    label.textContent = "Export format: ";
+
+    const select = document.createElement("select");
+    select.setAttribute("name", "exportFormat");
+    select.setAttribute("id", data.nodeId + "_select_format");
+
+    ["csv", "json", "geojson"].forEach((optionText) => {
+      const option = document.createElement("option");
+      option.setAttribute("value", optionText);
+      option.textContent = optionText.toUpperCase();
+      select.appendChild(option);
+    });
+
+    select.value = downloadFormat;
+    select.addEventListener("change", (event) => {
+      if (event.target) {
+        const target = event.target as HTMLOptionElement;
+        setDownloadFormat(target.value);
+      }
+    });
+
+    div.appendChild(label);
+    div.appendChild(select);
+  };
 
-  // useEffect(() => {
-  //   const downloadData = async () => {
-  //     if (output.code !== "success") return;
-
-  //     let filePath = "";
-  //     if (data.input && typeof data.input === "object" && data.input.path) {
-  //       filePath = data.input.path;
-  //     }
-
-  //     if (!filePath) return;
-
-  //     try {
-  //       const result: any = await fetchData(`${filePath}`);
-  //       let fileName = "data_export";
-  //       let fileContent = "";
-
-  //       if (result.dataType === "dataframe" && result.data) {
-  //         const columns = Object.keys(result.data);
-  //         const rows = result.data[columns[0]]?.length || 0;
-  //         const csvRows = [] as string[];
-  //         csvRows.push(columns.join(","));
-  //         for (let i = 0; i < rows; i++) {
-  //           const row = columns.map((col) => result.data[col][i]);
-  //           csvRows.push(row.join(","));
-  //         }
-  //         fileContent = csvRows.join("\n");
-  //         fileName += ".csv";
-  //       } else if (result.dataType === "geodataframe" && result.data) {
-  //         fileContent = JSON.stringify(result.data);
-  //         fileName += ".geojson";
-  //       } else {
-  //         fileContent = JSON.stringify(result.data);
-  //         fileName += ".json";
-  //       }
-
-  //       const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
-  //       const link = document.createElement("a");
-  //       link.href = URL.createObjectURL(blob);
-  //       link.download = fileName;
-  //       document.body.appendChild(link);
-  //       link.click();
-  //       document.body.removeChild(link);
-  //     } catch (err) {
-  //       console.error("Failed to download data", err);
-  //     }
-  //   };
-
-  //   downloadData();
-  // }, [output]);
-  
   const downloadData = async () => {
   let filePath = "";
   if (data.input && typeof data.input === "object" && data.input.path) {
@@ -156,7 +136,7 @@ function DataExportBox({ data, isConnectable }) {
     let fileName = "data_export";
     let fileContent = "";
 
-    if (result.dataType === "dataframe" && result.data) {
+    if (downloadFormat === "csv" && result.data) {
       const columns = Object.keys(result.data);
       const rows = result.data[columns[0]]?.length || 0;
       const csvRows = [] as string[];
@@ -167,7 +147,7 @@ function DataExportBox({ data, isConnectable }) {
       }
       fileContent = csvRows.join("\n");
       fileName += ".csv";
-    } else if (result.dataType === "geodataframe") {
+    } else if (downloadFormat === "geojson") {
       fileContent = JSON.stringify(result.data);
       fileName += ".geojson";
     } else {
@@ -188,8 +168,9 @@ function DataExportBox({ data, isConnectable }) {
 };
 
 useEffect(() => {
-  setOutput({ code: "success", content: "", outputType: "" });
-}, [data.input]);
+  setOutput({ code: "success", content: "", outputType: downloadFormat });
+}, [data.input, downloadFormat]);
+
 
 
   const iconStyle: CSS.Properties = {
@@ -245,9 +226,10 @@ useEffect(() => {
           setSendCodeCallback={(_: any) => {}}
           code={false}
           grammar={false}
-          widgets={false}
+          widgets={true}
           provenance={false}
           setOutputCallback={setOutput}
+          customWidgetsCallback={customWidgetsCallback}
           data={data}
           output={output}
           boxType={BoxType.DATA_EXPORT}

From e74d8babb4ad55d2ed3308065845c387e6dc25cc Mon Sep 17 00:00:00 2001
From: Aarsh <aarshpatel2101@gmail.com>
Date: Fri, 11 Jul 2025 16:19:02 -0500
Subject: [PATCH 3/4] Add comments

---
 .../src/components/DataExportBox.tsx          | 138 ++++++++++++------
 1 file changed, 94 insertions(+), 44 deletions(-)

diff --git a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
index c420ff3b..502bbded 100644
--- a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
+++ b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
@@ -28,12 +28,16 @@ function DataExportBox({ data, isConnectable }) {
   
   const [downloadFormat, setDownloadFormat] = useState<string>("csv");
   const [code, setCode] = useState<string>("");
+  
   const sendCode = async () => {
-    setOutput({ code: "exec", content: "", outputType: downloadFormat }); // trigger spinner
+    // Set output to "exec" to trigger loading spinner in the UI
+    setOutput({ code: "exec", content: "", outputType: downloadFormat });
 
+    // Perform the data download (export) operation
     await downloadData();
 
-    setOutput({ code: "success", content: "Download complete.", outputType: downloadFormat }); // hide spinner
+    // Set output to "success" to hide spinner and indicate completion
+    setOutput({ code: "success", content: "Download complete.", outputType: downloadFormat });
   };
 
   const [templateData, setTemplateData] = useState<Template | any>({});
@@ -95,15 +99,18 @@ function DataExportBox({ data, isConnectable }) {
   };
 
   const customWidgetsCallback = (div: HTMLElement) => {
+    // Create and configure the label for the export format dropdown
     const label = document.createElement("label");
     label.setAttribute("for", "exportFormat");
     label.style.marginRight = "5px";
     label.textContent = "Export format: ";
 
+    // Create the select (dropdown) element for choosing export format
     const select = document.createElement("select");
     select.setAttribute("name", "exportFormat");
     select.setAttribute("id", data.nodeId + "_select_format");
 
+    // Add export format options to the dropdown
     ["csv", "json", "geojson"].forEach((optionText) => {
       const option = document.createElement("option");
       option.setAttribute("value", optionText);
@@ -111,7 +118,10 @@ function DataExportBox({ data, isConnectable }) {
       select.appendChild(option);
     });
 
+    // Set the dropdown's current value to the selected download format
     select.value = downloadFormat;
+
+    // Update the download format state when the user selects a new option
     select.addEventListener("change", (event) => {
       if (event.target) {
         const target = event.target as HTMLOptionElement;
@@ -119,60 +129,100 @@ function DataExportBox({ data, isConnectable }) {
       }
     });
 
+    // Add the label and dropdown to the provided container
     div.appendChild(label);
     div.appendChild(select);
   };
 
+  // Function to handle the data download based on the selected format
   const downloadData = async () => {
-  let filePath = "";
-  if (data.input && typeof data.input === "object" && data.input.path) {
-    filePath = data.input.path;
-  }
-
-  if (!filePath) return;
-
-  try {
-    const result: any = await fetchData(`${filePath}`);
-    let fileName = "data_export";
-    let fileContent = "";
-
-    if (downloadFormat === "csv" && result.data) {
-      const columns = Object.keys(result.data);
-      const rows = result.data[columns[0]]?.length || 0;
-      const csvRows = [] as string[];
-      csvRows.push(columns.join(","));
-      for (let i = 0; i < rows; i++) {
-        const row = columns.map((col) => result.data[col][i]);
-        csvRows.push(row.join(","));
-      }
-      fileContent = csvRows.join("\n");
-      fileName += ".csv";
-    } else if (downloadFormat === "geojson") {
-      fileContent = JSON.stringify(result.data);
-      fileName += ".geojson";
-    } else {
-      fileContent = JSON.stringify(result.data);
-      fileName += ".json";
+    // Determine the file path from the input data
+    let filePath = "";
+    if (data.input && typeof data.input === "object" && data.input.path) {
+      filePath = data.input.path;
     }
 
-    const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
-    const link = document.createElement("a");
-    link.href = URL.createObjectURL(blob);
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  } catch (err) {
-    console.error("Failed to download data", err);
-  }
-};
+    // If no file path is available, exit early
+    if (!filePath) return;
+
+    try {
+      // Fetch the data from the backend or source
+      const result: any = await fetchData(`${filePath}`);
+      let fileName = "data_export";
+      let fileContent = "";
+
+      // --- CSV Export ---
+      // If the user selected CSV and the data is a dataframe or geodataframe
+      if (
+        downloadFormat === "csv" &&
+        result.data &&
+        (result.dataType === "dataframe" || result.dataType === "geodataframe")
+      ) {
+        const csvRows: string[] = [];
+
+        // Handle regular dataframe export to CSV
+        if (result.dataType === "dataframe") {
+          const columns = Object.keys(result.data);
+          const rows = result.data[columns[0]]?.length || 0;
+          csvRows.push(columns.join(","));
+          for (let i = 0; i < rows; i++) {
+            const row = columns.map(col => JSON.stringify(result.data[col][i] ?? ""));
+            csvRows.push(row.join(","));
+          }
+        }
+        // Handle geodataframe export to CSV (geometry column stringified)
+        else if (result.dataType === "geodataframe" && result.data.features) {
+          const features = result.data.features;
+          // Flatten properties and stringify geometry for each feature
+          const properties = features.map((f: any) => ({
+            ...f.properties,
+            geometry: JSON.stringify(f.geometry),
+          }));
+
+          const columns = Object.keys(properties[0]);
+          csvRows.push(columns.join(","));
+          for (const row of properties) {
+            const values = columns.map(col => JSON.stringify(row[col] ?? ""));
+            csvRows.push(values.join(","));
+          }
+        }
+
+        fileContent = csvRows.join("\n");
+        fileName += ".csv";
+      }
+
+      // --- GeoJSON Export ---
+      // If the user selected GeoJSON, stringify the data as GeoJSON
+      else if (downloadFormat === "geojson") {
+        fileContent = JSON.stringify(result.data);
+        fileName += ".geojson";
+      }
+
+      // --- JSON Export (default fallback) ---
+      // For all other cases, export as plain JSON
+      else {
+        fileContent = JSON.stringify(result.data);
+        fileName += ".json";
+      }
+
+      // Create a blob and trigger the download in the browser
+      const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (err) {
+      // Log any errors that occur during the download process
+      console.error("Failed to download data", err);
+    }
+  };
 
 useEffect(() => {
   setOutput({ code: "success", content: "", outputType: downloadFormat });
 }, [data.input, downloadFormat]);
 
-
-
   const iconStyle: CSS.Properties = {
     fontSize: "1.5em",
     color: "#888787",

From fa43df888dbcef33293a7a3ddf08e1dbaf850eba Mon Sep 17 00:00:00 2001
From: Aarsh <aarshpatel2101@gmail.com>
Date: Fri, 11 Jul 2025 16:22:52 -0500
Subject: [PATCH 4/4] Remove extra import

---
 .../frontend/urban-workflows/src/components/DataExportBox.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
index 502bbded..c741792c 100644
--- a/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
+++ b/utk_curio/frontend/urban-workflows/src/components/DataExportBox.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { useRef } from "react";
 import { Handle, Position } from "reactflow";
 import BoxEditor from "./editing/BoxEditor";
 
@@ -28,7 +27,7 @@ function DataExportBox({ data, isConnectable }) {
   
   const [downloadFormat, setDownloadFormat] = useState<string>("csv");
   const [code, setCode] = useState<string>("");
-  
+
   const sendCode = async () => {
     // Set output to "exec" to trigger loading spinner in the UI
     setOutput({ code: "exec", content: "", outputType: downloadFormat });