From 3c9caae26a9b9df8b061f68497aa963298dd8227 Mon Sep 17 00:00:00 2001
From: Ryan Livingston <43882944+rlivings39@users.noreply.github.com>
Date: Thu, 3 Apr 2025 21:39:17 -0400
Subject: [PATCH 1/3] Introduce some reactivity and state modifications.

1. Format detection is run after parsing the CSV but before setting the program state and rendering the main table.
2. Format detection updates the main model state's type field on each column
3. Table rendering uses example custom formatters for each type
4. Changing the format dropdown updates the main model state's type field which redraws the table and reformats the contents
---
 ...ection.ts => newFormatDetection.svelte.ts} | 38 ++++++++++++++-----
 .../transferComponents/newTableData.svelte    | 17 +++++----
 .../transferCSVImporter.svelte                |  7 +++-
 src/lib/types/columnModel.ts                  | 19 +++++-----
 4 files changed, 55 insertions(+), 26 deletions(-)
 rename src/lib/transferComponents/{newFormatDetection.ts => newFormatDetection.svelte.ts} (80%)

diff --git a/src/lib/transferComponents/newFormatDetection.ts b/src/lib/transferComponents/newFormatDetection.svelte.ts
similarity index 80%
rename from src/lib/transferComponents/newFormatDetection.ts
rename to src/lib/transferComponents/newFormatDetection.svelte.ts
index 456db48f..d825f24a 100644
--- a/src/lib/transferComponents/newFormatDetection.ts
+++ b/src/lib/transferComponents/newFormatDetection.svelte.ts
@@ -1,3 +1,29 @@
+import type { ColumnFormat } from "$lib/types/columnModel";
+
+	type FormatT = 'string' | 'number' | 'date' | 'gps';
+	export function formatValue(format: FormatT, value: any): string {
+		if (format === "date") { return formatDate(value); }
+		if (format == "gps") { return formatGps(value); }
+		if (format === "number") { return formatNumber(value); }
+		if (format === "string") { return formatString(value); }
+		return value;
+	}
+
+	function formatDate(value: any): string {
+		return "Date: " + value;
+	}
+
+	function formatGps(value: any): string {
+		return "Gps:" + value;
+	}
+
+	function formatNumber(value: any): string {
+		return "Number: " + value;
+	}
+
+	function formatString(value: any): string {
+		return "String: " + value;
+	}
 
 	// 👍️🌲️👍️🌲️👍️🌲️👍️🌲️👍️🌲️NUMBERS🌲️🌲️🌲️🌲️🌲️🌲️🌲️
 	// Number detection with debug
@@ -52,10 +78,10 @@
 	}
 
 	//  3 Apr 2025  8:55 AM New function
-	export function detectFormat(columnData: Array<string | number | null>, currentColumnHeader: string, selectedFormat: string) {
+	export function detectFormat(columnData: Array<string | number | null>, currentColumnHeader: string): ColumnFormat {
 		console.log('Checking column format for:', currentColumnHeader);
 		// Reset detected format for new column
-		selectedFormat = 'string';
+		let selectedFormat: ColumnFormat = 'string';
 		// Get first 3 non-empty values
 		const sampleValues = columnData
 			.filter((val: string | number | null) => val !== null && val !== '')
@@ -67,19 +93,13 @@
 
 		// If majority format
 		if (dateCount >= Math.ceil(sampleValues.length / 2)) {
-			if (selectedFormat !== 'date') {
-				// console.log(`Setting format to 'date' (${dateCount}/${sampleValues.length} dates)`);
 				selectedFormat = 'date';
-			}
 		} else if (numberCount >= Math.ceil(sampleValues.length / 2)) {
-			if (selectedFormat !== 'number') {
-				// console.log(`Setting format to 'number' (${numberCount}/${sampleValues.length} numbers)`);
 				selectedFormat = 'number';
-			}
 		} else {
 			console.log(
 				`No majority format - keeping as '${selectedFormat}' (${numberCount} numbers, ${dateCount} dates)`
 			);
 		}
 		return selectedFormat;
-	};
\ No newline at end of file
+	};
diff --git a/src/lib/transferComponents/newTableData.svelte b/src/lib/transferComponents/newTableData.svelte
index d3db5788..1e690ab2 100644
--- a/src/lib/transferComponents/newTableData.svelte
+++ b/src/lib/transferComponents/newTableData.svelte
@@ -2,7 +2,8 @@
 	import type { ColumnRep } from '$lib/types/columnModel';
 	import FormatSelectorComponent from './FormatSelectorComponent.svelte';
 	import { importedData } from '$lib/transferComponents/modelState.svelte';
-	
+	import {formatValue} from "./newFormatDetection.svelte";
+
 	let columnFormats = $state<Record<string, string>>({});
 
 	// Number formatting function
@@ -27,14 +28,15 @@
 	// then run detection and formatting for that type on the columnRep
 
 	// Whenever select dropdown changes, this updates. Handle format changes
-	export function formatEvent(
+	export function formatEvent(column: ColumnRep,
 		event: CustomEvent<{ destinationFormat: string; headerName: string }>
 	) {
 		// this is dropdown value user chose.
-		const selectedFormat = event.detail.destinationFormat;
+		const selectedFormat = event.detail.destinationFormat as 'string' | 'number' | 'date' | 'gps';
 		console.log(`Called from format event from table: ${selectedFormat}`);
 		// Update column format in state
 		// might be better to update main model
+		column.type = selectedFormat;
 		columnFormats[event.detail.headerName] = selectedFormat;
 		console.log('calling column formats', columnFormats);
 	}
@@ -47,9 +49,9 @@
 			{#each importedData.columns as column}
 				<FormatSelectorComponent
 					columnData={getColumnData(column)}
-					currentFormat={columnFormats[column.headerName] || 'string'}
+					currentFormat={column.type}
 					currentColumnHeader={column.headerName}
-					onformatchange={formatEvent}
+					onformatchange={(event) => formatEvent(column, event)}
 				/>
 			{/each}
 		</div>
@@ -66,10 +68,11 @@
 					<tr>
 						{#each importedData.columns as column, columnIndex}
 							<td>
-								{columnFormats[column.headerName] === 'number' &&
+								{formatValue(column.type, column.values[rowIndex])}
+								<!-- {columnFormats[column.headerName] === 'number' &&
 								typeof column.values[rowIndex] === 'number'
 									? numberFormat(column.values[rowIndex] as number)
-									: (column.values[rowIndex] ?? '')}
+									: (column.values[rowIndex] ?? '')} -->
 							</td>
 						{/each}
 					</tr>
diff --git a/src/lib/transferComponents/transferCSVImporter.svelte b/src/lib/transferComponents/transferCSVImporter.svelte
index ab898839..952a9211 100644
--- a/src/lib/transferComponents/transferCSVImporter.svelte
+++ b/src/lib/transferComponents/transferCSVImporter.svelte
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Svelte 5 $dispatch documentation reference:
   https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events
 Components should accept callback props - which means you then pass functions as properties to these components
@@ -7,6 +7,7 @@ Components should accept callback props - which means you then pass functions as
 	import Papa from 'papaparse';
 	import type { ColumnRep } from '$lib/types/columnModel';
 	import { BaseColumnModel } from '$lib/types/columnModel';
+	import { detectFormat } from '$lib/transferComponents/newFormatDetection.svelte'
 
 	const { onprocessed } = $props<{
 		onprocessed: (data: ColumnRep[]) => void;
@@ -81,6 +82,10 @@ Components should accept callback props - which means you then pass functions as
 					};
 				});
 				// Before the onprocessed call
+				for (let i = 0; i < columnData.length; ++i) {
+					const detectedFormat = detectFormat(columnData[i].values, columnData[i].headerName);
+					columnData[i].type = detectedFormat;
+				}
 				console.log('Dispatching processed data:', columnData);
 				onprocessed?.(columnData);
 				// Dispatch the transformed data
diff --git a/src/lib/types/columnModel.ts b/src/lib/types/columnModel.ts
index 374da848..46431b86 100644
--- a/src/lib/types/columnModel.ts
+++ b/src/lib/types/columnModel.ts
@@ -40,10 +40,11 @@ export interface ColumnDef {
 	};
 }
 
+export type ColumnFormat = 'string' | 'number' | 'date' | 'gps';
 export interface ColumnRep extends ColumnDef {
 	/** The column name/header from the imported data */
 	headerName: string;
-	type: 'string' | 'number' | 'date' | 'gps';
+	type: ColumnFormat;
 	/** The actual data values for this column */
 	values: Array<string | number | null>;
 	/** Optional validation errors by row index */
@@ -68,8 +69,8 @@ export class BaseColumnModel implements ColumnDef {
 	isMerged?: boolean;
 	mergedFrom?: string[];
 	isGpsSource?: boolean;
-	type: 'string' | 'number' | 'date' | 'gps' = 'string';
-	currentFormat: 'string' | 'number' | 'date' | 'gps' = 'string';
+	type: ColumnFormat = 'string';
+	currentFormat: ColumnFormat = 'string';
 	selectFormatCoercion?: selectFormatCoercion;
 	cellValidation?: CellValidationState[];
 	dbMapping?: {
@@ -87,7 +88,7 @@ export class BaseColumnModel implements ColumnDef {
 		this.isMapped = false;
 		this.isFormatted = false;
 	}
-	changeFormat(newType: 'string' | 'number' | 'date' | 'gps', changedBy: 'auto' | 'user' = 'user') {
+	changeFormat(newType: ColumnFormat, changedBy: 'auto' | 'user' = 'user') {
 		if (this.type !== newType) {
 		  this.selectFormatCoercion = {
 			originalFormat: this.type,
@@ -112,8 +113,8 @@ export class BaseColumnModel implements ColumnDef {
 }
 
 interface selectFormatCoercion {
-	originalFormat: 'string' | 'number' | 'date' | 'gps';
-	coercedFormat: 'string' | 'number' | 'date' | 'gps';
+	originalFormat: ColumnFormat;
+	coercedFormat: ColumnFormat;
 	timestamp: Date;
 	changedBy: 'auto' | 'user';
 	userSelected: boolean; // Add this to track manual selections
@@ -162,7 +163,7 @@ export class NumberColumnModel extends BaseColumnModel implements NumberColumn {
 		precision?: number;
 		useThousandsSeparator?: boolean;
 	};
-	currentFormat: 'string' | 'number' | 'date' | 'gps' = 'number';
+	currentFormat: ColumnFormat = 'number';
 	validation?: {
 		min?: number;
 		max?: number;
@@ -209,7 +210,7 @@ export class DateColumnModel extends BaseColumnModel implements DateColumn {
 	format?: {
 		dateFormat?: string;
 	};
-	currentFormat: 'string' | 'number' | 'date' | 'gps' = 'date';
+	currentFormat: ColumnFormat = 'date';
 
 	constructor(headerName: string, dateFormat?: string) {
 		super(headerName);
@@ -250,7 +251,7 @@ export class GpsColumnModel extends BaseColumnModel implements GpsColumn {
 		gpsFormat?: 'DMS' | 'DD';
 		precision?: number;
 	};
-	currentFormat: 'string' | 'number' | 'date' | 'gps' = 'gps';
+	currentFormat: ColumnFormat = 'gps';
 
 	constructor(name: string, gpsFormat: 'DMS' | 'DD' = 'DD', precision: number = 7) {
 		super(name);

From 516e697ba9113def99e1dd80808f7faa37626cef Mon Sep 17 00:00:00 2001
From: Ryan Livingston <43882944+rlivings39@users.noreply.github.com>
Date: Fri, 4 Apr 2025 10:28:24 -0400
Subject: [PATCH 2/3] Merge changes

---
 .../newFormatDetection.svelte.ts              | 27 ++++++++++++++++---
 .../transferComponents/newTableData.svelte    |  1 -
 .../transferCSVImporter.svelte                |  2 ++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/lib/transferComponents/newFormatDetection.svelte.ts b/src/lib/transferComponents/newFormatDetection.svelte.ts
index d825f24a..4118f852 100644
--- a/src/lib/transferComponents/newFormatDetection.svelte.ts
+++ b/src/lib/transferComponents/newFormatDetection.svelte.ts
@@ -1,5 +1,6 @@
 import type { ColumnFormat } from "$lib/types/columnModel";
 
+// 🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️ This is FORMATTING only
 	type FormatT = 'string' | 'number' | 'date' | 'gps';
 	export function formatValue(format: FormatT, value: any): string {
 		if (format === "date") { return formatDate(value); }
@@ -9,10 +10,6 @@ import type { ColumnFormat } from "$lib/types/columnModel";
 		return value;
 	}
 
-	function formatDate(value: any): string {
-		return "Date: " + value;
-	}
-
 	function formatGps(value: any): string {
 		return "Gps:" + value;
 	}
@@ -25,6 +22,26 @@ import type { ColumnFormat } from "$lib/types/columnModel";
 		return "String: " + value;
 	}
 
+
+
+function numberFormat(value: number): string {
+	return new Intl.NumberFormat('en-US', {
+		style: 'decimal',
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 2
+	}).format(value);
+}
+
+function formatDate(value: string): string {
+	return new Date(value).toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit'
+	});
+}
+
+// 🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️ This is detection only
+
 	// 👍️🌲️👍️🌲️👍️🌲️👍️🌲️👍️🌲️NUMBERS🌲️🌲️🌲️🌲️🌲️🌲️🌲️
 	// Number detection with debug
 	function isNumber(value: any): boolean {
@@ -42,6 +59,7 @@ import type { ColumnFormat } from "$lib/types/columnModel";
 		return false;
 	}
 
+
 	// 🌲️🌲️🌲️🌲️🌲️🌲️🌲️DATES🌲️🌲️🌲️🌲️🌲️🌲️🌲️
 	function isDate(value: any): boolean {
 		if (typeof value === 'number') {
@@ -73,6 +91,7 @@ import type { ColumnFormat } from "$lib/types/columnModel";
 				/^\d{1,2}(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\d{4}$/i
 			];
 			return DATE_FORMATS.some((format) => format.test(value));
+            // print as JavaScript data string
 		}
 		return false;
 	}
diff --git a/src/lib/transferComponents/newTableData.svelte b/src/lib/transferComponents/newTableData.svelte
index 1e690ab2..2e6ea768 100644
--- a/src/lib/transferComponents/newTableData.svelte
+++ b/src/lib/transferComponents/newTableData.svelte
@@ -40,7 +40,6 @@
 		columnFormats[event.detail.headerName] = selectedFormat;
 		console.log('calling column formats', columnFormats);
 	}
-
 </script>
 
 {#if importedData.columns.length > 0}
diff --git a/src/lib/transferComponents/transferCSVImporter.svelte b/src/lib/transferComponents/transferCSVImporter.svelte
index 952a9211..a590f226 100644
--- a/src/lib/transferComponents/transferCSVImporter.svelte
+++ b/src/lib/transferComponents/transferCSVImporter.svelte
@@ -81,6 +81,8 @@ Components should accept callback props - which means you then pass functions as
 						values
 					};
 				});
+				//  3 Apr 2025 9:03 AM TO DO: here loop through columnData and call detectFormat for each column
+				// then update currentFormat and type. -> update those types.
 				// Before the onprocessed call
 				for (let i = 0; i < columnData.length; ++i) {
 					const detectedFormat = detectFormat(columnData[i].values, columnData[i].headerName);

From c698c2f9ae4ed7d7f83d18fc55b57d9d32028e04 Mon Sep 17 00:00:00 2001
From: Ryan Livingston <43882944+rlivings39@users.noreply.github.com>
Date: Thu, 3 Apr 2025 21:39:17 -0400
Subject: [PATCH 3/3] Introduce some reactivity and state modifications.

1. Format detection is run after parsing the CSV but before setting the program state and rendering the main table.
2. Format detection updates the main model state's type field on each column
3. Table rendering uses example custom formatters for each type
4. Changing the format dropdown updates the main model state's type field which redraws the table and reformats the contents
---
 src/lib/transferComponents/newFormatDetection.svelte.ts | 2 +-
 src/lib/transferComponents/newTableData.svelte          | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/transferComponents/newFormatDetection.svelte.ts b/src/lib/transferComponents/newFormatDetection.svelte.ts
index 4118f852..784e143f 100644
--- a/src/lib/transferComponents/newFormatDetection.svelte.ts
+++ b/src/lib/transferComponents/newFormatDetection.svelte.ts
@@ -1,6 +1,6 @@
 import type { ColumnFormat } from "$lib/types/columnModel";
 
-// 🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️ This is FORMATTING only
+	// 🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️🔉️ This is FORMATTING only
 	type FormatT = 'string' | 'number' | 'date' | 'gps';
 	export function formatValue(format: FormatT, value: any): string {
 		if (format === "date") { return formatDate(value); }
diff --git a/src/lib/transferComponents/newTableData.svelte b/src/lib/transferComponents/newTableData.svelte
index 2e6ea768..8a2bc49c 100644
--- a/src/lib/transferComponents/newTableData.svelte
+++ b/src/lib/transferComponents/newTableData.svelte
@@ -2,8 +2,12 @@
 	import type { ColumnRep } from '$lib/types/columnModel';
 	import FormatSelectorComponent from './FormatSelectorComponent.svelte';
 	import { importedData } from '$lib/transferComponents/modelState.svelte';
+<<<<<<< HEAD
 	import {formatValue} from "./newFormatDetection.svelte";
 
+=======
+	import {formatValue} from './newFormatDetection.svelte'
+>>>>>>> 9d97b0f (Introduce some reactivity and state modifications.)
 	let columnFormats = $state<Record<string, string>>({});
 
 	// Number formatting function
@@ -68,10 +72,6 @@
 						{#each importedData.columns as column, columnIndex}
 							<td>
 								{formatValue(column.type, column.values[rowIndex])}
-								<!-- {columnFormats[column.headerName] === 'number' &&
-								typeof column.values[rowIndex] === 'number'
-									? numberFormat(column.values[rowIndex] as number)
-									: (column.values[rowIndex] ?? '')} -->
 							</td>
 						{/each}
 					</tr>