From e9e24f0161caaaee3d3bf59df0ab8559c60d18ac Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 7 Sep 2023 08:35:34 +0200
Subject: [PATCH] fix: add stable ids to rows in AppTable

---
 .../components/display/table/AppTable.svelte  | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index 23d0fbe106..f3e9e1693e 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -88,17 +88,20 @@
 
 	let selectedRowIndex = -1
 
-	function toggleRow(row: Record<string, any>, rowIndex: number, force: boolean = false) {
+	function toggleRow(row: Record<string, any>, force: boolean = false) {
+		let data = { ...row.original }
+		let index = data['__index']
+		delete data['__index']
 		if (
-			selectedRowIndex !== rowIndex ||
-			JSON.stringify(row.original) !== JSON.stringify(result?.[rowIndex]) ||
+			selectedRowIndex !== index ||
+			JSON.stringify(data) !== JSON.stringify(result?.[index]) ||
 			force
 		) {
-			selectedRowIndex = rowIndex
-			outputs?.selectedRow.set(row.original, force)
-			outputs?.selectedRowIndex.set(rowIndex, force)
+			selectedRowIndex = index
+			outputs?.selectedRow.set(data, force)
+			outputs?.selectedRowIndex.set(index, force)
 			if (iterContext && listInputs) {
-				listInputs(id, { selectedRow: row.original, selectedRowIndex: rowIndex })
+				listInputs(id, { selectedRow: data, selectedRowIndex: index })
 			}
 		}
 	}
@@ -114,16 +117,14 @@
 		// We need to wait until the component is mounted so the world is created
 		mounted &&
 		outputs &&
-		toggleRow({ original: result[0] }, 0)
+		toggleRow({ original: { ...result[0], __index: 0 } })
 
 	function searchInResult(result: Array<Record<string, any>>, searchValue: string) {
 		if (searchValue === '') {
 			return result
 		}
 		return result.filter((row) =>
-			Object.values(row).some((value) =>
-				value?.toString()?.toLowercase()?.includes(searchValue.toLowerCase())
-			)
+			Object.values(row).some((value) => value?.toString()?.includes(searchValue))
 		)
 	}
 
@@ -142,10 +143,14 @@
 	let filteredResult: Array<Record<string, any>> = []
 
 	function setFilteredResult() {
+		const wIndex = Array.isArray(result)
+			? (result as any[]).map((x, i) => ({ ...x, __index: i }))
+			: [{ error: 'input was not an array' }]
+
 		if (resolvedConfig.search === 'By Runnable' || resolvedConfig.search === 'Disabled') {
-			filteredResult = result ?? []
+			filteredResult = wIndex ?? []
 		} else {
-			filteredResult = searchInResult(result ?? [], searchValue)
+			filteredResult = searchInResult(wIndex ?? [], searchValue)
 		}
 	}
 	$: (result || resolvedConfig.search || searchValue || resolvedConfig.pagination) &&
@@ -191,7 +196,7 @@
 
 		if (result) {
 			//console.log('rerendering table', result[0])
-			toggleRow({ original: filteredResult[0] }, 0, true)
+			toggleRow({ original: filteredResult[0] }, true)
 		}
 
 		if (outputs.page.peak()) {
@@ -219,7 +224,7 @@
 		},
 		setSelectedIndex: (index: number) => {
 			if (filteredResult) {
-				toggleRow({ original: filteredResult[index] }, index, true)
+				toggleRow({ original: filteredResult[index] }, true)
 			}
 		}
 	}
@@ -321,7 +326,8 @@
 						class={twMerge('divide-y bg-surface', css?.tableBody?.class ?? '')}
 						style={css?.tableBody?.style ?? ''}
 					>
-						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
+						{#each $table.getRowModel().rows as row (row.id)}
+							{@const rowIndex = row.original['__index']}
 							<tr
 								class={classNames(
 									'last-of-type:!border-b-0',
@@ -340,8 +346,8 @@
 										{#if context}
 											{@const component = renderCell(cell.column.columnDef.cell, context)}
 											<td
-												on:keydown={() => toggleRow(row, rowIndex)}
-												on:click={() => toggleRow(row, rowIndex)}
+												on:keydown={() => toggleRow(row)}
+												on:click={() => toggleRow(row)}
 												class="p-4 whitespace-pre-wrap truncate text-xs text-primary"
 												style={'width: ' + cell.column.getSize() + 'px'}
 											>
@@ -358,8 +364,8 @@
 								{#if actionButtons.length > 0}
 									<td
 										class="p-2"
-										on:keypress={() => toggleRow(row, rowIndex)}
-										on:click={() => toggleRow(row, rowIndex)}
+										on:keypress={() => toggleRow(row)}
+										on:click={() => toggleRow(row)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1.5">
 											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
@@ -438,7 +444,7 @@
 																	{render}
 																	noWFull
 																	preclickAction={async () => {
-																		toggleRow(row, rowIndex)
+																		toggleRow(row)
 																	}}
 																	id={actionButton.id}
 																	customCss={actionButton.customCss}
@@ -457,7 +463,7 @@
 																	configuration={actionButton.configuration}
 																	recomputeIds={actionButton.recomputeIds}
 																	preclickAction={async () => {
-																		toggleRow(row, rowIndex)
+																		toggleRow(row)
 																	}}
 																	{controls}
 																/>
@@ -471,7 +477,7 @@
 																		configuration={actionButton.configuration}
 																		recomputeIds={actionButton.recomputeIds}
 																		preclickAction={async () => {
-																			toggleRow(row, rowIndex)
+																			toggleRow(row)
 																		}}
 																		{controls}
 																	/>
@@ -487,7 +493,7 @@
 																configuration={actionButton.configuration}
 																recomputeIds={actionButton.recomputeIds}
 																preclickAction={async () => {
-																	toggleRow(row, rowIndex)
+																	toggleRow(row)
 																}}
 																extraQueryParams={{ row: row.original }}
 																componentInput={actionButton.componentInput}
@@ -501,7 +507,7 @@
 																configuration={actionButton.configuration}
 																recomputeIds={actionButton.recomputeIds}
 																preclickAction={async () => {
-																	toggleRow(row, rowIndex)
+																	toggleRow(row)
 																}}
 															/>
 														{:else if actionButton.type == 'selectcomponent'}
@@ -515,7 +521,7 @@
 																	configuration={actionButton.configuration}
 																	recomputeIds={actionButton.recomputeIds}
 																	preclickAction={async () => {
-																		toggleRow(row, rowIndex)
+																		toggleRow(row)
 																	}}
 																/>
 															</div>