last pr

package.json

@@ -42,7 +42,6 @@
 		"cmdk-sv": "^0.0.13",
 		"csv-parser": "^3.0.0",
 		"csvtojson": "^2.0.10",
-		"json-2-csv": "^5.0.1",
 		"lucide-svelte": "^0.331.0",
 		"radix-icons-svelte": "^1.2.1",
 		"tailwind-merge": "^2.2.1",

src/routes/demo/+page.svelte

@@ -4,18 +4,16 @@
 	// import { Label } from "$lib/components/ui/label";
 	import { Button } from '$lib/components/ui/button';
 	import csvtojson from 'csvtojson';
-	import { json2csv } from 'json-2-csv';
 
 	// to do
 	let features: string[];
 	let userData: any[] = [];
 	let anonymizedStringArray: any[] = [];
 	let anonymizedData: any[] = [];
 	let jsonArray: object[] = [];
-	let dataObject;
 
 	let originalCSV: string | Blob;
-	let anonymizedCSV;
+	let anonymizedCSV: string | Blob;
 
 	function readFile(file: Blob) {
 		return new Promise((resolve, reject) => {
@@ -70,12 +68,22 @@
 			);
 			data.push(obj);
 		}
-
 		return data;
 	}
 
-	async function convertObjectToCSV(dataObject: object[]) {
-		return await json2csv(dataObject);
+	function convertJsonToCsv(dataObject: object[]) {
+		// Get the headers (object keys)
+		const headers = features;
+
+		// Map each object in the array to a CSV row
+		const rows = jsonArray.map((obj) => {
+			return headers.map((header: string) => obj[header as keyof typeof obj]).join(',');
+		});
+
+		// Combine the headers and rows into a single CSV string
+		const csv = [headers.join(',')].concat(rows).join('\n');
+
+		return csv;
 	}
 
 	const handleAnonymizeData = (e: any) => {
@@ -115,24 +123,28 @@
 			});
 	};
 
-	// const handleFeatureSelect = (e) => {
-	//   e.preventDefault();
-	//   const formData =
+	$: featureName = '';
+
+	const handleFeatureSelect = (e: any) => {
+		e.preventDefault();
+		const formData = new FormData();
+		formData.append('', featureName);
+		formData.append('', originalCSV);
+		formData.append('', anonymizedCSV);
 
-	//   const url = 'https://trend-predictor-mwnxl4smaa-el.a.run.app';
+		const url = 'https://trend-predictor-mwnxl4smaa-el.a.run.app';
 
-	// 	fetch(url, {
-	// 		method: 'POST',
-	// 		body: formData
-	// 	})
-	// 		.then((response) => {
-	// 			if (!response.ok) {
-	// 				throw new Error('Network response was not ok');
-	// 			}
+		fetch(url, {
+			method: 'POST',
+			body: formData
+		}).then((response) => {
+			if (!response.ok) {
+				throw new Error('Network response was not ok');
+			}
 
-	// 			return response.json();
-	// 		})
-	// }
+			return response.json();
+		});
+	};
 </script>
 
 <main class="flex flex-col items-center">
@@ -144,7 +156,7 @@
 		</div>
 		{#if userData.length !== 0}
 			<form class="flex w-full items-center space-x-2">
-				<Input type="text" placeholder="feature" class="w-full" />
+				<Input type="text" placeholder="feature" class="w-full" bind:value={featureName} />
 				<Button type="submit" class="w-48">Subscribe</Button>
 			</form>
 			<h1 class="mb-4 mt-6 w-full text-center font-bold">Raw Data</h1>
@@ -176,7 +188,7 @@
 			<!-- to do -->
 			<h1 class="mb-4 mt-6 w-full text-center font-bold">Anonymized Data</h1>
 			<div class="max-h-96 w-full overflow-y-scroll border-2 border-slate-200 object-cover p-4">
-				<Table.Root>
+				<Table.Root class="overflow-x-visible">
 					<Table.Caption>A list of your recent invoices.</Table.Caption>
 					<Table.Header>
 						<Table.Row>