From ddda14c52beb306c9acd3475d81e848ff6f0acdf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 11:39:50 +0100
Subject: [PATCH 01/35] app fixes

---
 .../components/layout/AppContainer.svelte     |  2 ++
 .../apps/components/layout/AppTabs.svelte     |  2 ++
 .../apps/editor/AppEditorHeader.svelte        |  2 +-
 .../components/apps/editor/GridEditor.svelte  |  5 ++--
 .../apps/editor/SubGridEditor.svelte          | 28 ++++---------------
 frontend/src/lib/components/apps/utils.ts     |  1 -
 6 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index 134b3a9149..be7d9909d7 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -34,6 +34,8 @@
 		{noPadding}
 		bind:subGrid={subGrids[0]}
 		containerHeight={componentContainerHeight}
+		parentId={id}
+		index={0}
 		on:focus={() => {
 			$selectedComponent = id
 		}}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 47ea2e333a..c2a1a12bf4 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -63,6 +63,8 @@
 	</div>
 	{#if subGrids && subGrids[selectedIndex]}
 		<SubGridEditor
+			parentId={id}
+			index={selectedIndex}
 			{noPadding}
 			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index d81a9eccf4..6403b020a1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -467,8 +467,8 @@
 				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
 				<button
 					on:click={() => {
-						$focusedGrid = undefined
 						$selectedComponent = undefined
+						$focusedGrid = undefined
 					}}
 				>
 					<X size={14} />
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index fe6150b607..d6c9beed19 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -37,8 +37,8 @@
 			const disabledGridItem = fct(gridItem)
 
 			if (disabledGridItem.data.subGrids) {
-				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid: GridItem[]) =>
-					subgrid.map((subgridItem: GridItem) => fct(subgridItem))
+				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map(
+					(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
 				)
 			}
 
@@ -87,6 +87,7 @@
 	function selectComponent(id: string) {
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = undefined
 		}
 	}
 
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 7d4fcbb905..1e8dabe5a3 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -9,6 +9,8 @@
 	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
+	export let parentId: string
+	export let index: number
 
 	const dispatch = createEventDispatcher()
 
@@ -36,6 +38,10 @@
 		onComponent = id
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = {
+				parentComponentId: parentId,
+				subGridIndex: index
+			}
 		}
 	}
 
@@ -48,28 +54,6 @@
 
 	// @ts-ignore
 	let container
-
-	$: if ($focusedGrid?.parentComponentId !== $selectedComponent) {
-		const gridItemIds = $app.grid
-			.map((gridItem: GridItem) => {
-				if (gridItem.data.id === $focusedGrid?.parentComponentId) {
-					const subGrids = gridItem.data.subGrids ?? []
-					return [
-						gridItem.data.id,
-						...subGrids.map((subGrid: GridItem[]) =>
-							subGrid.map((gridItem: GridItem) => gridItem.data.id)
-						)
-					]
-				} else {
-					return []
-				}
-			})
-			.flat(2)
-
-		if (!gridItemIds.includes($selectedComponent)) {
-			$focusedGrid = undefined
-		}
-	}
 </script>
 
 <div class="relative w-full subgrid " bind:this={container}>
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index f2658caf5f..25ecd119f0 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -20,7 +20,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 	(component.subGrids ?? []).forEach((subgrid) => {
 		if (subgrid) {
 			subgrid.forEach((item) => {
-				console.log(item)
 				if (item.data) {
 					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)

From 1eb5a0d1d35a8625e931b209efb579b38974f8d4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 11:59:28 +0100
Subject: [PATCH 02/35] fix subgrids final

---
 .../apps/editor/SettingsPanelRec.svelte       | 24 ++++++++++---------
 frontend/src/lib/components/apps/utils.ts     |  3 +++
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index 8d0e59dc9f..6e3587847d 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -10,14 +10,16 @@
 	export let gridItems: GridItem[]
 </script>
 
-{#each gridItems as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:gridItems bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{:else if gridItem.data.subGrids}
-		{#each gridItem.data.subGrids as subGrid}
-			<svelte:self bind:gridItems={subGrid} />
-		{/each}
-	{/if}
-{/each}
+{#if gridItems}
+	{#each gridItems as gridItem (gridItem.data.id)}
+		{#if gridItem.data.id === $selectedComponent}
+			<ComponentPanel bind:gridItems bind:component={gridItem.data} />
+		{:else if gridItem.data.type === 'tablecomponent'}
+			<TablePanel bind:component={gridItem.data} />
+		{:else if gridItem.data.subGrids}
+			{#each gridItem.data.subGrids as subGrid}
+				<svelte:self bind:gridItems={subGrid} />
+			{/each}
+		{/if}
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 25ecd119f0..129dfac196 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -259,6 +259,9 @@ export function toKebabCase(text: string) {
 }
 
 export function findParent(root: GridItem[], id: string): GridItem | undefined {
+	if (!root) {
+		return undefined
+	}
 	for (const a of root) {
 		if (a.id === id) {
 			return a

From 54955b710c5b77ade9a829cbc6b2be28e026150d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 13:11:06 +0100
Subject: [PATCH 03/35] fix subgrids final2

---
 .../apps/components/layout/AppTabs.svelte       |  1 +
 .../apps/editor/SettingsPanelRec.svelte         |  4 ++--
 .../components/apps/editor/TablePanel.svelte    |  1 +
 .../editor/settingsPanel/ComponentPanel.svelte  | 17 +++--------------
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index c2a1a12bf4..8700c4bfad 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,6 +46,7 @@
 	}
 
 	$: $selectedComponent === id && selectedIndex >= 0 && onFocus()
+	$: console.log(subGrids)
 </script>
 
 <InputValue {id} input={configuration.tabs} bind:value={tabs} />
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index 6e3587847d..fae08bb136 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../types'
 
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
@@ -13,7 +13,7 @@
 {#if gridItems}
 	{#each gridItems as gridItem (gridItem.data.id)}
 		{#if gridItem.data.id === $selectedComponent}
-			<ComponentPanel bind:gridItems bind:component={gridItem.data} />
+			<ComponentPanel {gridItems} bind:component={gridItem.data} />
 		{:else if gridItem.data.type === 'tablecomponent'}
 			<TablePanel bind:component={gridItem.data} />
 		{:else if gridItem.data.subGrids}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index 7663f55fc3..b5a12bb72f 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,6 +11,7 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
+			gridItems={undefined}
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 5ecae773e3..3d0341d052 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -32,7 +32,7 @@
 
 	export let component: AppComponent | undefined
 	export let rowColumns = false
-	export let gridItems: GridItem[] | undefined = undefined
+	export let gridItems: GridItem[] | undefined
 	export let onDelete: (() => void) | undefined = undefined
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
@@ -65,10 +65,10 @@
 
 	function removeGridElement() {
 		$selectedComponent = undefined
+		$focusedGrid = undefined
 		if (component) {
 			deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents)
 		}
-		gridItems = gridItems
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 
@@ -111,18 +111,7 @@
 
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
-						<StaticInputEditor
-							bind:componentInput={component.componentInput}
-							on:deleteArrayItem={(e) => {
-								if (component?.type === 'tabscomponent') {
-									const deletedIndex = e.detail.index
-
-									if (component.subGrids) {
-										component.subGrids.splice(deletedIndex, 1)
-									}
-								}
-							}}
-						/>
+						<StaticInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
 						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
 							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />

From 0041411c06c8dd11f854cf226d9fc114dff9ae44 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 14:48:28 +0100
Subject: [PATCH 04/35] subgrids editor panel iter 1

---
 .../apps/editor/SettingsPanelList.svelte      | 16 ++++++++
 .../apps/editor/SettingsPanelRec.svelte       |  5 +--
 .../InlineScriptEditorList.svelte             | 16 ++++++++
 .../InlineScriptEditorRec.svelte              | 40 +++++++++++++++++++
 .../InlineScriptsPanel.svelte                 | 23 ++---------
 frontend/src/lib/components/apps/utils.ts     |  3 +-
 6 files changed, 79 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
 create mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
 create mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
new file mode 100644
index 0000000000..1c008db020
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../types'
+
+	import SettingsPanelRec from './SettingsPanelRec.svelte'
+
+	export let subgrids: GridItem[][]
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<SettingsPanelRec bind:gridItems={subGrid} />
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
index fae08bb136..29dcff7b06 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -3,6 +3,7 @@
 	import type { AppEditorContext, GridItem } from '../types'
 
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
+	import SettingsPanelList from './SettingsPanelList.svelte'
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
@@ -17,9 +18,7 @@
 		{:else if gridItem.data.type === 'tablecomponent'}
 			<TablePanel bind:component={gridItem.data} />
 		{:else if gridItem.data.subGrids}
-			{#each gridItem.data.subGrids as subGrid}
-				<svelte:self bind:gridItems={subGrid} />
-			{/each}
+			<SettingsPanelList bind:subgrids={gridItem.data.subGrids} />
 		{/if}
 	{/each}
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
new file mode 100644
index 0000000000..612e3af4ce
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
+
+	export let subgrids: GridItem[][]
+	export let selectedScriptComponentId: string | undefined = undefined
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={subGrid} />
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
new file mode 100644
index 0000000000..e51316d901
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorList from './InlineScriptEditorList.svelte'
+
+	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
+
+	export let gridItems: GridItem[]
+
+	export let selectedScriptComponentId: string | undefined = undefined
+</script>
+
+{gridItems}
+{#if gridItems}
+	{#each gridItems as gridComponent, index (index)}
+		{#if gridComponent.data}
+			{#if gridComponent.data.id === selectedScriptComponentId}
+				<InlineScriptEditorPanel
+					id={gridComponent.data.id}
+					bind:componentInput={gridComponent.data.componentInput}
+				/>
+			{:else if gridComponent.data.subGrids}
+				<!-- <InlineScriptEditorList
+					{selectedScriptComponentId}
+					bind:subgrids={gridComponent.data.subGrids}
+				/> -->
+			{/if}
+
+			{#if gridComponent.data.type === 'tablecomponent'}
+				{#each gridComponent.data.actionButtons as actionButton, index (index)}
+					{#if actionButton.id === selectedScriptComponentId}
+						<InlineScriptEditorPanel
+							id={actionButton.id}
+							bind:componentInput={actionButton.componentInput}
+						/>
+					{/if}
+				{/each}
+			{/if}
+		{/if}
+	{/each}
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index e2bfc11973..bdde083bbe 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -4,11 +4,11 @@
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
-	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
 
-	const { lazyGrid, app, staticOutputs, runnableComponents } =
+	const { app, staticOutputs, runnableComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
@@ -23,25 +23,8 @@
 			{#if !selectedScriptComponentId}
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
-					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
-					/>
-				{/if}
 
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
-						{#if actionButton.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								id={actionButton.id}
-								bind:componentInput={actionButton.componentInput}
-							/>
-						{/if}
-					{/each}
-				{/if}
-			{/each}
+			<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={$app.grid} />
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 129dfac196..126e592387 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -21,7 +21,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 		if (subgrid) {
 			subgrid.forEach((item) => {
 				if (item.data) {
-					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
 				}
 			})
@@ -276,6 +275,8 @@ export function findParent(root: GridItem[], id: string): GridItem | undefined {
 				}
 			}
 		}
+
+
 	}
 
 	return undefined

From 2f78132e081bdf3d7468e022f0e981ebfa52cfb3 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 17:11:53 +0100
Subject: [PATCH 05/35] fix(deno): remove mysql support waiting for deno fix

---
 deno-client/mod.ts                            |  1 -
 .../src/lib/components/ScriptBuilder.svelte   |  4 +--
 .../EmptyInlineScript.svelte                  |  4 +--
 .../flows/content/FlowInputs.svelte           |  4 +--
 frontend/src/lib/script_helpers.ts            | 30 +++++++++----------
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/deno-client/mod.ts b/deno-client/mod.ts
index 41d8860282..0d3ceec648 100644
--- a/deno-client/mod.ts
+++ b/deno-client/mod.ts
@@ -14,7 +14,6 @@ BigInt.prototype.toJSON = function () {
 };
 
 export { pgSql, pgClient } from './pg.ts'
-export { mySql, mysqlClient } from './mysql.ts'
 
 export type Sql = string
 export type Email = string
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 539295c6ea..6e9024249a 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -245,7 +245,7 @@
 					>
 						<LanguageIcon lang="pgsql" /><span class="ml-2 py-4">PostgreSQL</span>
 					</Button>
-					<Button
+					<!-- <Button
 						size="sm"
 						variant="border"
 						color={template == 'mysql' ? 'blue' : 'dark'}
@@ -257,7 +257,7 @@
 						}}
 					>
 						<LanguageIcon lang="mysql" /><span class="ml-2 py-4">MySQL</span>
-					</Button>
+					</Button> -->
 				</div>
 				<div class="mt-16 mb-4">
 					<Button
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index c538b55b51..22347b8867 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -164,13 +164,13 @@
 				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
 			}}
 		/>
-		<FlowScriptPicker
+		<!-- <FlowScriptPicker
 			label={`MySQL`}
 			lang="mysql"
 			on:click={() => {
 				createInlineScriptByLanguage(Script.language.DENO, name, 'mysql')
 			}}
-		/>
+		/> -->
 	</div>
 
 	<div class="mt-4">
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index b7b7755dd1..81a5370228 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -142,12 +142,12 @@
 								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 						/>
 
-						<FlowScriptPicker
+						<!-- <FlowScriptPicker
 							label={`MySQL`}
 							lang="mysql"
 							on:click={() =>
 								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
-						/>
+						/> -->
 					{/if}
 				{/if}
 			</div>
diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index 788ee81ab0..92f75c4158 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -95,22 +95,22 @@ export async function main(
   return query.rows;
 }`
 
-export const MYSQL_INIT_CODE = `import {
-  mySql,
-  type Resource
-} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+// export const MYSQL_INIT_CODE = `import {
+//   mySql,
+//   type Resource
+// } from "https://deno.land/x/windmill@v${__pkg__.version}/mysql.ts";
 
-// MySQL parameterized statement. No SQL injection is possible.
-export async function main(
-  db: Resource<"mysql">,
-  key: number,
-  value: string,
-) {
-  const query = await mySql(
-    db
-  )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
-  return query.rows;
-}`;
+// // MySQL parameterized statement. No SQL injection is possible.
+// export async function main(
+//   db: Resource<"mysql">,
+//   key: number,
+//   value: string,
+// ) {
+//   const query = await mySql(
+//     db
+//   )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
+//   return query.rows;
+// }`;
 
 export const BASH_INIT_CODE = `# arguments of the form X="$I" are parsed as parameters X of type string
 msg="$1"

From dd7e8c742c83f6a1d13e4343ca626c0b5efc06fb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 17:19:13 +0100
Subject: [PATCH 06/35] fix(deno): remove mysql support waiting for deno fix

---
 frontend/src/lib/script_helpers.ts | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index 92f75c4158..c254c43615 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -95,22 +95,22 @@ export async function main(
   return query.rows;
 }`
 
-// export const MYSQL_INIT_CODE = `import {
-//   mySql,
-//   type Resource
-// } from "https://deno.land/x/windmill@v${__pkg__.version}/mysql.ts";
+export const MYSQL_INIT_CODE = `import {
+  mySql,
+  type Resource
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mysql.ts";
 
-// // MySQL parameterized statement. No SQL injection is possible.
-// export async function main(
-//   db: Resource<"mysql">,
-//   key: number,
-//   value: string,
-// ) {
-//   const query = await mySql(
-//     db
-//   )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
-//   return query.rows;
-// }`;
+// MySQL parameterized statement. No SQL injection is possible.
+export async function main(
+  db: Resource<"mysql">,
+  key: number,
+  value: string,
+) {
+  const query = await mySql(
+    db
+  )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
+  return query.rows;
+}`;
 
 export const BASH_INIT_CODE = `# arguments of the form X="$I" are parsed as parameters X of type string
 msg="$1"

From 397ecd64d4e68b698100e3f4d1e8f75baa4502d6 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 17:26:53 +0100
Subject: [PATCH 07/35] chore(main): release 1.69.1 (#1231)

* chore(main): release 1.69.1

* Apply automatic changes

---------

Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>
---
 CHANGELOG.md                          | 11 ++++
 backend/Cargo.lock                    | 76 +++++++++++++++++----------
 backend/Cargo.toml                    |  4 +-
 backend/windmill-api/openapi.yaml     |  2 +-
 cli/main.ts                           |  2 +-
 frontend/package-lock.json            |  4 +-
 frontend/package.json                 |  2 +-
 lsp/Pipfile                           |  4 +-
 openflow.openapi.yaml                 |  2 +-
 python-client/wmill/pyproject.toml    |  4 +-
 python-client/wmill_pg/pyproject.toml |  2 +-
 version.txt                           |  2 +-
 12 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e3da3695f..8e540ef0ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Changelog
 
 
+## [1.69.1](https://github.com/windmill-labs/windmill/compare/v1.69.0...v1.69.1) (2023-02-24)
+
+
+### Bug Fixes
+
+* **deno:** remove mysql support waiting for deno fix ([dd7e8c7](https://github.com/windmill-labs/windmill/commit/dd7e8c742c83f6a1d13e4343ca626c0b5efc06fb))
+* **deno:** remove mysql support waiting for deno fix ([2f78132](https://github.com/windmill-labs/windmill/commit/2f78132e081bdf3d7468e022f0e981ebfa52cfb3))
+* **frontend:** containers and tab fixes v1 ([27cac3f](https://github.com/windmill-labs/windmill/commit/27cac3ffe69c4dac160e9e55ffd1eb8ea348d487))
+* **frontend:** containers and tab fixes v1 ([705703a](https://github.com/windmill-labs/windmill/commit/705703a5e2f2dc7ceb4c215221f72bf624799841))
+* **frontend:** containers and tab fixes v1 ([fac31c6](https://github.com/windmill-labs/windmill/commit/fac31c6628b289ad6aae92434e312c4be281a4d2))
+
 ## [1.69.0](https://github.com/windmill-labs/windmill/compare/v1.68.0...v1.69.0) (2023-02-23)
 
 
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index 7b00928672..ea8739bb24 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -255,9 +255,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
 [[package]]
 name = "axum"
-version = "0.6.7"
+version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2fb79c228270dcf2426e74864cabc94babb5dbab01a4314e702d2f16540e1591"
+checksum = "2bd379e511536bad07447f899300aa526e9bae8e6f66dc5e5ca45d7587b7c1ec"
 dependencies = [
  "async-trait",
  "axum-core",
@@ -282,7 +282,7 @@ dependencies = [
  "sync_wrapper",
  "tokio",
  "tower",
- "tower-http",
+ "tower-http 0.3.5",
  "tower-layer",
  "tower-service",
 ]
@@ -553,9 +553,9 @@ dependencies = [
 
 [[package]]
 name = "clap_lex"
-version = "0.3.1"
+version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "783fe232adfca04f90f56201b26d79682d4cd2625e0bc7290b95123afe558ade"
+checksum = "350b9cf31731f9957399229e9b2adc51eeabdfbe9d71d9a0552275fd12710d09"
 dependencies = [
  "os_str_bytes",
 ]
@@ -987,9 +987,9 @@ dependencies = [
 
 [[package]]
 name = "ena"
-version = "0.14.0"
+version = "0.14.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d7402b94a93c24e742487327a7cd839dc9d36fec9de9fb25b09f2dae459f36c3"
+checksum = "b2e5d13ca2353ab7d0230988629def93914a8c4015f621f9b13ed2955614731d"
 dependencies = [
  "log",
 ]
@@ -2149,18 +2149,18 @@ dependencies = [
 
 [[package]]
 name = "num_enum"
-version = "0.5.10"
+version = "0.5.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3e0072973714303aa6e3631c7e8e777970cf4bdd25dc4932e41031027b8bcc4e"
+checksum = "1f646caf906c20226733ed5b1374287eb97e3c2a5c227ce668c1f2ce20ae57c9"
 dependencies = [
  "num_enum_derive",
 ]
 
 [[package]]
 name = "num_enum_derive"
-version = "0.5.10"
+version = "0.5.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0629cbd6b897944899b1f10496d9c4a7ac5878d45fd61bc22e9e79bfbbc29597"
+checksum = "dcbff9bc912032c62bf65ef1d5aea88983b420f4f839db1e9b0c281a25c9c799"
 dependencies = [
  "proc-macro-crate",
  "proc-macro2",
@@ -3003,7 +3003,7 @@ dependencies = [
 [[package]]
 name = "rustpython-ast"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#c4b67896662b16b5699a779c0e52aa0ca2587fec"
+source = "git+https://github.com/RustPython/RustPython#f51764f8d0c33e8e3b423e8a80dba00926715360"
 dependencies = [
  "num-bigint",
  "rustpython-compiler-core",
@@ -3012,7 +3012,7 @@ dependencies = [
 [[package]]
 name = "rustpython-compiler-core"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#c4b67896662b16b5699a779c0e52aa0ca2587fec"
+source = "git+https://github.com/RustPython/RustPython#f51764f8d0c33e8e3b423e8a80dba00926715360"
 dependencies = [
  "bincode",
  "bitflags",
@@ -3029,7 +3029,7 @@ dependencies = [
 [[package]]
 name = "rustpython-parser"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#c4b67896662b16b5699a779c0e52aa0ca2587fec"
+source = "git+https://github.com/RustPython/RustPython#f51764f8d0c33e8e3b423e8a80dba00926715360"
 dependencies = [
  "ahash",
  "anyhow",
@@ -3823,9 +3823,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "1.0.108"
+version = "1.0.109"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d56e159d99e6c2b93995d171050271edb50ecc5288fbc7cc17de8fdce4e58c14"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4168,6 +4168,24 @@ dependencies = [
  "tower",
  "tower-layer",
  "tower-service",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d1d42a9b3f3ec46ba828e8d376aec14592ea199f70a06a548587ecd1c4ab658"
+dependencies = [
+ "bitflags",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-range-header",
+ "pin-project-lite",
+ "tower-layer",
+ "tower-service",
  "tracing",
 ]
 
@@ -4766,7 +4784,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "axum",
@@ -4793,7 +4811,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "argon2",
@@ -4832,7 +4850,7 @@ dependencies = [
  "tokio-util",
  "tower",
  "tower-cookies",
- "tower-http",
+ "tower-http 0.4.0",
  "tracing",
  "tracing-subscriber",
  "urlencoding",
@@ -4848,7 +4866,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "base64 0.21.0",
  "chrono",
@@ -4863,7 +4881,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "chrono",
  "serde",
@@ -4876,7 +4894,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "axum",
@@ -4901,7 +4919,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "serde",
  "serde_json",
@@ -4909,7 +4927,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4923,7 +4941,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4935,7 +4953,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4950,7 +4968,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "deno_core",
@@ -4964,7 +4982,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "chrono",
@@ -4987,7 +5005,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.69.0"
+version = "1.69.1"
 dependencies = [
  "anyhow",
  "async-recursion",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 9a9bf9e5cb..487d5fc1b4 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.69.0"
+version = "1.69.1"
 authors.workspace = true
 edition.workspace = true
 
@@ -19,7 +19,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.69.0"
+version = "1.69.1"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index d48cf9c1ff..57e65c5054 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.69.0
+  version: 1.69.1
   title: Windmill API
 
   contact:
diff --git a/cli/main.ts b/cli/main.ts
index 54a9876f12..4dc6a96547 100644
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -13,7 +13,7 @@ import sync from "./sync.ts";
 import { tryResolveVersion } from "./context.ts";
 import { GlobalOptions } from "./types.ts";
 
-const VERSION = "v1.69.0";
+const VERSION = "v1.69.1";
 
 let command: any = new Command()
   .name("wmill")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 915eb24f12..9b67ab1c83 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "windmill",
-	"version": "1.69.0",
+	"version": "1.69.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill",
-			"version": "1.69.0",
+			"version": "1.69.1",
 			"dependencies": {
 				"@fortawesome/free-brands-svg-icons": "^6.2.1",
 				"@fortawesome/free-solid-svg-icons": "^6.2.1",
diff --git a/frontend/package.json b/frontend/package.json
index 9072b434fc..821a243de0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill",
-	"version": "1.69.0",
+	"version": "1.69.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/lsp/Pipfile b/lsp/Pipfile
index 43f83192fe..62644c9aff 100644
--- a/lsp/Pipfile
+++ b/lsp/Pipfile
@@ -4,8 +4,8 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-wmill = ">=1.69.0"
-wmill_pg = ">=1.69.0"
+wmill = ">=1.69.1"
+wmill_pg = ">=1.69.1"
 sendgrid = "*"
 mysql-connector-python = "*"
 pymongo = "*"
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index dca7361d63..342c92dd31 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.69.0
+  version: 1.69.1
   title: OpenFlow Spec
   contact:
     name: Ruben Fiszel
diff --git a/python-client/wmill/pyproject.toml b/python-client/wmill/pyproject.toml
index 4ef370df1e..be366244dc 100644
--- a/python-client/wmill/pyproject.toml
+++ b/python-client/wmill/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill"
-version = "1.69.0"
+version = "1.69.1"
 description = "A client library for accessing Windmill server wrapping the Windmill client API"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
@@ -16,7 +16,7 @@ include = ["wmill/py.typed"]
 
 [tool.poetry.dependencies]
 python = "^3.7"
-windmill-api = "^1.69.0"
+windmill-api = "^1.69.1"
 
 [build-system]
 requires = ["poetry>=1.0.2", "poetry-dynamic-versioning"]
diff --git a/python-client/wmill_pg/pyproject.toml b/python-client/wmill_pg/pyproject.toml
index 3ea2ea43cf..f3da0a1739 100644
--- a/python-client/wmill_pg/pyproject.toml
+++ b/python-client/wmill_pg/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill-pg"
-version = "1.69.0"
+version = "1.69.1"
 description = "An extension client for the wmill client library focused on pg"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/version.txt b/version.txt
index 4934985655..41bcd69cfd 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.69.0
+1.69.1

From 4ad6fbefd32c0dc18056c38e5ca0e7d2a4c3fc73 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 15:09:38 +0100
Subject: [PATCH 08/35] flatten

---
 .../apps/editor/SubGridEditor.svelte          |  4 +---
 .../apps/editor/component/components.ts       |  4 ++--
 .../InlineScriptEditorRec.svelte              |  5 ++---
 frontend/src/lib/components/apps/types.ts     | 19 ++++++++++---------
 frontend/src/lib/components/apps/utils.ts     | 11 +----------
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 1e8dabe5a3..02ffba5774 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -6,11 +6,9 @@
 	import type { AppEditorContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 
-	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
-	export let parentId: string
-	export let index: number
+	export let id: string
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 034d6aa07d..a87cc2f03a 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -175,7 +175,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[]]
+			subgrids: 1
 		}
 	},
 	textcomponent: {
@@ -1027,7 +1027,7 @@ Hello \${ctx.username}
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[], []],
+			subgrids: 2,
 			tabs: ['First tab', 'Second tab']
 		}
 	},
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
index e51316d901..cd352557a5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
@@ -9,7 +9,6 @@
 	export let selectedScriptComponentId: string | undefined = undefined
 </script>
 
-{gridItems}
 {#if gridItems}
 	{#each gridItems as gridComponent, index (index)}
 		{#if gridComponent.data}
@@ -19,10 +18,10 @@
 					bind:componentInput={gridComponent.data.componentInput}
 				/>
 			{:else if gridComponent.data.subGrids}
-				<!-- <InlineScriptEditorList
+				<InlineScriptEditorList
 					{selectedScriptComponentId}
 					bind:subgrids={gridComponent.data.subGrids}
-				/> -->
+				/>
 			{/if}
 
 			{#if gridComponent.data.type === 'tablecomponent'}
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 547594602a..8ae0489827 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-			(
-				| StaticAppInput
-				| ConnectedAppInput
-				| UserAppInput
-				| RowAppInput
-				| EvalAppInput
-				| UploadAppInput
-			)
+		(
+			| StaticAppInput
+			| ConnectedAppInput
+			| UserAppInput
+			| RowAppInput
+			| EvalAppInput
+			| UploadAppInput
+		)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -59,7 +59,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	 * *For example when the component has a popup like `Select`*
 	 */
 	softWrap?: boolean
-	subGrids?: GridItem[][]
+	subgrids?: number
 }
 
 export type ComponentSet = {
@@ -99,6 +99,7 @@ export type App = {
 		fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 	}>
 	css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>
+	subgrids?: Record<string, GridItem[]>
 }
 
 export type ConnectingInput = {
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 126e592387..0556219832 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -16,16 +16,7 @@ import type { Output } from './rx'
 import type { App, GridItem } from './types'
 import { getNextId } from '../flows/flowStateUtils'
 
-export function deleteComponent(parentItems: GridItem[] | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
-	(component.subGrids ?? []).forEach((subgrid) => {
-		if (subgrid) {
-			subgrid.forEach((item) => {
-				if (item.data) {
-					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
-				}
-			})
-		}
-	})
+export function deleteComponent(subgrid: string | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
 	if (parentItems) {
 		let index = parentItems.findIndex((item) => item.data?.id === component.id)
 		if (index != -1) {

From ea1b2c29b95282df347ef9c5973917fa3880e843 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 17:17:11 +0100
Subject: [PATCH 09/35] fix(frontend): rewrote utils

---
 .../components/layout/AppContainer.svelte     |  12 +-
 .../components/apps/editor/AppEditor.svelte   |   1 +
 .../apps/editor/SubGridEditor.svelte          |   5 +-
 .../lib/components/apps/editor/appUtils.ts    | 125 ++++++++++++++++++
 .../apps/editor/component/Component.svelte    |   1 -
 .../componentsPanel/ComponentList.svelte      |  20 +--
 .../editor/contextPanel/ContextPanel.svelte   |   4 +-
 .../settingsPanel/ComponentPanel.svelte       |  30 +++--
 .../apps/editor/settingsPanel/GridTab.svelte  |   4 +-
 frontend/src/lib/components/apps/types.ts     |  20 +--
 frontend/src/lib/components/apps/utils.ts     | 125 ++----------------
 11 files changed, 180 insertions(+), 167 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/editor/appUtils.ts

diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index be7d9909d7..aee860292e 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -7,12 +7,12 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
+
 	let noPadding: boolean | undefined = undefined
 
 	export const staticOutputs: string[] = []
-	const { focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 
 	let gridContent: string[] | undefined = undefined
 
@@ -27,15 +27,13 @@
 </script>
 
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-
 <InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-{#if subGrids && subGrids[0]}
+
+{#if $app.subgrids?.[`${id}-0`]}
 	<SubGridEditor
 		{noPadding}
-		bind:subGrid={subGrids[0]}
+		bind:subGrid={$app.subgrids[`${id}-0`]}
 		containerHeight={componentContainerHeight}
-		parentId={id}
-		index={0}
 		on:focus={() => {
 			$selectedComponent = id
 		}}
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 9e17e342d8..6bd55e8b98 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -36,6 +36,7 @@
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { page } from '$app/stores'
 	import CssSettings from './componentsPanel/CssSettings.svelte'
+	import { findGridItem } from './appUtils'
 
 	export let app: App
 	export let path: string
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 02ffba5774..fed2f1b2f7 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -8,7 +8,8 @@
 
 	export let containerHeight: number
 	export let noPadding = false
-	export let id: string
+	//export let id: string
+	export let subGrid: GridItem[] = []
 
 	const dispatch = createEventDispatcher()
 
@@ -36,10 +37,12 @@
 		onComponent = id
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			/*
 			$focusedGrid = {
 				parentComponentId: parentId,
 				subGridIndex: index
 			}
+			*/
 		}
 	}
 
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
new file mode 100644
index 0000000000..675bf52d4e
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -0,0 +1,125 @@
+import { getNextId } from '$lib/components/flows/flowStateUtils'
+import type { App, FocusedGrid, GridItem } from '../types'
+import { getRecommendedDimensionsByComponent, type AppComponent } from './component'
+import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
+import { gridColumns } from '../gridUtils'
+
+function findGridItemById(
+	root: GridItem[],
+	subGrids: Record<string, GridItem[]> | undefined,
+	id: string
+): GridItem | undefined {
+	for (const gridItem of root) {
+		if (gridItem.id === id) {
+			return gridItem
+		}
+
+		if (subGrids) {
+			const numberOfSubgrids = gridItem.data.numberOfSubgrids
+			const subgrids = subGrids[gridItem.id]
+			if (numberOfSubgrids && subgrids) {
+				for (let i = 0; i < numberOfSubgrids; i++) {
+					const subgrid = subgrids[`${gridItem.id}-${i}`]
+					const found = findGridItemById([subgrid], subGrids, id)
+					if (found) {
+						return found
+					}
+				}
+			}
+		}
+	}
+
+	return undefined
+}
+
+export function findGridItem(app: App, id: string): GridItem | undefined {
+	return findGridItemById(app.grid, app.subgrids, id)
+}
+
+export function getNextGridItemId(app: App): string {
+	const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : []
+
+	const newArr = subgridsKeys.map((element) => {
+		const matches = element.match(/^([a-z]+)-\d+$/i)
+		if (matches) {
+			return matches[1]
+		}
+		return element
+	})
+
+	const uniqueArr = [...new Set(newArr)]
+	const mainGridItemsIds = app.grid.map((item) => item.id)
+	const id = getNextId([...mainGridItemsIds, ...uniqueArr])
+
+	return id
+}
+
+export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
+	const appComponent = data
+
+	appComponent.id = id
+
+	const newComponent = {
+		fixed: false,
+		resizable: true,
+		draggable: true,
+		customDragger: false,
+		customResizer: false,
+		x: 0,
+		y: 0
+	}
+
+	let newData: AppComponent = JSON.parse(JSON.stringify(appComponent))
+
+	const newItem: GridItem = {
+		data: newData,
+		id: id
+	}
+
+	gridColumns.forEach((column) => {
+		const rec = getRecommendedDimensionsByComponent(appComponent.type, column)
+
+		newItem[column] = {
+			...newComponent,
+			min: { w: 1, h: 1 },
+			max: { w: column, h: 100 },
+			w: rec.w,
+			h: rec.h
+		}
+		const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number }
+		newItem[column] = { ...newItem[column], ...position }
+	})
+
+	return newItem
+}
+
+export function insertNewGridItem(
+	app: App,
+	data: AppComponent,
+	focusedGrid: FocusedGrid | undefined
+) {
+	const id = getNextGridItemId(app)
+
+	if (!focusedGrid) {
+		const newItem = createNewGridItem(app.grid, id, data)
+		app.grid.push(newItem)
+	} else {
+		const { parentComponentId, subGridIndex } = focusedGrid
+
+		if (!app.subgrids) {
+			app.subgrids = {}
+		}
+
+		const subGrid = app.subgrids[`${parentComponentId}-${subGridIndex}`] ?? []
+		const newItem = createNewGridItem(subGrid, id, data)
+		const key = `${parentComponentId}-${subGridIndex ?? 0}`
+
+		if (!app.subgrids[key]) {
+			app.subgrids[key] = [newItem]
+		} else {
+			app.subgrids[key].push(newItem)
+		}
+	}
+
+	return id
+}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index b599fc67a3..042a10452d 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -203,7 +203,6 @@
 				id={component.id}
 				configuration={component.configuration}
 				tabs={component.tabs}
-				bind:subGrids={component.subGrids}
 				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
 			/>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 8019eaa549..43f67e3ad7 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -1,34 +1,20 @@
 <script lang="ts">
-	import type { AppEditorContext, GridItem } from '../../types'
+	import type { AppEditorContext } from '../../types'
 	import { getContext, onMount } from 'svelte'
-	import { getNextId } from '$lib/components/flows/flowStateUtils'
 	import { isOpenStore } from './store'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import { components as componentsRecord, COMPONENT_SETS, type AppComponent } from '../component'
 	import ListItem from './ListItem.svelte'
-	import { insertNewGridItem, createNewGridItem, getNextGridItemId } from '../../utils'
+	import { insertNewGridItem } from '../appUtils'
 
 	const TITLE_PREFIX = 'Component.' as const
 	const { app, selectedComponent, focusedGrid } = getContext<AppEditorContext>('AppEditorContext')
 
 	function addComponent(appComponentType: AppComponent['type']): void {
-		// When a new component is added, we need to mark the app as dirty,
-		// so a confirmation modal will appear if the user tries to leave the page
 		$dirtyStore = true
 
-		const grid = $app.grid ?? []
-		const id = getNextGridItemId(grid)
-
 		const data = componentsRecord[appComponentType].data
-
-		if ($focusedGrid) {
-			const { parentComponentId, subGridIndex } = $focusedGrid
-
-			$app.grid = insertNewGridItem($app.grid, parentComponentId, subGridIndex, id, data)
-		} else {
-			const newItem = createNewGridItem(grid, id, data)
-			$app.grid = [...grid, newItem]
-		}
+		const id = insertNewGridItem($app, data, $focusedGrid)
 
 		$selectedComponent = id
 	}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 2769b03c59..4c8377f6e6 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -2,7 +2,7 @@
 	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
-	import { findParent } from '../../utils'
+	import { findGridItem } from '../appUtils'
 	import { components } from '../component'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
@@ -27,7 +27,7 @@
 	}
 
 	function getComponentNameById(componentId: string) {
-		const component = findParent($app.grid, componentId)
+		const component = findGridItem($app, componentId)
 
 		if (component?.data.type) {
 			return components[component?.data.type].name
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 3d0341d052..a7cfb5244d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -10,15 +10,7 @@
 	import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import { capitalize, classNames } from '$lib/utils'
-	import {
-		buildExtraLib,
-		createNewGridItem,
-		deleteComponent,
-		fieldTypeToTsType,
-		findParent,
-		getNextGridItemId,
-		insertNewGridItem
-	} from '../../utils'
+	import { buildExtraLib, fieldTypeToTsType } from '../../utils'
 	import Recompute from './Recompute.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte'
@@ -39,7 +31,8 @@
 		getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
-		const parent = findParent($app.grid, id)
+		/*
+		const parent = findGridItem($app.grid, id)
 
 		if (!parent) {
 			return
@@ -61,9 +54,11 @@
 		}
 
 		$selectedComponent = newId
+		*/
 	}
 
 	function removeGridElement() {
+		/*
 		$selectedComponent = undefined
 		$focusedGrid = undefined
 		if (component) {
@@ -73,12 +68,23 @@
 		$runnableComponents = $runnableComponents
 
 		onDelete?.()
+		*/
 	}
 
 	$: extraLib =
 		component?.componentInput?.type === 'template' && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
 			: undefined
+
+	/*
+			
+			
+			
+					{#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)}
+			<GridTab bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
+		{/if}
+
+			*/
 </script>
 
 {#if component}
@@ -164,10 +170,6 @@
 			</PanelSection>
 		{/if}
 
-		{#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)}
-			<GridTab bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
-		{/if}
-
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
 			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index eeb28aa999..1ad97c98e2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -3,7 +3,7 @@
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../../types'
-	import { deleteComponent } from '../../utils'
+	//import { deleteComponent } from '../../utils'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let tabs: string[]
@@ -20,7 +20,7 @@
 	function deleteSubgrid(index: number) {
 		$focusedGrid = undefined
 		subGrids[index].forEach((x) => {
-			deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
+			//deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
 		})
 		tabs.splice(index, 1)
 		subGrids.splice(index, 1)
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 8ae0489827..1e68cc53e6 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-		(
-			| StaticAppInput
-			| ConnectedAppInput
-			| UserAppInput
-			| RowAppInput
-			| EvalAppInput
-			| UploadAppInput
-		)
+			(
+				| StaticAppInput
+				| ConnectedAppInput
+				| UserAppInput
+				| RowAppInput
+				| EvalAppInput
+				| UploadAppInput
+			)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -59,7 +59,8 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	 * *For example when the component has a popup like `Select`*
 	 */
 	softWrap?: boolean
-	subgrids?: number
+	// Number of subgrids
+	numberOfSubgrids?: number
 }
 
 export type ComponentSet = {
@@ -133,7 +134,6 @@ export type AppEditorContext = {
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }
-
 export type EditorMode = 'dnd' | 'preview'
 export type EditorBreakpoint = 'sm' | 'lg'
 
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 0556219832..e6aee2b90b 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -2,21 +2,20 @@ import type { Schema } from '$lib/common'
 import { FlowService, ScriptService } from '$lib/gen'
 import { inferArgs } from '$lib/infer'
 import { emptySchema } from '$lib/utils'
-import type { AppComponent, AppComponentConfig } from './editor/component'
-
-import {
-	components as componentsRecord,
-	getRecommendedDimensionsByComponent
-} from './editor/component'
-import { gridColumns } from './gridUtils'
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
+import type { AppComponent } from './editor/component'
 
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { Output } from './rx'
 import type { App, GridItem } from './types'
-import { getNextId } from '../flows/flowStateUtils'
 
-export function deleteComponent(subgrid: string | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
+/*
+export function deleteComponent(
+	subgrid: string | undefined,
+	component: AppComponent,
+	app: App,
+	staticOutputs: Record<string, any>,
+	runnableComponents: Record<string, any>
+) {
 	if (parentItems) {
 		let index = parentItems.findIndex((item) => item.data?.id === component.id)
 		if (index != -1) {
@@ -45,6 +44,9 @@ export function deleteComponent(subgrid: string | undefined, component: AppCompo
 		}
 	}
 }
+
+*/
+
 export async function loadSchema(
 	workspace: string,
 	path: string,
@@ -247,106 +249,3 @@ export function toPascalCase(text: string) {
 export function toKebabCase(text: string) {
 	return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
 }
-
-export function findParent(root: GridItem[], id: string): GridItem | undefined {
-	if (!root) {
-		return undefined
-	}
-	for (const a of root) {
-		if (a.id === id) {
-			return a
-		}
-
-		if (a.data.subGrids) {
-			// Recursively search the sub-grids
-			for (const subGrid of a.data.subGrids) {
-				const result = findParent(subGrid, id)
-				if (result) {
-					return result
-				}
-			}
-		}
-
-
-	}
-
-	return undefined
-}
-
-export function insertNewGridItem(
-	root: GridItem[],
-	id: string,
-	subGridIndex: number,
-	newId: string,
-	data: AppComponent
-): GridItem[] {
-	const parentA = findParent(root, id)
-
-	if (!parentA) {
-		throw new Error(`Parent A object with ID ${id} not found.`)
-	}
-
-	const subGrid = parentA.data.subGrids[subGridIndex]
-
-	if (!subGrid) {
-		throw new Error(`Sub-grid with index ${subGridIndex} not found.`)
-	}
-
-	const newItem = createNewGridItem(subGrid ?? [], newId, data)
-	subGrid.push(newItem)
-	return root
-}
-
-// The grid is needed to find a space for the new component
-export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
-	const appComponent = data
-
-	appComponent.id = id
-
-	const newComponent = {
-		fixed: false,
-		resizable: true,
-		draggable: true,
-		customDragger: false,
-		customResizer: false,
-		x: 0,
-		y: 0
-	}
-
-	let newData: AppComponent = JSON.parse(JSON.stringify(appComponent))
-
-	const newItem: GridItem = {
-		data: newData,
-		id: id
-	}
-
-	gridColumns.forEach((column) => {
-		const rec = getRecommendedDimensionsByComponent(appComponent.type, column)
-
-		newItem[column] = {
-			...newComponent,
-			min: { w: 1, h: 1 },
-			max: { w: column, h: 100 },
-			w: rec.w,
-			h: rec.h
-		}
-		const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number }
-		newItem[column] = { ...newItem[column], ...position }
-	})
-
-	return newItem
-}
-
-export function recursiveGetIds(gridItem: GridItem): string[] {
-	const subGrids = gridItem.data.subGrids ?? []
-	const subGridIds = subGrids
-		.map((subGrid: GridItem[]) => subGrid?.map(recursiveGetIds) ?? [])
-		.flat(Infinity)
-	return [gridItem.data.id, ...subGridIds]
-}
-
-export function getNextGridItemId(grid: GridItem[] = []): string {
-	const gridItemIds = grid.map(recursiveGetIds).flat()
-	const id = getNextId(gridItemIds)
-	return id
-}

From e08e7e4ae6f0ff7283e65a0cdeebe4386648db4c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 17:49:16 +0100
Subject: [PATCH 10/35] settings panel

---
 .../apps/editor/SettingsPanel.svelte          | 12 ++++++++--
 .../apps/editor/SettingsPanelList.svelte      | 16 -------------
 .../apps/editor/SettingsPanelRec.svelte       | 24 -------------------
 .../components/apps/editor/TablePanel.svelte  |  1 -
 .../settingsPanel/ComponentPanel.svelte       |  1 -
 frontend/src/lib/components/apps/utils.ts     |  7 ++++++
 6 files changed, 17 insertions(+), 44 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
 delete mode 100644 frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index cb2fea28cd..8fb5de5450 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
+	import { allItems } from '../utils'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
+	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
-	import SettingsPanelRec from './SettingsPanelRec.svelte'
+	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
-<SettingsPanelRec bind:gridItems={$app.grid} />
+{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+	{#if gridItem.data.id === $selectedComponent}
+		<ComponentPanel bind:component={gridItem.data} />
+	{:else if gridItem.data.type === 'tablecomponent'}
+		<TablePanel bind:component={gridItem.data} />
+	{/if}
+{/each}
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
deleted file mode 100644
index 1c008db020..0000000000
--- a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { GridItem } from '../types'
-
-	import SettingsPanelRec from './SettingsPanelRec.svelte'
-
-	export let subgrids: GridItem[][]
-
-	let elems = subgrids
-	$: subgrids = elems
-</script>
-
-{#if subgrids}
-	{#each elems as subGrid, i (i)}
-		<SettingsPanelRec bind:gridItems={subGrid} />
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
deleted file mode 100644
index 29dcff7b06..0000000000
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { AppEditorContext, GridItem } from '../types'
-
-	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
-	import SettingsPanelList from './SettingsPanelList.svelte'
-	import TablePanel from './TablePanel.svelte'
-
-	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
-
-	export let gridItems: GridItem[]
-</script>
-
-{#if gridItems}
-	{#each gridItems as gridItem (gridItem.data.id)}
-		{#if gridItem.data.id === $selectedComponent}
-			<ComponentPanel {gridItems} bind:component={gridItem.data} />
-		{:else if gridItem.data.type === 'tablecomponent'}
-			<TablePanel bind:component={gridItem.data} />
-		{:else if gridItem.data.subGrids}
-			<SettingsPanelList bind:subgrids={gridItem.data.subGrids} />
-		{/if}
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index b5a12bb72f..7663f55fc3 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,7 +11,6 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
-			gridItems={undefined}
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index a7cfb5244d..f080618bb9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -24,7 +24,6 @@
 
 	export let component: AppComponent | undefined
 	export let rowColumns = false
-	export let gridItems: GridItem[] | undefined
 	export let onDelete: (() => void) | undefined = undefined
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index e6aee2b90b..1a47caf88d 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -47,6 +47,13 @@ export function deleteComponent(
 
 */
 
+export function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[] {
+	if (subgrids == undefined) {
+		return grid
+	}
+	return [...grid, ...Object.values(subgrids).flat()]
+}
+
 export async function loadSchema(
 	workspace: string,
 	path: string,

From 3387bb0d835733243cfccbcd09d0f94afd11c39c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 17:53:26 +0100
Subject: [PATCH 11/35] script editor panel

---
 .../InlineScriptEditorRec.svelte              | 39 -------------------
 .../InlineScriptsPanel.svelte                 | 23 ++++++++++-
 2 files changed, 21 insertions(+), 41 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte

diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
deleted file mode 100644
index cd352557a5..0000000000
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { GridItem } from '../../types'
-	import InlineScriptEditorList from './InlineScriptEditorList.svelte'
-
-	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
-
-	export let gridItems: GridItem[]
-
-	export let selectedScriptComponentId: string | undefined = undefined
-</script>
-
-{#if gridItems}
-	{#each gridItems as gridComponent, index (index)}
-		{#if gridComponent.data}
-			{#if gridComponent.data.id === selectedScriptComponentId}
-				<InlineScriptEditorPanel
-					id={gridComponent.data.id}
-					bind:componentInput={gridComponent.data.componentInput}
-				/>
-			{:else if gridComponent.data.subGrids}
-				<InlineScriptEditorList
-					{selectedScriptComponentId}
-					bind:subgrids={gridComponent.data.subGrids}
-				/>
-			{/if}
-
-			{#if gridComponent.data.type === 'tablecomponent'}
-				{#each gridComponent.data.actionButtons as actionButton, index (index)}
-					{#if actionButton.id === selectedScriptComponentId}
-						<InlineScriptEditorPanel
-							id={actionButton.id}
-							bind:componentInput={actionButton.componentInput}
-						/>
-					{/if}
-				{/each}
-			{/if}
-		{/if}
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index bdde083bbe..737f2bb6e9 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -6,7 +6,8 @@
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
-	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
+	import { allItems } from '../../utils'
+	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { app, staticOutputs, runnableComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
@@ -24,7 +25,25 @@
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
 
-			<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={$app.grid} />
+			{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+				{#if gridItem.data.id === selectedScriptComponentId}
+					<InlineScriptEditorPanel
+						id={gridItem.data.id}
+						bind:componentInput={gridItem.data.componentInput}
+					/>
+				{/if}
+
+				{#if gridItem.data.type === 'tablecomponent'}
+					{#each gridItem.data.actionButtons as actionButton, index (index)}
+						{#if actionButton.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={actionButton.id}
+								bind:componentInput={actionButton.componentInput}
+							/>
+						{/if}
+					{/each}
+				{/if}
+			{/each}
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor

From 008c30fcaad64af512407f9889a9881fafac0868 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 17:56:47 +0100
Subject: [PATCH 12/35] fix(frontend): delete grid item

---
 .../apps/components/layout/AppTabs.svelte     | 10 +++----
 .../lib/components/apps/editor/appUtils.ts    | 28 +++++++++++++++++++
 .../apps/editor/component/Component.svelte    |  4 +--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 8700c4bfad..2e2e9eff88 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -8,14 +8,13 @@
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
-
 	export let configuration: Record<string, AppInput>
 	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
 	export let tabs: string[]
 
 	export const staticOutputs: string[] = ['selectedTabIndex']
-	const { worldStore, focusedGrid, selectedComponent } =
+	const { app, worldStore, focusedGrid, selectedComponent } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	let selected: string = ''
@@ -36,6 +35,7 @@
 	}
 
 	$: selectedIndex >= 0 && handleTabSelection()
+
 	let tabHeight: number = 0
 
 	function onFocus() {
@@ -62,12 +62,10 @@
 			{/each}
 		</Tabs>
 	</div>
-	{#if subGrids && subGrids[selectedIndex]}
+	{#if $app.subgrids?.[`${id}-${selectedIndex}`]}
 		<SubGridEditor
-			parentId={id}
-			index={selectedIndex}
+			bind:subGrid={$app.subgrids[`${id}-${selectedIndex}`]}
 			{noPadding}
-			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}
 			on:focus={() => {
 				$selectedComponent = id
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 675bf52d4e..4afe2f84aa 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -123,3 +123,31 @@ export function insertNewGridItem(
 
 	return id
 }
+
+export function deleteGridItem(app: App, id: string) {
+	const index = app.grid.findIndex((item) => item.id === id)
+	if (index !== -1) {
+		app.grid.splice(index, 1)
+		return
+	}
+
+	const gridItem = findGridItem(app, id)
+	const keys = Object.keys(app.subgrids ?? {})
+
+	if (app.subgrids) {
+		if (keys.includes(id)) {
+			for (let i = 0; i < gridItem?.data.numberOfSubgrids; i++) {
+				delete app.subgrids[`${id}-${i}`]
+			}
+		} else {
+			for (const key of keys) {
+				const subgrid = app.subgrids[key]
+				const index = subgrid.findIndex((item) => item.id === id)
+				if (index !== -1) {
+					subgrid.splice(index, 1)
+					return
+				}
+			}
+		}
+	}
+}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 042a10452d..aa1df588a7 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -200,9 +200,7 @@
 			<AppRangeInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'tabscomponent'}
 			<AppTabs
-				id={component.id}
-				configuration={component.configuration}
-				tabs={component.tabs}
+				{...component}
 				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
 			/>

From 483407cdf0e1ed61de180a904934e950fed4adc3 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 18:04:31 +0100
Subject: [PATCH 13/35] fix(frontend): duplicate

---
 .../lib/components/apps/editor/appUtils.ts    | 17 ++++++++++++
 .../settingsPanel/ComponentPanel.svelte       | 26 ++-----------------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 4afe2f84aa..de65b3449f 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -151,3 +151,20 @@ export function deleteGridItem(app: App, id: string) {
 		}
 	}
 }
+
+export function duplicateGridItem(
+	app: App,
+	focusedGrid: FocusedGrid,
+	id: string
+): string | undefined {
+	const gridItem = findGridItem(app, id)
+	if (gridItem) {
+		const newId = getNextGridItemId(app)
+		const newItem = JSON.parse(JSON.stringify(gridItem))
+		newItem.id = newId
+		newItem.data.id = newId
+
+		return insertNewGridItem(app, newItem.data, focusedGrid)
+	}
+	return undefined
+}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index f080618bb9..8bb4b45eff 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -21,6 +21,7 @@
 	import CssProperty from '../componentsPanel/CssProperty.svelte'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import GridTab from './GridTab.svelte'
+	import { duplicateGridItem } from '../appUtils'
 
 	export let component: AppComponent | undefined
 	export let rowColumns = false
@@ -30,30 +31,7 @@
 		getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
-		/*
-		const parent = findGridItem($app.grid, id)
-
-		if (!parent) {
-			return
-		}
-
-		const data: AppComponent = JSON.parse(JSON.stringify(parent.data))
-		$dirtyStore = true
-
-		const grid = $app.grid ?? []
-		const newId = getNextGridItemId(grid)
-
-		if ($focusedGrid) {
-			const { parentComponentId, subGridIndex } = $focusedGrid
-
-			$app.grid = insertNewGridItem($app.grid, parentComponentId, subGridIndex, newId, data)
-		} else {
-			const newItem = createNewGridItem(grid, newId, data)
-			$app.grid = [...grid, newItem]
-		}
-
-		$selectedComponent = newId
-		*/
+		$selectedComponent = duplicateGridItem($app, $focusedGrid, id)
 	}
 
 	function removeGridElement() {

From fa105b4caeaa2d0e9704a48f6caf8d846839c23e Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 18:44:16 +0100
Subject: [PATCH 14/35] fix(frontend): gridtab

---
 .../apps/components/layout/AppTabs.svelte     |  1 -
 .../lib/components/apps/editor/appUtils.ts    | 19 +++++-----------
 .../apps/editor/component/components.ts       |  8 +++----
 .../settingsPanel/ComponentPanel.svelte       | 18 ++++++---------
 .../apps/editor/settingsPanel/GridTab.svelte  | 22 +++++++++++++------
 5 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 2e2e9eff88..8824e89469 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,7 +46,6 @@
 	}
 
 	$: $selectedComponent === id && selectedIndex >= 0 && onFocus()
-	$: console.log(subGrids)
 </script>
 
 <InputValue {id} input={configuration.tabs} bind:value={tabs} />
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index de65b3449f..f5ba678c81 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -21,6 +21,7 @@ function findGridItemById(
 				for (let i = 0; i < numberOfSubgrids; i++) {
 					const subgrid = subgrids[`${gridItem.id}-${i}`]
 					const found = findGridItemById([subgrid], subGrids, id)
+
 					if (found) {
 						return found
 					}
@@ -37,19 +38,11 @@ export function findGridItem(app: App, id: string): GridItem | undefined {
 }
 
 export function getNextGridItemId(app: App): string {
-	const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : []
+	const all: string[] = []
 
-	const newArr = subgridsKeys.map((element) => {
-		const matches = element.match(/^([a-z]+)-\d+$/i)
-		if (matches) {
-			return matches[1]
-		}
-		return element
-	})
-
-	const uniqueArr = [...new Set(newArr)]
-	const mainGridItemsIds = app.grid.map((item) => item.id)
-	const id = getNextId([...mainGridItemsIds, ...uniqueArr])
+	const newArr = all.map((element) => element.split('-')[0])
+	const k: string[] = [...new Set(newArr)]
+	const id = getNextId(k)
 
 	return id
 }
@@ -154,7 +147,7 @@ export function deleteGridItem(app: App, id: string) {
 
 export function duplicateGridItem(
 	app: App,
-	focusedGrid: FocusedGrid,
+	focusedGrid: FocusedGrid | undefined,
 	id: string
 ): string | undefined {
 	const gridItem = findGridItem(app, id)
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index a87cc2f03a..39fc5c1934 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -152,7 +152,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			configuration: {},
 			customCss: {
 				header: { class: '', style: '' },
-				container: { class: '', style: '' },
+				container: { class: '', style: '' }
 			} as const,
 			card: false
 		}
@@ -175,7 +175,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			},
 			componentInput: undefined,
 			card: false,
-			subgrids: 1
+			numberOfSubgrids: 1
 		}
 	},
 	textcomponent: {
@@ -1027,7 +1027,7 @@ Hello \${ctx.username}
 			},
 			componentInput: undefined,
 			card: false,
-			subgrids: 2,
+			numberOfSubgrids: 2,
 			tabs: ['First tab', 'Second tab']
 		}
 	},
@@ -1200,4 +1200,4 @@ Hello \${ctx.username}
 			card: false
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 8bb4b45eff..2a5b381ade 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -31,7 +31,9 @@
 		getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
-		$selectedComponent = duplicateGridItem($app, $focusedGrid, id)
+		$dirtyStore = true
+		const newId = duplicateGridItem($app, $focusedGrid, id)
+		$selectedComponent = newId
 	}
 
 	function removeGridElement() {
@@ -52,16 +54,6 @@
 		component?.componentInput?.type === 'template' && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
 			: undefined
-
-	/*
-			
-			
-			
-					{#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)}
-			<GridTab bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
-		{/if}
-
-			*/
 </script>
 
 {#if component}
@@ -147,6 +139,10 @@
 			</PanelSection>
 		{/if}
 
+		{#if component.type === 'tabscomponent'}
+			<GridTab bind:tabs={component.tabs} {component} />
+		{/if}
+
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
 			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 1ad97c98e2..5c9728d679 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -2,22 +2,29 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, GridItem } from '../../types'
-	//import { deleteComponent } from '../../utils'
+	import type { AppEditorContext } from '../../types'
+	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let tabs: string[]
-	export let subGrids: GridItem[][]
+	export let component: AppComponent
 
-	const { runnableComponents, staticOutputs, app, focusedGrid } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	function addTab() {
-		tabs = [...tabs, `Tab ${tabs.length + 1}`]
-		subGrids = [...subGrids, []]
+		const numberOfTabs = tabs.length
+		tabs = [...tabs, `Tab ${numberOfTabs + 1}`]
+
+		if (!$app.subgrids) {
+			$app.subgrids = {}
+		}
+
+		$app.subgrids[`${component.id}-${numberOfTabs}`] = []
+		component.numberOfSubgrids = tabs.length
 	}
 
 	function deleteSubgrid(index: number) {
+		/*
 		$focusedGrid = undefined
 		subGrids[index].forEach((x) => {
 			//deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
@@ -29,6 +36,7 @@
 		$app.grid = $app.grid
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
+		*/
 	}
 </script>
 

From b3ee74701408e66519f7cc4a76d9b97a41c2c651 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 18:42:42 +0100
Subject: [PATCH 15/35] pushed

---
 .../apps/editor/SettingsPanel.svelte          |  6 +-
 .../components/apps/editor/TablePanel.svelte  |  2 +
 .../lib/components/apps/editor/appUtils.ts    | 58 ++++++++++++-------
 .../settingsPanel/ComponentPanel.svelte       | 19 ++++--
 frontend/src/lib/components/apps/utils.ts     |  8 +++
 5 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 8fb5de5450..5d85421028 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
-	import { allItems } from '../utils'
+	import { allItems, allItemsWithParent } from '../utils'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
@@ -10,9 +10,9 @@
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
-{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+{#each allItemsWithParent($app.grid, $app.subgrids) as [gridItem, parent] (gridItem.data.id)}
 	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
+		<ComponentPanel {parent} bind:component={gridItem.data} />
 	{:else if gridItem.data.type === 'tablecomponent'}
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index 7663f55fc3..6ef87d7760 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,6 +11,8 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
+			parent={undefined}
+			noGrid
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index f5ba678c81..100883b18a 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -1,6 +1,6 @@
 import { getNextId } from '$lib/components/flows/flowStateUtils'
 import type { App, FocusedGrid, GridItem } from '../types'
-import { getRecommendedDimensionsByComponent, type AppComponent } from './component'
+import { Component, getRecommendedDimensionsByComponent, type AppComponent } from './component'
 import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 import { gridColumns } from '../gridUtils'
 
@@ -117,32 +117,48 @@ export function insertNewGridItem(
 	return id
 }
 
-export function deleteGridItem(app: App, id: string) {
-	const index = app.grid.findIndex((item) => item.id === id)
-	if (index !== -1) {
-		app.grid.splice(index, 1)
-		return
-	}
 
-	const gridItem = findGridItem(app, id)
-	const keys = Object.keys(app.subgrids ?? {})
 
-	if (app.subgrids) {
-		if (keys.includes(id)) {
-			for (let i = 0; i < gridItem?.data.numberOfSubgrids; i++) {
-				delete app.subgrids[`${id}-${i}`]
-			}
-		} else {
-			for (const key of keys) {
-				const subgrid = app.subgrids[key]
-				const index = subgrid.findIndex((item) => item.id === id)
-				if (index !== -1) {
-					subgrid.splice(index, 1)
-					return
+export function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]] {
+	const subgrids: string[] = []
+	let components: string[] = [component.id]
+	if (app.subgrids && component.numberOfSubgrids) {
+		for (let i = 0; i < component.numberOfSubgrids; i++) {
+			const subgrid = app.subgrids[`${component.id}-${i}`]
+			if (subgrid) {
+				for (const item of subgrid) {
+					let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data)
+					subgrids.push(...recSubgrids)
+					components.push(...recComponents)
 				}
 			}
 		}
 	}
+	return [subgrids, components]
+}
+
+export function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[] {
+	let [subgrids, components] = getAllSubgridsAndComponentIds(app, component)
+	if (app.subgrids) {
+		subgrids.forEach((id) => {
+			delete app.subgrids![id]
+		})
+	}
+	if (!parent) {
+		let index = app.grid.findIndex((x) => x.id == component.id)
+		if (index > -1) {
+			app.grid.splice(index, 1)
+		}
+	} else {
+		let grid = app.subgrids![parent]
+		let index = grid.findIndex((x) => x.id == component.id)
+		if (index > -1) {
+			grid.splice(index, 1)
+		}
+	}
+
+	return components
+
 }
 
 export function duplicateGridItem(
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 2a5b381ade..623885de87 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -22,10 +22,13 @@
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import GridTab from './GridTab.svelte'
 	import { duplicateGridItem } from '../appUtils'
+	import { deleteGridItem } from '../appUtils'
 
-	export let component: AppComponent | undefined
+	export let component: AppComponent
 	export let rowColumns = false
 	export let onDelete: (() => void) | undefined = undefined
+	export let parent: string | undefined
+	export let noGrid = false
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
 		getContext<AppEditorContext>('AppEditorContext')
@@ -37,17 +40,23 @@
 	}
 
 	function removeGridElement() {
-		/*
 		$selectedComponent = undefined
 		$focusedGrid = undefined
-		if (component) {
-			deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents)
+		if (component && !noGrid) {
+			let ids = deleteGridItem($app, component, parent)
+			for (const key in ids) {
+				delete $staticOutputs[key]
+				delete $runnableComponents[key]
+			}
 		}
+
+		delete $staticOutputs[component.id]
+		delete $runnableComponents[component.id]
+		$app = $app
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 
 		onDelete?.()
-		*/
 	}
 
 	$: extraLib =
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 1a47caf88d..55238c81eb 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -54,6 +54,14 @@ export function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]>
 	return [...grid, ...Object.values(subgrids).flat()]
 }
 
+export function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][] {
+	const items: [GridItem, string | undefined][] = grid.map((item) => [item, undefined])
+	if (subgrids == undefined) {
+		return items
+	}
+	return [...items, ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k] as [GridItem, string]))]
+}
+
 export async function loadSchema(
 	workspace: string,
 	path: string,

From 33ebe2da8e81476be62a2567d5012573a8a010b6 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 18:49:06 +0100
Subject: [PATCH 16/35] fix(frontend): wip

---
 .../lib/components/apps/editor/appUtils.ts    | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 100883b18a..42385872d1 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -38,11 +38,19 @@ export function findGridItem(app: App, id: string): GridItem | undefined {
 }
 
 export function getNextGridItemId(app: App): string {
-	const all: string[] = []
+	const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : []
 
-	const newArr = all.map((element) => element.split('-')[0])
-	const k: string[] = [...new Set(newArr)]
-	const id = getNextId(k)
+	const newArr = subgridsKeys.map((element) => {
+		const matches = element.match(/^([a-z]+)-\d+$/i)
+		if (matches) {
+			return matches[1]
+		}
+		return element
+	})
+
+	const uniqueArr = [...new Set(newArr)]
+	const mainGridItemsIds = app.grid.map((item) => item.id)
+	const id = getNextId([...mainGridItemsIds, ...uniqueArr])
 
 	return id
 }
@@ -117,9 +125,10 @@ export function insertNewGridItem(
 	return id
 }
 
-
-
-export function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]] {
+export function getAllSubgridsAndComponentIds(
+	app: App,
+	component: AppComponent
+): [string[], string[]] {
 	const subgrids: string[] = []
 	let components: string[] = [component.id]
 	if (app.subgrids && component.numberOfSubgrids) {
@@ -137,7 +146,11 @@ export function getAllSubgridsAndComponentIds(app: App, component: AppComponent)
 	return [subgrids, components]
 }
 
-export function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[] {
+export function deleteGridItem(
+	app: App,
+	component: AppComponent,
+	parent: string | undefined
+): string[] {
 	let [subgrids, components] = getAllSubgridsAndComponentIds(app, component)
 	if (app.subgrids) {
 		subgrids.forEach((id) => {
@@ -158,7 +171,6 @@ export function deleteGridItem(app: App, component: AppComponent, parent: string
 	}
 
 	return components
-
 }
 
 export function duplicateGridItem(

From 8ddcf4d9c1a8d6dd20ee241a3f308811c49e58f1 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 18:51:50 +0100
Subject: [PATCH 17/35] fix(frontend): Fix next id

---
 .../src/lib/components/apps/editor/appUtils.ts  | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 42385872d1..e626ff8201 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -3,6 +3,7 @@ import type { App, FocusedGrid, GridItem } from '../types'
 import { Component, getRecommendedDimensionsByComponent, type AppComponent } from './component'
 import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 import { gridColumns } from '../gridUtils'
+import { allItems } from '../utils'
 
 function findGridItemById(
 	root: GridItem[],
@@ -38,19 +39,9 @@ export function findGridItem(app: App, id: string): GridItem | undefined {
 }
 
 export function getNextGridItemId(app: App): string {
-	const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : []
-
-	const newArr = subgridsKeys.map((element) => {
-		const matches = element.match(/^([a-z]+)-\d+$/i)
-		if (matches) {
-			return matches[1]
-		}
-		return element
-	})
-
-	const uniqueArr = [...new Set(newArr)]
-	const mainGridItemsIds = app.grid.map((item) => item.id)
-	const id = getNextId([...mainGridItemsIds, ...uniqueArr])
+	const subgridsKeys = allItems(app.grid, app.subgrids).map((x) => x.id)
+	const withoutDash = subgridsKeys.map((element) => element.split('-')[0])
+	const id = getNextId([...new Set(withoutDash)])
 
 	return id
 }

From 5bb77edf45740a75e969b1bef31580271c9d5505 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 19:00:41 +0100
Subject: [PATCH 18/35] fix(frontend): Fix findGridItem

---
 frontend/src/lib/components/apps/editor/appUtils.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index e626ff8201..d16f93058b 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -17,11 +17,11 @@ function findGridItemById(
 
 		if (subGrids) {
 			const numberOfSubgrids = gridItem.data.numberOfSubgrids
-			const subgrids = subGrids[gridItem.id]
-			if (numberOfSubgrids && subgrids) {
+
+			if (numberOfSubgrids) {
 				for (let i = 0; i < numberOfSubgrids; i++) {
-					const subgrid = subgrids[`${gridItem.id}-${i}`]
-					const found = findGridItemById([subgrid], subGrids, id)
+					const subgrid = subGrids[`${gridItem.id}-${i}`]
+					const found = findGridItemById(subgrid, subGrids, id)
 
 					if (found) {
 						return found

From 897e2f6b5305bf3edaeb281c1da2bce235478992 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 18:52:01 +0100
Subject: [PATCH 19/35] flatten

---
 .../InlineScriptEditorList.svelte                | 16 ----------------
 .../InlineScriptEditorPanel.svelte               |  2 +-
 2 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte

diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
deleted file mode 100644
index 612e3af4ce..0000000000
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorList.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { GridItem } from '../../types'
-	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
-
-	export let subgrids: GridItem[][]
-	export let selectedScriptComponentId: string | undefined = undefined
-
-	let elems = subgrids
-	$: subgrids = elems
-</script>
-
-{#if subgrids}
-	{#each elems as subGrid, i (i)}
-		<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={subGrid} />
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index 30c8f715fe..43401b6fa7 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -8,7 +8,7 @@
 	import { emptySchema, getScriptByPath } from '$lib/utils'
 	import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons'
 	import type { AppInput, RunnableByPath } from '../../inputType'
-	import { clearResultAppInput, schemaToInputsSpec } from '../../utils'
+	import { clearResultAppInput } from '../../utils'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import { computeFields } from './utils'

From a8295d0b5acd08cec42b7939d907df5c25132644 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 24 Feb 2023 19:04:33 +0100
Subject: [PATCH 20/35] fix(frontend): Fix findGridItem

---
 frontend/src/lib/components/apps/editor/appUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index d16f93058b..97e5cd46cf 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -20,7 +20,7 @@ function findGridItemById(
 
 			if (numberOfSubgrids) {
 				for (let i = 0; i < numberOfSubgrids; i++) {
-					const subgrid = subGrids[`${gridItem.id}-${i}`]
+					const subgrid = subGrids[`${gridItem.id}-${i}`] ?? []
 					const found = findGridItemById(subgrid, subGrids, id)
 
 					if (found) {

From 833c2655eaccdc8143b6046ef329f5f5998412f2 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 19:16:04 +0100
Subject: [PATCH 21/35] push

---
 .../apps/editor/SettingsPanel.svelte          | 17 +++++++++++--
 .../apps/editor/settingsPanel/GridTab.svelte  | 24 +++++++++----------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 5d85421028..0c4785e17e 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -8,16 +8,29 @@
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
+	$: subgridKeys = Object.keys($app.subgrids ?? {})
 </script>
 
-{#each allItemsWithParent($app.grid, $app.subgrids) as [gridItem, parent] (gridItem.data.id)}
+{#each $app.grid as gridItem (gridItem.data.id)}
 	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel {parent} bind:component={gridItem.data} />
+		<ComponentPanel parent={undefined} bind:component={gridItem.data} />
 	{:else if gridItem.data.type === 'tablecomponent'}
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
 {/each}
 
+{#if $app.subgrids}
+	{#each subgridKeys as key (key)}
+		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+			{#if gridItem.data.id === $selectedComponent}
+				<ComponentPanel parent={key} bind:component={gridItem.data} />
+			{:else if gridItem.data.type === 'tablecomponent'}
+				<TablePanel bind:component={gridItem.data} />
+			{/if}
+		{/each}
+	{/each}
+{/if}
+
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
 		<PanelSection title={`Background script inputs`}>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 5c9728d679..904ded4a6c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -3,13 +3,15 @@
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
+	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let tabs: string[]
 	export let component: AppComponent
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, staticOutputs, runnableComponents } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	function addTab() {
 		const numberOfTabs = tabs.length
@@ -24,19 +26,17 @@
 	}
 
 	function deleteSubgrid(index: number) {
-		/*
-		$focusedGrid = undefined
-		subGrids[index].forEach((x) => {
-			//deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
-		})
 		tabs.splice(index, 1)
-		subGrids.splice(index, 1)
 		tabs = tabs
-		subGrids = subGrids
-		$app.grid = $app.grid
-		$staticOutputs = $staticOutputs
-		$runnableComponents = $runnableComponents
-		*/
+		let subgrid = `${component.id}-${index}`
+		for (const item of $app!.subgrids![subgrid]) {
+			const components = deleteGridItem($app, item.data, subgrid)
+			for (const key in components) {
+				delete $staticOutputs[key]
+				delete $runnableComponents[key]
+			}
+		}
+		delete $app!.subgrids![subgrid]
 	}
 </script>
 

From dd28308c3cf1877ba3f19dcd2bd20bf1c7896a99 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 19:52:06 +0100
Subject: [PATCH 22/35] fix(app): fix all nested behavior

---
 .../apps/components/layout/AppTabs.svelte     |  1 -
 .../apps/editor/SettingsPanel.svelte          |  3 +--
 .../lib/components/apps/editor/appUtils.ts    | 27 ++++++++++---------
 .../InlineScriptsPanel.svelte                 | 27 ++++++++++++++++++-
 .../settingsPanel/ComponentPanel.svelte       |  2 +-
 .../apps/editor/settingsPanel/GridTab.svelte  | 13 ++++++---
 6 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 8824e89469..bbd9f71148 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -9,7 +9,6 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
 	export let tabs: string[]
 
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 0c4785e17e..2be73682a4 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -8,7 +8,6 @@
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
-	$: subgridKeys = Object.keys($app.subgrids ?? {})
 </script>
 
 {#each $app.grid as gridItem (gridItem.data.id)}
@@ -20,7 +19,7 @@
 {/each}
 
 {#if $app.subgrids}
-	{#each subgridKeys as key (key)}
+	{#each Object.keys($app.subgrids ?? {}) as key (key)}
 		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
 			{#if gridItem.data.id === $selectedComponent}
 				<ComponentPanel parent={key} bind:component={gridItem.data} />
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 97e5cd46cf..763dd96df6 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -92,25 +92,26 @@ export function insertNewGridItem(
 ) {
 	const id = getNextGridItemId(app)
 
+	if (!app.subgrids) {
+		app.subgrids = {}
+	}
+
 	if (!focusedGrid) {
 		const newItem = createNewGridItem(app.grid, id, data)
 		app.grid.push(newItem)
 	} else {
 		const { parentComponentId, subGridIndex } = focusedGrid
 
-		if (!app.subgrids) {
-			app.subgrids = {}
-		}
-
-		const subGrid = app.subgrids[`${parentComponentId}-${subGridIndex}`] ?? []
-		const newItem = createNewGridItem(subGrid, id, data)
 		const key = `${parentComponentId}-${subGridIndex ?? 0}`
 
-		if (!app.subgrids[key]) {
-			app.subgrids[key] = [newItem]
-		} else {
-			app.subgrids[key].push(newItem)
-		}
+		const subGrid = app.subgrids[key] ?? []
+		subGrid.push(createNewGridItem(subGrid, id, data))
+		app.subgrids[key] = subGrid
+
+
+	}
+	for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+		app.subgrids[`${id}-${i}`] = []
 	}
 
 	return id
@@ -124,8 +125,10 @@ export function getAllSubgridsAndComponentIds(
 	let components: string[] = [component.id]
 	if (app.subgrids && component.numberOfSubgrids) {
 		for (let i = 0; i < component.numberOfSubgrids; i++) {
-			const subgrid = app.subgrids[`${component.id}-${i}`]
+			const key = `${component.id}-${i}`
+			const subgrid = app.subgrids[key]
 			if (subgrid) {
+				subgrids.push(key)
 				for (const item of subgrid) {
 					let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data)
 					subgrids.push(...recSubgrids)
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 737f2bb6e9..2cbdf0fcb6 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -25,7 +25,7 @@
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
 
-			{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+			{#each $app.grid as gridItem (gridItem.data.id)}
 				{#if gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
 						id={gridItem.data.id}
@@ -44,6 +44,31 @@
 					{/each}
 				{/if}
 			{/each}
+
+			{#if $app.subgrids}
+				{#each Object.keys($app.subgrids ?? {}) as key (key)}
+					{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+						{#if gridItem.data.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={gridItem.data.id}
+								bind:componentInput={gridItem.data.componentInput}
+							/>
+						{/if}
+
+						{#if gridItem.data.type === 'tablecomponent'}
+							{#each gridItem.data.actionButtons as actionButton, index (index)}
+								{#if actionButton.id === selectedScriptComponentId}
+									<InlineScriptEditorPanel
+										id={actionButton.id}
+										bind:componentInput={actionButton.componentInput}
+									/>
+								{/if}
+							{/each}
+						{/if}
+					{/each}
+				{/each}
+			{/if}
+
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 623885de87..29ec777575 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -44,7 +44,7 @@
 		$focusedGrid = undefined
 		if (component && !noGrid) {
 			let ids = deleteGridItem($app, component, parent)
-			for (const key in ids) {
+			for (const key of ids) {
 				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 904ded4a6c..0c02d96e6a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -26,17 +26,24 @@
 	}
 
 	function deleteSubgrid(index: number) {
-		tabs.splice(index, 1)
-		tabs = tabs
 		let subgrid = `${component.id}-${index}`
 		for (const item of $app!.subgrids![subgrid]) {
 			const components = deleteGridItem($app, item.data, subgrid)
+			console.log(components)
 			for (const key in components) {
 				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
 		}
-		delete $app!.subgrids![subgrid]
+		$staticOutputs = $staticOutputs
+		$runnableComponents = $runnableComponents
+		for (let i = index; i < tabs.length - 1; i++) {
+			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]
+		}
+		tabs.splice(index, 1)
+		tabs = tabs
+		component.numberOfSubgrids = tabs.length
+		$app = $app
 	}
 </script>
 

From a4e3f98b7d9aadae967ad371a1adc33f71b5dd3c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 19:57:50 +0100
Subject: [PATCH 23/35] chore(main): release 1.69.2 (#1233)

* chore(main): release 1.69.2

* Apply automatic changes

---------

Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>
---
 CHANGELOG.md                          | 15 +++++++++++++++
 backend/Cargo.lock                    | 24 ++++++++++++------------
 backend/Cargo.toml                    |  4 ++--
 backend/windmill-api/openapi.yaml     |  2 +-
 cli/main.ts                           |  2 +-
 frontend/package-lock.json            |  4 ++--
 frontend/package.json                 |  2 +-
 lsp/Pipfile                           |  4 ++--
 openflow.openapi.yaml                 |  2 +-
 python-client/wmill/pyproject.toml    |  4 ++--
 python-client/wmill_pg/pyproject.toml |  2 +-
 version.txt                           |  2 +-
 12 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e540ef0ee..402f7d5499 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,21 @@
 # Changelog
 
 
+## [1.69.2](https://github.com/windmill-labs/windmill/compare/v1.69.1...v1.69.2) (2023-02-24)
+
+
+### Bug Fixes
+
+* **app:** fix all nested behavior ([dd28308](https://github.com/windmill-labs/windmill/commit/dd28308c3cf1877ba3f19dcd2bd20bf1c7896a99))
+* **frontend:** delete grid item ([008c30f](https://github.com/windmill-labs/windmill/commit/008c30fcaad64af512407f9889a9881fafac0868))
+* **frontend:** duplicate ([483407c](https://github.com/windmill-labs/windmill/commit/483407cdf0e1ed61de180a904934e950fed4adc3))
+* **frontend:** Fix findGridItem ([a8295d0](https://github.com/windmill-labs/windmill/commit/a8295d0b5acd08cec42b7939d907df5c25132644))
+* **frontend:** Fix findGridItem ([5bb77ed](https://github.com/windmill-labs/windmill/commit/5bb77edf45740a75e969b1bef31580271c9d5505))
+* **frontend:** Fix next id ([8ddcf4d](https://github.com/windmill-labs/windmill/commit/8ddcf4d9c1a8d6dd20ee241a3f308811c49e58f1))
+* **frontend:** gridtab ([fa105b4](https://github.com/windmill-labs/windmill/commit/fa105b4caeaa2d0e9704a48f6caf8d846839c23e))
+* **frontend:** rewrote utils ([ea1b2c2](https://github.com/windmill-labs/windmill/commit/ea1b2c29b95282df347ef9c5973917fa3880e843))
+* **frontend:** wip ([33ebe2d](https://github.com/windmill-labs/windmill/commit/33ebe2da8e81476be62a2567d5012573a8a010b6))
+
 ## [1.69.1](https://github.com/windmill-labs/windmill/compare/v1.69.0...v1.69.1) (2023-02-24)
 
 
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index ea8739bb24..50be07df5b 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -4784,7 +4784,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "axum",
@@ -4811,7 +4811,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "argon2",
@@ -4866,7 +4866,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "base64 0.21.0",
  "chrono",
@@ -4881,7 +4881,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "chrono",
  "serde",
@@ -4894,7 +4894,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "axum",
@@ -4919,7 +4919,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -4927,7 +4927,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4941,7 +4941,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4953,7 +4953,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4968,7 +4968,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "deno_core",
@@ -4982,7 +4982,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "chrono",
@@ -5005,7 +5005,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.69.1"
+version = "1.69.2"
 dependencies = [
  "anyhow",
  "async-recursion",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 487d5fc1b4..c6cc851f15 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.69.1"
+version = "1.69.2"
 authors.workspace = true
 edition.workspace = true
 
@@ -19,7 +19,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.69.1"
+version = "1.69.2"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 57e65c5054..a47cb9a350 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.69.1
+  version: 1.69.2
   title: Windmill API
 
   contact:
diff --git a/cli/main.ts b/cli/main.ts
index 4dc6a96547..32e6c54776 100644
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -13,7 +13,7 @@ import sync from "./sync.ts";
 import { tryResolveVersion } from "./context.ts";
 import { GlobalOptions } from "./types.ts";
 
-const VERSION = "v1.69.1";
+const VERSION = "v1.69.2";
 
 let command: any = new Command()
   .name("wmill")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9b67ab1c83..94a0cb1c39 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "windmill",
-	"version": "1.69.1",
+	"version": "1.69.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill",
-			"version": "1.69.1",
+			"version": "1.69.2",
 			"dependencies": {
 				"@fortawesome/free-brands-svg-icons": "^6.2.1",
 				"@fortawesome/free-solid-svg-icons": "^6.2.1",
diff --git a/frontend/package.json b/frontend/package.json
index 821a243de0..a730c6c0a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill",
-	"version": "1.69.1",
+	"version": "1.69.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/lsp/Pipfile b/lsp/Pipfile
index 62644c9aff..d4d3578ae9 100644
--- a/lsp/Pipfile
+++ b/lsp/Pipfile
@@ -4,8 +4,8 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-wmill = ">=1.69.1"
-wmill_pg = ">=1.69.1"
+wmill = ">=1.69.2"
+wmill_pg = ">=1.69.2"
 sendgrid = "*"
 mysql-connector-python = "*"
 pymongo = "*"
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index 342c92dd31..e9fded3be6 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.69.1
+  version: 1.69.2
   title: OpenFlow Spec
   contact:
     name: Ruben Fiszel
diff --git a/python-client/wmill/pyproject.toml b/python-client/wmill/pyproject.toml
index be366244dc..7ae1b7cb43 100644
--- a/python-client/wmill/pyproject.toml
+++ b/python-client/wmill/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill"
-version = "1.69.1"
+version = "1.69.2"
 description = "A client library for accessing Windmill server wrapping the Windmill client API"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
@@ -16,7 +16,7 @@ include = ["wmill/py.typed"]
 
 [tool.poetry.dependencies]
 python = "^3.7"
-windmill-api = "^1.69.1"
+windmill-api = "^1.69.2"
 
 [build-system]
 requires = ["poetry>=1.0.2", "poetry-dynamic-versioning"]
diff --git a/python-client/wmill_pg/pyproject.toml b/python-client/wmill_pg/pyproject.toml
index f3da0a1739..a997a7735d 100644
--- a/python-client/wmill_pg/pyproject.toml
+++ b/python-client/wmill_pg/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill-pg"
-version = "1.69.1"
+version = "1.69.2"
 description = "An extension client for the wmill client library focused on pg"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/version.txt b/version.txt
index 41bcd69cfd..92a77f65c2 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.69.1
+1.69.2

From ad9c386f41412f0648c6ee756f7472c8844c1098 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 20:50:01 +0100
Subject: [PATCH 24/35] making slider/range values connectable

---
 .../components/apps/editor/component/components.ts    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 39fc5c1934..ead3c23159 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -810,19 +810,16 @@ Hello \${ctx.username}
 					type: 'static',
 					value: undefined,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				max: {
 					type: 'static',
 					value: undefined,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				step: {
 					type: 'static',
 					value: 1,
 					fieldType: 'number',
-					onlyStatic: true
 				}
 			},
 			customCss: {},
@@ -891,19 +888,16 @@ Hello \${ctx.username}
 					type: 'static',
 					value: 42,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				defaultValue: {
 					type: 'static',
 					value: 20,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				step: {
 					type: 'static',
 					value: 1,
 					fieldType: 'number',
-					onlyStatic: true
 				}
 			},
 			customCss: {},
@@ -925,31 +919,26 @@ Hello \${ctx.username}
 					type: 'static',
 					value: 0,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				max: {
 					type: 'static',
 					value: 42,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				defaultLow: {
 					type: 'static',
 					value: 10,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				defaultHigh: {
 					type: 'static',
 					value: 20,
 					fieldType: 'number',
-					onlyStatic: true
 				},
 				step: {
 					type: 'static',
 					value: 1,
 					fieldType: 'number',
-					onlyStatic: true
 				}
 			},
 			customCss: {},

From c2e5afd4e07fb63375832f308da8c744616ee188 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 21:09:37 +0100
Subject: [PATCH 25/35] fix(deno): fix denoify buffer handling

---
 deno-client/build.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/deno-client/build.sh b/deno-client/build.sh
index f2c8849bb1..37bac778b6 100755
--- a/deno-client/build.sh
+++ b/deno-client/build.sh
@@ -4,8 +4,9 @@ set -e
 npm ci --ignore-scripts
 npx --yes openapi-typescript-codegen --input ../backend/windmill-api/openapi.yaml \
  --output ./src --useOptions \
- && sed -i '213 i \\    request.referrerPolicy = \"no-referrer\"\n' src/core/request.ts
-npx --yes denoify
+ && sed -i '213 i \\    request.referrerPolicy = \"no-referrer\"\n' src/core/request.ts 
+ npx --yes denoify
 rm -rf windmill-api
 mv deno_dist windmill-api
+sed -i 's/buffer DENOIFY: UNKNOWN NODE BUILTIN/node:buffer/' ./windmill-api/core/request.ts 
 rm -rf src/

From 7da7dac3acff18c366e06af9e6085d6327046be8 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 21:11:58 +0100
Subject: [PATCH 26/35] chore(main): release 1.69.3 (#1234)

---
 CHANGELOG.md | 7 +++++++
 version.txt  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 402f7d5499..eff72ae1a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Changelog
 
 
+## [1.69.3](https://github.com/windmill-labs/windmill/compare/v1.69.2...v1.69.3) (2023-02-24)
+
+
+### Bug Fixes
+
+* **deno:** fix denoify buffer handling ([c2e5afd](https://github.com/windmill-labs/windmill/commit/c2e5afd4e07fb63375832f308da8c744616ee188))
+
 ## [1.69.2](https://github.com/windmill-labs/windmill/compare/v1.69.1...v1.69.2) (2023-02-24)
 
 
diff --git a/version.txt b/version.txt
index 92a77f65c2..85f4470a9b 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.69.2
+1.69.3

From e1f686d8508cfc1f73c43be08facc44217ca8de0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 25 Feb 2023 08:48:18 +0100
Subject: [PATCH 27/35] fix(frontend): fix graph viewer id assignment

---
 frontend/src/lib/components/graph/FlowGraph.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index a00ebcc8fb..82a3959883 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -234,8 +234,9 @@
 			inline: ''
 		}
 		const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]'
-		let nodeId = id ?? numberToChars(idGenerator.next().value - 1)
-
+		let generatedId = idGenerator.next().value
+		let nodeId = id ?? numberToChars(generatedId - 1)
+		// console.log(id, generatedId, nodeId, charsToNumber(nodeId))
 		return {
 			id: charsToNumber(nodeId),
 			position: { x: -1, y: -1 },
@@ -376,6 +377,7 @@
 	}
 
 	function layoutNodes(nodes: Node[]): { nodes: Node[]; height: number } {
+		// console.log('layoutNodes', nodes)
 		const stratify = dagStratify().id(({ id }: Node) => numberToChars(id))
 		const dag = stratify(nodes)
 
@@ -401,7 +403,6 @@
 		const edges: Edge[] = []
 		nodes.forEach((node) => {
 			node.parentIds.forEach((pid, i) => {
-				console.log(charsToNumber(pid), pid)
 				// skip virtual nodes such as collect result
 				if (errorHandlers[pid] && node.id < 900 && nodes.find((x) => x.id == errorHandlers[pid])) {
 					edges.push({

From e87f4fc44b847a573f5acafc0348fbcbfcb2258f Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Sat, 25 Feb 2023 10:18:21 +0100
Subject: [PATCH 28/35] fix(frontend): Fix duplication (#1237)

---
 frontend/src/lib/components/apps/editor/appUtils.ts      | 9 ++++++---
 .../apps/editor/settingsPanel/ComponentPanel.svelte      | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 763dd96df6..36e9de247d 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -107,8 +107,6 @@ export function insertNewGridItem(
 		const subGrid = app.subgrids[key] ?? []
 		subGrid.push(createNewGridItem(subGrid, id, data))
 		app.subgrids[key] = subGrid
-
-
 	}
 	for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
 		app.subgrids[`${id}-${i}`] = []
@@ -169,16 +167,21 @@ export function deleteGridItem(
 
 export function duplicateGridItem(
 	app: App,
-	focusedGrid: FocusedGrid | undefined,
+	parent: string | undefined,
 	id: string
 ): string | undefined {
 	const gridItem = findGridItem(app, id)
+
 	if (gridItem) {
 		const newId = getNextGridItemId(app)
 		const newItem = JSON.parse(JSON.stringify(gridItem))
 		newItem.id = newId
 		newItem.data.id = newId
 
+		let focusedGrid = parent
+			? { parentComponentId: parent.split('-')[0], subGridIndex: Number(parent.split('-')[1]) }
+			: undefined
+
 		return insertNewGridItem(app, newItem.data, focusedGrid)
 	}
 	return undefined
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 29ec777575..83e533d3c3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -35,7 +35,7 @@
 
 	function duplicateElement(id: string) {
 		$dirtyStore = true
-		const newId = duplicateGridItem($app, $focusedGrid, id)
+		const newId = duplicateGridItem($app, parent, id)
 		$selectedComponent = newId
 	}
 

From 104e4ac5e790c30e6fb6b27726776693038d4f19 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Sat, 25 Feb 2023 11:31:12 +0100
Subject: [PATCH 29/35] feat(frontend): move to other grid (#1230)

* feat(frontend): move to other grid

* feat(frontend): wip

* feat(frontend): Fix component move

* fix(frontend): Fix build

* feat(frontend): Fix moving

* fix(frontend): Simplify code
---
 .../lib/components/apps/editor/appUtils.ts    |   5 +-
 .../settingsPanel/ComponentPanel.svelte       |   8 +-
 .../settingsPanel/MoveToOtherGrid.svelte      | 109 ++++++++++++++++++
 frontend/src/lib/components/apps/utils.ts     |  15 ++-
 4 files changed, 130 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte

diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 36e9de247d..fe8c84a649 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -88,9 +88,10 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone
 export function insertNewGridItem(
 	app: App,
 	data: AppComponent,
-	focusedGrid: FocusedGrid | undefined
+	focusedGrid: FocusedGrid | undefined,
+	keepId?: boolean
 ) {
-	const id = getNextGridItemId(app)
+	const id = keepId ? data.id : getNextGridItemId(app)
 
 	if (!app.subgrids) {
 		app.subgrids = {}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 83e533d3c3..cf0ab5b766 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -23,6 +23,7 @@
 	import GridTab from './GridTab.svelte'
 	import { duplicateGridItem } from '../appUtils'
 	import { deleteGridItem } from '../appUtils'
+	import MoveToOtherGrid from './MoveToOtherGrid.svelte'
 
 	export let component: AppComponent
 	export let rowColumns = false
@@ -176,8 +177,7 @@
 		<PanelSection title="Duplicate">
 			<Button
 				size="xs"
-				color="blue"
-				variant="border"
+				color="dark"
 				startIcon={{ icon: faCopy }}
 				on:click={() => {
 					if (component) {
@@ -189,6 +189,10 @@
 			</Button>
 		</PanelSection>
 
+		<PanelSection title="Move to other grid">
+			<MoveToOtherGrid bind:component {parent} />
+		</PanelSection>
+
 		<PanelSection title="Danger zone">
 			<Button
 				size="xs"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
new file mode 100644
index 0000000000..25f739af79
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { Button } from '$lib/components/common'
+	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
+	import { faCopy } from '@fortawesome/free-solid-svg-icons'
+	import { getContext } from 'svelte'
+	import type { App, AppEditorContext } from '../../types'
+	import { createNewGridItem, deleteGridItem, findGridItem, insertNewGridItem } from '../appUtils'
+	import type { AppComponent } from '../component'
+
+	export let component: AppComponent | undefined
+	export let parent: string | undefined
+	let selectedOption: string
+
+	const { app } = getContext<AppEditorContext>('AppEditorContext')
+
+	function listAllSubGrids(app: App) {
+		return app.subgrids ? Object.keys(app.subgrids) : []
+	}
+
+	function findAndDelete(id: string) {
+		const node = findGridItem($app, id)
+
+		if (!node) {
+			return
+		}
+
+		const data: AppComponent = JSON.parse(JSON.stringify(node.data))
+		$dirtyStore = true
+
+		deleteGridItem($app, data, parent)
+		return data
+	}
+
+	function insertComponentInSubGrid(
+		data: AppComponent,
+		targetId: string,
+		targetSubGridIndex: number
+	) {
+		insertNewGridItem(
+			$app,
+			data,
+			{
+				parentComponentId: targetId,
+				subGridIndex: targetSubGridIndex
+			},
+			true
+		)
+		$app.grid = [...$app.grid]
+	}
+
+	function insertComponentInMainGrid(data: AppComponent) {
+		const newComponent = createNewGridItem($app.grid, data.id, data)
+		$app.grid = [...$app.grid, newComponent]
+	}
+
+	function onMove(component: AppComponent) {
+		const data = findAndDelete(component.id)
+
+		if (!data) {
+			return
+		}
+
+		if (selectedOption !== 'main-grid') {
+			const [targetId, targetSubGridIndex] = selectedOption.split('-')
+			insertComponentInSubGrid(data, targetId, parseInt(targetSubGridIndex))
+		} else {
+			insertComponentInMainGrid(data)
+		}
+	}
+
+	const defaultOption = {
+		label: 'Main grid',
+		value: 'main-grid',
+		disabled: parent === undefined
+	}
+	$: availableGrids = listAllSubGrids($app)
+	$: options = availableGrids
+		? [
+				defaultOption,
+				...availableGrids?.map((grid) => ({
+					label: grid,
+					value: grid,
+					disabled: grid === parent || (component && grid.startsWith(component.id))
+				}))
+		  ]
+		: [defaultOption]
+</script>
+
+{#if component && !options.every((option) => option.disabled)}
+	<select bind:value={selectedOption} class="w-full">
+		{#each options as option}
+			<option value={option.value} disabled={option.disabled}>{option.label}</option>
+		{/each}
+	</select>
+	<Button
+		size="xs"
+		color="dark"
+		startIcon={{ icon: faCopy }}
+		on:click={() => {
+			if (component) {
+				onMove(component)
+			}
+		}}
+	>
+		Move component: {component.id}
+	</Button>
+{:else}
+	<p class="text-gray-500 text-sm">No grids available</p>
+{/if}
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 55238c81eb..ffebd5c7c5 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -47,19 +47,28 @@ export function deleteComponent(
 
 */
 
-export function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[] {
+export function allItems(
+	grid: GridItem[],
+	subgrids: Record<string, GridItem[]> | undefined
+): GridItem[] {
 	if (subgrids == undefined) {
 		return grid
 	}
 	return [...grid, ...Object.values(subgrids).flat()]
 }
 
-export function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][] {
+export function allItemsWithParent(
+	grid: GridItem[],
+	subgrids: Record<string, GridItem[]> | undefined
+): [GridItem, string | undefined][] {
 	const items: [GridItem, string | undefined][] = grid.map((item) => [item, undefined])
 	if (subgrids == undefined) {
 		return items
 	}
-	return [...items, ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k] as [GridItem, string]))]
+	return [
+		...items,
+		...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k] as [GridItem, string]))
+	]
 }
 
 export async function loadSchema(

From b690d801d4aa5695ee558e81d1ed114074dfcb83 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 25 Feb 2023 13:11:44 +0100
Subject: [PATCH 30/35] feat(apps): add ag grid

---
 frontend/package-lock.json                    |  32 +++++
 frontend/package.json                         |   1 +
 .../display/table/AppAggridTable.svelte       | 110 ++++++++++++++++++
 .../apps/editor/component/Component.svelte    |   8 ++
 .../apps/editor/component/components.ts       |  44 +++++++
 .../components/apps/editor/component/sets.ts  |   1 +
 6 files changed, 196 insertions(+)
 create mode 100644 frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 94a0cb1c39..002b078c34 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
 				"@popperjs/core": "^2.11.6",
 				"@redocly/json-to-json-schema": "^0.0.1",
 				"@tanstack/svelte-table": "^8.7.6",
+				"ag-grid-svelte": "^0.1.4",
 				"async-mutex": "^0.4.0",
 				"chart.js": "^3.9.1",
 				"chartjs-adapter-date-fns": "^3.0.0",
@@ -1357,6 +1358,23 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/ag-grid-community": {
+			"version": "28.2.1",
+			"resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.2.1.tgz",
+			"integrity": "sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A==",
+			"peer": true
+		},
+		"node_modules/ag-grid-svelte": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/ag-grid-svelte/-/ag-grid-svelte-0.1.4.tgz",
+			"integrity": "sha512-yKJKZ1o3aE9dgaK4WtmjG+vA9GKqErznvFisDnzi+PPGWXDCSNWuoDGCUpEFJtHKrfooLoUZZHYHi8I9sZ+BCA==",
+			"dependencies": {
+				"svelte": "^3.55.0"
+			},
+			"peerDependencies": {
+				"ag-grid-community": "^28"
+			}
+		},
 		"node_modules/ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -7980,6 +7998,20 @@
 			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
 			"dev": true
 		},
+		"ag-grid-community": {
+			"version": "28.2.1",
+			"resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.2.1.tgz",
+			"integrity": "sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A==",
+			"peer": true
+		},
+		"ag-grid-svelte": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/ag-grid-svelte/-/ag-grid-svelte-0.1.4.tgz",
+			"integrity": "sha512-yKJKZ1o3aE9dgaK4WtmjG+vA9GKqErznvFisDnzi+PPGWXDCSNWuoDGCUpEFJtHKrfooLoUZZHYHi8I9sZ+BCA==",
+			"requires": {
+				"svelte": "^3.55.0"
+			}
+		},
 		"ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a730c6c0a8..913b1159a6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -66,6 +66,7 @@
 		"@popperjs/core": "^2.11.6",
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@tanstack/svelte-table": "^8.7.6",
+		"ag-grid-svelte": "^0.1.4",
 		"async-mutex": "^0.4.0",
 		"chart.js": "^3.9.1",
 		"chartjs-adapter-date-fns": "^3.0.0",
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
new file mode 100644
index 0000000000..11b6d0b201
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte'
+	import 'ag-grid-community/styles/ag-grid.css'
+	import 'ag-grid-community/styles/ag-theme-alpine.css'
+
+	import { getContext, onMount } from 'svelte'
+	import type { Output } from '../../../rx'
+	import type { AppEditorContext } from '../../../types'
+	import InputValue from '../../helpers/InputValue.svelte'
+	import type { AppInput } from '../../../inputType'
+	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
+	import { isObject } from '$lib/utils'
+
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+
+	export let id: string
+	export let componentInput: AppInput | undefined
+	export let configuration: Record<string, AppInput>
+	export let initializing: boolean | undefined = undefined
+
+	export const staticOutputs: string[] = ['selectedRow', 'loading', 'result', 'selectedRowIndex']
+
+	let result: Record<string, any>[] | undefined = undefined
+
+	const {
+		worldStore,
+		staticOutputs: staticOutputsStore,
+		selectedComponent
+	} = getContext<AppEditorContext>('AppEditorContext')
+
+	let selectedRowIndex = -1
+
+	function toggleRow(row: Record<string, any>, rowIndex: number) {
+		if (selectedRowIndex !== rowIndex) {
+			selectedRowIndex = rowIndex
+			outputs?.selectedRow.set(row.original)
+			outputs?.selectedRowIndex.set(rowIndex)
+		}
+	}
+
+	let mounted = false
+	onMount(() => {
+		mounted = true
+	})
+
+	$: selectedRowIndex === -1 &&
+		Array.isArray(result) &&
+		result.length > 0 &&
+		// We need to wait until the component is mounted so the world is created
+		mounted &&
+		outputs &&
+		toggleRow({ original: result[0] }, 0)
+
+	$: outputs = $worldStore?.outputsById[id] as {
+		selectedRowIndex: Output<number>
+		selectedRow: Output<any>
+		result: Output<any>
+	}
+
+	$: outputs?.result?.set(result)
+
+	let clientHeight
+	let clientWidth
+
+	let columnDefs: any = undefined
+
+	let allEditable: boolean | undefined = undefined
+
+	function onCellValueChanged(event) {
+		if (result) {
+			let dataCell = event.newValue
+			try {
+				dataCell = JSON.parse(dataCell)
+			} catch (e) {}
+			result[event.node.rowIndex][event.column.colId] = dataCell
+		}
+	}
+</script>
+
+<InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
+<InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+
+<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+	{#if Array.isArray(result) && result.every(isObject)}
+		<div
+			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"
+			bind:clientHeight
+			bind:clientWidth
+		>
+			<div
+				on:pointerdown|stopPropagation={() => {
+					$selectedComponent = id
+				}}
+				style:height="{clientHeight}px"
+				style:width="{clientWidth}px"
+				class="ag-theme-alpine"
+			>
+				<AgGridSvelte
+					bind:rowData={result}
+					{columnDefs}
+					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+				/>
+			</div>
+		</div>
+	{:else if result != undefined}
+		<Alert title="Parsing issues" type="error" size="xs">
+			The result should be an array of objects
+		</Alert>
+	{/if}
+</RunnableWrapper>
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index aa1df588a7..d3642b7213 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -35,6 +35,7 @@
 		AppContainer
 	} from '../../components'
 	import type { AppComponent } from './components'
+	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -143,6 +144,13 @@
 				bind:componentInput={component.componentInput}
 				bind:actionButtons={component.actionButtons}
 			/>
+		{:else if component.type === 'aggridcomponent'}
+			<AppAggridTable
+				{...component}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+			/>
 		{:else if component.type === 'textcomponent'}
 			<AppText
 				{...component}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index ead3c23159..06398bcdd4 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -63,6 +63,7 @@ export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>
 export type TableComponent = BaseComponent<'tablecomponent'> & {
 	actionButtons: (BaseAppComponent & ButtonComponent)[]
 }
+export type AggridComponent = BaseComponent<'aggridcomponent'>
 export type DisplayComponent = BaseComponent<'displaycomponent'>
 export type ImageComponent = BaseComponent<'imagecomponent'>
 export type InputComponent = BaseComponent<'inputcomponent'>
@@ -110,6 +111,7 @@ export type AppComponent = BaseAppComponent &
 		| VerticalDividerComponent
 		| FileInputComponent
 		| ImageComponent
+		| AggridComponent
 	)
 
 export type AppComponentDimensions = `${IntRange<
@@ -694,6 +696,48 @@ Hello \${ctx.username}
 			actionButtons: []
 		}
 	},
+	aggridcomponent: {
+		name: 'AgGrid Table',
+		icon: Table2,
+		dims: '3:10-6:10',
+		data: {
+			id: '',
+			type: 'aggridcomponent',
+			configuration: {
+				columnDefs: {
+					type: 'static',
+					fieldType: 'array',
+					subFieldType: 'object',
+					value: [{ field: 'id' }, { field: 'name', editable: true }, { field: 'age' }]
+				},
+				allEditable: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+					onlyStatic: true
+				}
+			},
+			componentInput: {
+				type: 'static',
+				fieldType: 'array',
+				subFieldType: 'object',
+				value: [
+					{
+						id: 1,
+						name: 'A cell with a long name',
+						age: 42
+					},
+					{
+						id: 2,
+						name: 'A briefer cell',
+						age: 84
+					}
+				]
+			},
+			customCss: {},
+			card: true,
+		}
+	},
 	checkboxcomponent: {
 		name: 'Toggle',
 		icon: ToggleLeft,
diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts
index 638fc63cc9..6944eeb852 100644
--- a/frontend/src/lib/components/apps/editor/component/sets.ts
+++ b/frontend/src/lib/components/apps/editor/component/sets.ts
@@ -39,6 +39,7 @@ const display: ComponentSet = {
 		'imagecomponent',
 		'htmlcomponent',
 		'tablecomponent',
+		'aggridcomponent',
 		'barchartcomponent',
 		'piechartcomponent',
 		'vegalitecomponent',

From 95851ea486039b7afa69cb9060efcbe8ede44841 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 26 Feb 2023 13:58:51 +0100
Subject: [PATCH 31/35] minor app nits

---
 .../lib/components/apps/components/display/AppImage.svelte | 7 ++++---
 .../lib/components/apps/components/inputs/AppSelect.svelte | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppImage.svelte b/frontend/src/lib/components/apps/components/display/AppImage.svelte
index 4c2ca28961..2bf39c5b2c 100644
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -3,7 +3,7 @@
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
 
-	type FitOption = typeof staticValues['objectFitOptions'][number]
+	type FitOption = (typeof staticValues)['objectFitOptions'][number]
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
@@ -12,7 +12,7 @@
 	const fit: Record<FitOption, string> = {
 		cover: 'object-cover',
 		contain: 'object-contain',
-		fill: 'object-fill',
+		fill: 'object-fill'
 	}
 
 	let source: string | undefined = undefined
@@ -27,8 +27,9 @@
 <InputValue {id} input={configuration.customStyles} bind:value={customStyles} />
 
 <img
+	on:pointerdown|preventDefault
 	src={source}
 	alt={altText}
 	style={customStyles}
 	class="w-full h-full {fit[imageFit || 'cover']}"
->
+/>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index af6aa3af79..b030d80263 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -82,4 +82,7 @@
 	.app-select .value-container {
 		padding: 0 !important;
 	}
+	.svelte-select-list {
+		z-index: 1000 !important;
+	}
 </style>

From d38aff2fe228f23eb18c3991392928c064e6aca2 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 26 Feb 2023 14:09:16 +0100
Subject: [PATCH 32/35] fix: app setup and sync now uses 1.69.3

---
 ...0226130307_update_included_scripts_with_deno_changes.down.sql | 1 +
 ...230226130307_update_included_scripts_with_deno_changes.up.sql | 0
 2 files changed, 1 insertion(+)
 create mode 100644 backend/migrations/20230226130307_update_included_scripts_with_deno_changes.down.sql
 create mode 100644 backend/migrations/20230226130307_update_included_scripts_with_deno_changes.up.sql

diff --git a/backend/migrations/20230226130307_update_included_scripts_with_deno_changes.down.sql b/backend/migrations/20230226130307_update_included_scripts_with_deno_changes.down.sql
new file mode 100644
index 0000000000..d2f607c5b8
--- /dev/null
+++ b/backend/migrations/20230226130307_update_included_scripts_with_deno_changes.down.sql
@@ -0,0 +1 @@
+-- Add down migration script here
diff --git a/backend/migrations/20230226130307_update_included_scripts_with_deno_changes.up.sql b/backend/migrations/20230226130307_update_included_scripts_with_deno_changes.up.sql
new file mode 100644
index 0000000000..e69de29bb2

From c3d1c8ac399853b1e69f2733437f25d144ac4745 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 26 Feb 2023 23:35:43 +0100
Subject: [PATCH 33/35] fix many apps bugs

---
 frontend/package-lock.json                    | 25 +++++++++++++-----
 frontend/package.json                         |  3 ++-
 frontend/src/global.d.ts                      |  4 +--
 .../apps/components/buttons/AppButton.svelte  |  1 -
 .../components/buttons/AppFormButton.svelte   |  1 -
 .../apps/components/helpers/InputValue.svelte |  7 +----
 .../helpers/RunnableComponent.svelte          |  7 +----
 .../apps/components/inputs/AppSelect.svelte   | 26 ++++++++++++++++---
 .../components/inputs/AppSliderInputs.svelte  | 12 ++++++---
 .../apps/components/layout/AppTabs.svelte     | 23 +++++++++-------
 .../components/apps/editor/GridEditor.svelte  | 25 +++++++++++-------
 .../apps/editor/SubGridEditor.svelte          |  5 ++--
 .../apps/editor/component/Component.svelte    |  9 ++++++-
 .../InlineScriptEditorPanel.svelte            |  3 ++-
 .../InlineScriptsPanel.svelte                 |  1 -
 .../flows/content/FlowModuleComponent.svelte  |  5 ++--
 ...vite.config.js.timestamp-1677450565189.mjs |  0
 17 files changed, 99 insertions(+), 58 deletions(-)
 create mode 100644 frontend/vite.config.js.timestamp-1677450565189.mjs

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 002b078c34..f9e7979aef 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
 				"chartjs-adapter-date-fns": "^3.0.0",
 				"chartjs-plugin-zoom": "^2.0.0",
 				"date-fns": "^2.29.3",
+				"fast-equals": "^4.0.3",
 				"highlight.js": "^11.7.0",
 				"lucide-svelte": "^0.115.0",
 				"monaco-editor": "0.33.0",
@@ -44,7 +45,7 @@
 				"@types/vscode": "~1.74.0",
 				"@typescript-eslint/eslint-plugin": "^5.49.0",
 				"@typescript-eslint/parser": "^5.48.0",
-				"@windmill-labs/svelte-grid": "^5.1.3",
+				"@windmill-labs/svelte-grid": "^5.1.4",
 				"@windmill-labs/svelvet": "^4.0.20",
 				"@zerodevx/svelte-toast": "^0.8.1",
 				"autoprefixer": "^10.4.13",
@@ -1264,9 +1265,9 @@
 			}
 		},
 		"node_modules/@windmill-labs/svelte-grid": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.3.tgz",
-			"integrity": "sha512-SzfuJ2qYkBYC73x3l+x9l7WcgU+kMlRoFkCgSCOfggi3z5zJU9eX1VYsV1wDjtQVU9OUaAciv1xlUR4OPxrFlg==",
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.4.tgz",
+			"integrity": "sha512-alxQ8su/osmHodl1JMta+0dvlc2qnYwiXsoeC8Ys8hrLywD03y5tjxYV0L0WXvOnMKG1S9GbqGuDVCk+UmVuKg==",
 			"dev": true
 		},
 		"node_modules/@windmill-labs/svelvet": {
@@ -2989,6 +2990,11 @@
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 			"dev": true
 		},
+		"node_modules/fast-equals": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
+			"integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg=="
+		},
 		"node_modules/fast-glob": {
 			"version": "3.2.12",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -7922,9 +7928,9 @@
 			}
 		},
 		"@windmill-labs/svelte-grid": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.3.tgz",
-			"integrity": "sha512-SzfuJ2qYkBYC73x3l+x9l7WcgU+kMlRoFkCgSCOfggi3z5zJU9eX1VYsV1wDjtQVU9OUaAciv1xlUR4OPxrFlg==",
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.4.tgz",
+			"integrity": "sha512-alxQ8su/osmHodl1JMta+0dvlc2qnYwiXsoeC8Ys8hrLywD03y5tjxYV0L0WXvOnMKG1S9GbqGuDVCk+UmVuKg==",
 			"dev": true
 		},
 		"@windmill-labs/svelvet": {
@@ -9183,6 +9189,11 @@
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 			"dev": true
 		},
+		"fast-equals": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
+			"integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg=="
+		},
 		"fast-glob": {
 			"version": "3.2.12",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 913b1159a6..f6105601f6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,7 +25,7 @@
 		"@types/vscode": "~1.74.0",
 		"@typescript-eslint/eslint-plugin": "^5.49.0",
 		"@typescript-eslint/parser": "^5.48.0",
-		"@windmill-labs/svelte-grid": "^5.1.3",
+		"@windmill-labs/svelte-grid": "^5.1.4",
 		"@windmill-labs/svelvet": "^4.0.20",
 		"@zerodevx/svelte-toast": "^0.8.1",
 		"autoprefixer": "^10.4.13",
@@ -72,6 +72,7 @@
 		"chartjs-adapter-date-fns": "^3.0.0",
 		"chartjs-plugin-zoom": "^2.0.0",
 		"date-fns": "^2.29.3",
+		"fast-equals": "^4.0.3",
 		"highlight.js": "^11.7.0",
 		"lucide-svelte": "^0.115.0",
 		"monaco-editor": "0.33.0",
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index 036deecb9c..ae6c077144 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -44,7 +44,7 @@ declare module '@windmill-labs/svelte-grid' {
 		fastStart?: boolean
 		throttleUpdate?: number
 		throttleResize?: number
-
+		onTopId?: string
 		scroller?: undefined
 		sensor?: number
 	}
@@ -60,7 +60,7 @@ declare module '@windmill-labs/svelte-grid' {
 			mount: CustomEvent<>
 		},
 		Slots<T>
-	> {}
+	> { }
 }
 
 declare module '@windmill-labs/svelte-grid/build/helper/index.mjs' {
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 4aa0d78160..6b99be5700 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -95,7 +95,6 @@
 <InputValue {id} input={configuration.triggerOnAppLoad} bind:value={triggerOnAppLoad} />
 
 <InputValue
-	row={extraQueryParams['row']}
 	{id}
 	input={configuration.disabled}
 	bind:value={disabled}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 7acf2a9fba..c551ba2280 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -69,7 +69,6 @@
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue
-	row={extraQueryParams['row']}
 	{id}
 	input={configuration.disabled}
 	bind:value={disabled}
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 4f6f53c07e..eb954d650c 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -10,21 +10,17 @@
 	export let input: AppInput
 	export let value: T
 	export let id: string | undefined = undefined
-	export let row: Record<string, any> | undefined = {}
 	export let error: string = ''
-
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	$: state = $worldStore?.state
-	$: input && $worldStore && row && handleConnection()
+	$: input && $worldStore && handleConnection()
 	$: input && input.type == 'template' && $state && (value = getValue(input))
 	$: input && input.type == 'eval' && $state && (value = evalExpr(input))
 
 	function handleConnection() {
 		if (input.type === 'connected') {
 			$worldStore?.connect<any>(input, onValueChange)
-		} else if (input.type === 'row') {
-			setTimeout(() => (value = row?.[input['column']]), 0)
 		} else if (input.type === 'static' || input.type == 'template') {
 			setTimeout(() => (value = getValue(input)), 0)
 		} else if (input.type == 'eval') {
@@ -57,7 +53,6 @@
 						Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
 					]
 				})
-				.concat(row ? [['row', row]] : [])
 		)
 	}
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index f7e31a0b4f..45dd15007b 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -239,12 +239,7 @@
 
 {#each Object.entries(fields ?? {}) as [key, v]}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-			row={extraQueryParams['row'] ?? {}}
-		/>
+		<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
 	{/if}
 {/each}
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index b030d80263..d40c72f90a 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -23,7 +23,13 @@
 		result: Output<string | undefined>
 	}
 
-	let value: string | undefined = undefined
+	// $: outputs && handleOutputs()
+
+	// function handleOutputs() {
+	// 	value = outputs.result.peak()
+	// }
+
+	let value: string | undefined = outputs?.result.peak()
 
 	$: items && handleItems()
 
@@ -38,9 +44,15 @@
 					}
 			  })
 			: []
-		if (items?.[0]?.['value'] != value) {
-			value = JSON.stringify(items?.[0]?.['value'])
-			outputs?.result.set(value)
+		const valuePeak = outputs?.result.peak()
+		if (!valuePeak) {
+			const value0 = items?.[0]?.['value']
+			if (value0 != value && !items.includes(value0)) {
+				value = JSON.stringify(value0)
+				outputs?.result.set(value0)
+			}
+		} else {
+			value = valuePeak
 		}
 	}
 
@@ -74,6 +86,12 @@
 					$selectedComponent = id
 				}
 			}}
+			on:focus={() => {
+				$selectedComponent = id
+			}}
+			floatingConfig={{
+				strategy: 'fixed'
+			}}
 		/>
 	</div>
 </AlignWrapper>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index 62f67fc9ff..eca1dfa48f 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -13,8 +13,7 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let values: [number] = [0]
+	const { worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 	let min = 0
 	let max = 42
 	let step = 1
@@ -22,7 +21,12 @@
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<number | null>
 	}
-	$: if (values) {
+
+	let values: [number] = [outputs?.result.peak() ?? 0]
+
+	$: values && handleValues()
+
+	function handleValues() {
 		// Disallow 'e' character in numbers
 		// if(value && value.toString().includes('e')) {
 		// 	value = +value.toString().replaceAll('e', '')
@@ -40,7 +44,7 @@
 <AlignWrapper {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">
 		<span>{min}</span>
-		<div class="grow" on:pointerdown|stopPropagation>
+		<div class="grow" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
 			<RangeSlider {step} min={min ?? 0} max={max ?? 1} bind:values />
 		</div>
 		<span>{max}</span>
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index bbd9f71148..13acc43025 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -51,7 +51,7 @@
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
 
 <div>
-	<div bind:clientHeight={tabHeight}>
+	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
 		<Tabs bind:selected>
 			{#each tabs ?? [] as res}
 				<Tab value={res}>
@@ -60,14 +60,17 @@
 			{/each}
 		</Tabs>
 	</div>
-	{#if $app.subgrids?.[`${id}-${selectedIndex}`]}
-		<SubGridEditor
-			bind:subGrid={$app.subgrids[`${id}-${selectedIndex}`]}
-			{noPadding}
-			containerHeight={componentContainerHeight - tabHeight}
-			on:focus={() => {
-				$selectedComponent = id
-			}}
-		/>
+	{#if $app.subgrids}
+		{#each tabs ?? [] as res, i}
+			<SubGridEditor
+				visible={i === selectedIndex}
+				bind:subGrid={$app.subgrids[`${id}-${i}`]}
+				{noPadding}
+				containerHeight={componentContainerHeight - tabHeight}
+				on:focus={() => {
+					$selectedComponent = id
+				}}
+			/>
+		{/each}
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index d6c9beed19..f803ea564a 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -44,6 +44,10 @@
 
 			return disabledGridItem
 		})
+
+		Object.values($app.subgrids ?? {}).map(
+			(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
+		)
 	}
 
 	function removeGridElement(component) {
@@ -127,7 +131,6 @@
 			})
 		}
 	})
-	let mounted = false
 </script>
 
 <div class="relative w-full z-20 overflow-visible">
@@ -152,8 +155,13 @@
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
+		on:click={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
 	>
 		<Grid
+			onTopId={$selectedComponent}
 			fillSpace={false}
 			bind:items={$app.grid}
 			let:dataItem
@@ -166,13 +174,11 @@
 				{#if gridComponent.data.id === dataItem.data.id}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					{#if $connectingInput.opened}
-						{#if $connectingInput.opened}
-							<div
-								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-							/>
-						{/if}
+						<div
+							on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
+							on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+							class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+						/>
 						<div
 							style="transform: translate(-50%, -50%);"
 							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
@@ -181,6 +187,7 @@
 					{/if}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
+						on:click|stopPropagation
 						on:pointerdown={() => selectComponent(dataItem.data.id)}
 						class={classNames(
 							'h-full w-full center-center',
@@ -190,7 +197,7 @@
 					>
 						<Component
 							{pointerdown}
-							bind:component={gridComponent.data}
+							bind:pComponent={gridComponent.data}
 							selected={$selectedComponent === dataItem.data.id}
 							locked={isFixed(gridComponent)}
 							on:delete={() => removeGridElement(gridComponent.data)}
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index fed2f1b2f7..d978f12f87 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -10,6 +10,7 @@
 	export let noPadding = false
 	//export let id: string
 	export let subGrid: GridItem[] = []
+	export let visible: boolean = true
 
 	const dispatch = createEventDispatcher()
 
@@ -57,7 +58,7 @@
 	let container
 </script>
 
-<div class="relative w-full subgrid " bind:this={container}>
+<div class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 '}" bind:this={container}>
 	<div
 		class:px-2={!noPadding}
 		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
@@ -108,7 +109,7 @@
 						>
 							<Component
 								{pointerdown}
-								bind:component={gridComponent.data}
+								bind:pComponent={gridComponent.data}
 								selected={$selectedComponent === dataItem.data.id}
 								locked={isFixed(gridComponent)}
 								on:lock={() => lock(gridComponent)}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index d3642b7213..e91fe037e9 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -5,6 +5,8 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppEditorContext } from '../../types'
 	import ComponentHeader from '../ComponentHeader.svelte'
+	import { deepEqual } from 'fast-equals'
+
 	import {
 		AppBarChart,
 		AppDisplayComponent,
@@ -37,7 +39,7 @@
 	import type { AppComponent } from './components'
 	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
 
-	export let component: AppComponent
+	export let pComponent: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
@@ -47,6 +49,11 @@
 	let hover = false
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
+
+	let component = JSON.parse(JSON.stringify(pComponent))
+	$: if (pComponent && !deepEqual(pComponent, component)) {
+		component = JSON.parse(JSON.stringify(pComponent))
+	}
 </script>
 
 <div
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index 43401b6fa7..cb61734be8 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -12,6 +12,7 @@
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import { computeFields } from './utils'
+	import { deepEqual } from 'fast-equals'
 
 	export let componentInput: AppInput | undefined
 	export let id: string
@@ -43,7 +44,7 @@
 
 	async function refreshScript(x: RunnableByPath) {
 		let { schema } = await getScriptByPath(x.path)
-		if (JSON.stringify(x.schema) != JSON.stringify(schema)) {
+		if (!deepEqual(x.schema, schema)) {
 			x.schema = schema
 			if (componentInput?.type == 'runnable') {
 				componentInput.fields = computeFields(schema, false, componentInput.fields)
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 2cbdf0fcb6..351df5977c 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -6,7 +6,6 @@
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
-	import { allItems } from '../../utils'
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { app, staticOutputs, runnableComponents } =
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 9aa781f873..0ea43de7b8 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -22,6 +22,7 @@
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	import FlowRetries from './FlowRetries.svelte'
 	import { getStepPropPicker } from '../previousResults'
+	import { deepEqual } from 'fast-equals'
 
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
@@ -87,12 +88,12 @@
 			const { input_transforms, schema } = await loadSchemaFromModule(flowModule)
 			validCode = true
 			setTimeout(() => {
-				if (JSON.stringify(value.input_transforms) !== JSON.stringify(input_transforms)) {
+				if (!deepEqual(value.input_transforms, input_transforms)) {
 					inputTransforms = input_transforms
 				}
 			})
 
-			if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
+			if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
 				if (!$flowStateStore[flowModule.id]) {
 					$flowStateStore[flowModule.id] = { schema }
 				} else {
diff --git a/frontend/vite.config.js.timestamp-1677450565189.mjs b/frontend/vite.config.js.timestamp-1677450565189.mjs
new file mode 100644
index 0000000000..e69de29bb2

From e95f8ef6bf135031d709075451a37cbf2af19b07 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 27 Feb 2023 00:27:20 +0100
Subject: [PATCH 34/35] add none color for buttons

---
 frontend/src/lib/components/common/button/Button.svelte | 5 +++++
 frontend/src/lib/components/common/button/model.ts      | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 280b9bb69c..846504286d 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -29,6 +29,11 @@
 	const dispatch = createEventDispatcher()
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 	const colorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {
+		none: {
+			border: '',
+			contained: ''
+		},
+
 		blue: {
 			border:
 				'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index c3d4fcae14..578a34bb28 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -1,4 +1,4 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'] as const
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'] as const
 
 export namespace ButtonType {
 

From cd255700039fdcfc2768dcd0875eef1ca42a6800 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 27 Feb 2023 00:53:49 +0100
Subject: [PATCH 35/35] fix minor editor bugs

---
 frontend/src/lib/components/Editor.svelte          | 14 ++++++++++++--
 frontend/src/lib/components/ScriptBuilder.svelte   |  9 +++++++++
 frontend/src/lib/components/ScriptEditor.svelte    |  1 +
 .../(root)/(logged)/scripts/add/+page.svelte       |  4 +---
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index d79578f32a..2418cdd0e6 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -138,8 +138,18 @@
 
 	export function setCode(ncode: string): void {
 		code = ncode
-		if (editor) {
-			editor.setValue(ncode)
+		if (editor?.getModel()) {
+			// editor.setValue(ncode)
+			editor.pushUndoStop()
+
+			editor.executeEdits('set', [
+				{
+					range: editor.getModel()!.getFullModelRange(), // full range
+					text: ncode
+				}
+			])
+
+			editor.pushUndoStop()
 		}
 	}
 
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 6e9024249a..a27bcee543 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -24,6 +24,7 @@
 	export let initialPath: string = ''
 	export let template: 'pgsql' | 'mysql' | 'script' = 'script'
 	export let initialArgs: Record<string, any> = {}
+	export let lockedLanguage = false
 
 	const langs: [string, SupportedLanguage][] = [
 		['Typescript', Script.language.DENO],
@@ -214,7 +215,13 @@
 					bind:value={script.summary}
 					placeholder="Short summary to be displayed when listed"
 				/>
+
 				<h2 class="border-b pb-1 mt-12 mb-6">Language</h2>
+				{#if lockedLanguage}
+					<div class="text-sm text-gray-600 italic mb-2">
+						As a forked script, the language '{script.language}' cannot be modified.
+					</div>
+				{/if}
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#each langs as [label, lang]}
 						{@const isPicked = script.language == lang && template == 'script'}
@@ -228,6 +235,7 @@
 								template = 'script'
 								initContent(lang, script.kind, template)
 							}}
+							disabled={lockedLanguage}
 						>
 							<LanguageIcon {lang} /><span class="ml-2 py-4">{label}</span>
 						</Button>
@@ -237,6 +245,7 @@
 						variant="border"
 						color={template == 'pgsql' ? 'blue' : 'dark'}
 						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						disabled={lockedLanguage}
 						on:click={() => {
 							script.language = Script.language.DENO
 							template = 'pgsql'
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index c7a4b562fa..121bff7e14 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -101,6 +101,7 @@
 
 	onMount(() => {
 		inferSchema(code)
+		loadPastTests()
 	})
 </script>
 
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index ca88318ecb..32ce9dd23d 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -11,8 +11,6 @@
 	// Default
 	let schema: Schema = emptySchema()
 
-	let nodraft = $page.url.searchParams.get('nodraft')
-
 	const templatePath = $page.url.searchParams.get('template')
 	const hubPath = $page.url.searchParams.get('hub')
 
@@ -73,4 +71,4 @@
 	$dirtyStore = true
 </script>
 
-<ScriptBuilder {script} />
+<ScriptBuilder lockedLanguage={templatePath != null || hubPath != null} {script} />