improve app editor context panel performance for large apps

frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -15,7 +15,7 @@
 	export let first: boolean = false
 	export let nested: boolean = false
 	export let expanded: boolean = false
-
+	export let renderRec: boolean = true
 	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 	const name = getComponentNameById(gridItem.id)
 
@@ -41,14 +41,22 @@
 	)
 </script>
 
-<OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>
+<OutputHeader
+	render={renderRec}
+	let:render
+	id={gridItem.id}
+	name={getComponentNameById(gridItem.id)}
+	{first}
+	{nested}
+>
 	<ComponentOutputViewer
+		{render}
 		componentId={gridItem.id}
 		on:select={({ detail }) => {
 			connectOutput(connectingInput, gridItem?.data?.type, gridItem.data.id, detail)
 		}}
 	/>
-	<SubGridOutput {name} {nameOverrides} {expanded} {subGrids} parentId={gridItem.id} />
-	<TableActionsOutput {gridItem} />
-	<MenuItemsOutput {gridItem} />
+	<SubGridOutput {render} {name} {nameOverrides} {expanded} {subGrids} parentId={gridItem.id} />
+	<TableActionsOutput {render} {gridItem} />
+	<MenuItemsOutput {render} {gridItem} />
 </OutputHeader>

frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -8,7 +8,7 @@
 	export let componentId: string
 	export let hasContent: boolean = false
 	export let suffix: string = ''
-
+	export let render: boolean = true
 	const { worldStore, connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 	const { search, hasResult } = getContext<ContextPanelContext>('ContextPanel')
 
@@ -34,12 +34,13 @@
 		}
 	}
 
+	console.log('componentId', componentId)
 	$: subscribeToAllOutputs($worldStore?.outputsById?.[componentId])
 	$: filtered = recursivelyFilterInJSON(object, $search, componentId)
 	$: $hasResult[componentId] = Object.keys(filtered).length > 0
 </script>
 
-{#if object != undefined && Object.keys(object).length > 0}
+{#if render && object != undefined && Object.keys(object).length > 0}
 	{#if $hasResult[componentId] || $search == ''}
 		<div class="pl-2 !cursor-pointer" data-connection-button>
 			<ObjectViewer

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -57,8 +57,16 @@
 					<div>
 						<span class="text-xs font-semibold text-secondary p-2">State & Context</span>
 
-						<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
+						<OutputHeader
+							let:render
+							selectable={false}
+							id={'ctx'}
+							name={'App Context'}
+							first
+							color="blue"
+						>
 							<ComponentOutputViewer
+								{render}
 								componentId={'ctx'}
 								on:select={({ detail }) => {
 									$connectingInput = connectInput($connectingInput, 'ctx', detail)
@@ -67,6 +75,7 @@
 						</OutputHeader>
 
 						<OutputHeader
+							let:render
 							selectable={false}
 							id={'state'}
 							name={'State'}
@@ -74,6 +83,7 @@
 							disabled={!hasState}
 						>
 							<ComponentOutputViewer
+								{render}
 								bind:hasContent={hasState}
 								componentId={'state'}
 								on:select={({ detail }) => {

frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -11,7 +11,7 @@
 	export let expanded: boolean = false
 	export let subGrids: string[]
 	export let nameOverrides: string[] | undefined = undefined
-
+	export let render: boolean
 	const { app, connectingInput, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let selected = 0
@@ -44,7 +44,7 @@
 
 {#each subgridItems as { k, items }, index (k)}
 	<div class="ml-2 my-2">
-		{#if subGrids.length > 1}
+		{#if subGrids.length > 1 && render}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
@@ -74,6 +74,7 @@
 				{#if items.length > 0}
 					{#each items as subGridItem, index (subGridItem.id)}
 						<ComponentOutput
+							renderRec={render}
 							gridItem={subGridItem}
 							first={index === 0}
 							{expanded}

frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte

@@ -12,8 +12,9 @@
 	export let first: boolean = false
 </script>
 
-<OutputHeader renamable={false} selectable={true} {id} {name} color="blue" {first}>
+<OutputHeader let:render renamable={false} selectable={true} {id} {name} color="blue" {first}>
 	<ComponentOutputViewer
+		{render}
 		componentId={id}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)

frontend/src/lib/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte

@@ -3,13 +3,14 @@
 	import Output from './Output.svelte'
 
 	export let gridItem: GridItem
+	export let render: boolean
 </script>
 
 <div class="my-1">
 	{#if gridItem.data.type === 'menucomponent' && gridItem.data.menuItems.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.menuItems as action, index}
-				<Output id={action.id} first={index === 0} label="Menu item" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Menu item" />
 			{/each}
 		</div>
 	{/if}

frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte

@@ -10,10 +10,12 @@
 	export let id: string
 	export let first: boolean = false
 	export let label: string
+	export let renderRec: boolean
 </script>
 
-<OutputHeader renamable={false} {id} name={label} {first}>
+<OutputHeader render={renderRec} let:render renamable={false} {id} name={label} {first}>
 	<ComponentOutputViewer
+		{render}
 		componentId={id}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -18,6 +18,7 @@
 	export let selectable: boolean = true
 	export let renamable: boolean = true
 	export let disabled: boolean = false
+	export let render: boolean = true
 
 	const { manuallyOpened, search, hasResult } = getContext<ContextPanelContext>('ContextPanel')
 
@@ -200,92 +201,95 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
-	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		on:mouseenter|stopPropagation={() => {
-			if (id !== $hoverStore) {
-				$hoverStore = id
-			}
-		}}
-		on:mouseleave|stopPropagation={() => {
-			if ($hoverStore !== undefined) {
-				$hoverStore = undefined
-			}
-		}}
-		class={classNames(
-			'flex items-center justify-between p-1 cursor-pointer gap-1 truncate',
-			hoverColor[color],
-			$selectedComponent?.includes(id)
-				? openBackground[color]
-				: $connectingInput.hoveredComponent === id
-				? 'bg-[#fab157]'
-				: 'bg-surface-secondary',
-			first ? 'border-t' : '',
-			nested ? 'border-l' : '',
-			'transition-all'
-		)}
-		on:click={() => {
-			if (!disabled) {
-				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
-			}
-		}}
-		id={`output-${id}`}
-	>
-		<div class="flex">
-			<button
-				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
-				title="Select component"
-				on:click|stopPropagation={() => ($selectedComponent = [id])}
-				class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
-			>
-				<div
-					class={classNames(
-						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
-						$selectedComponent?.includes(id) ? idClass[color] : ''
-					)}
+	{#if (render && $search == '') || inSearch}
+		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			on:mouseenter|stopPropagation={() => {
+				if (id !== $hoverStore) {
+					$hoverStore = id
+				}
+			}}
+			on:mouseleave|stopPropagation={() => {
+				if ($hoverStore !== undefined) {
+					$hoverStore = undefined
+				}
+			}}
+			class={classNames(
+				'flex items-center justify-between p-1 cursor-pointer gap-1 truncate',
+				hoverColor[color],
+				$selectedComponent?.includes(id)
+					? openBackground[color]
+					: $connectingInput.hoveredComponent === id
+					? 'bg-[#fab157]'
+					: 'bg-surface-secondary',
+				first ? 'border-t' : '',
+				nested ? 'border-l' : '',
+				'transition-all'
+			)}
+			on:click={() => {
+				if (!disabled) {
+					$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+				}
+			}}
+			id={`output-${id}`}
+		>
+			<div class="flex">
+				<button
+					disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+					title="Select component"
+					on:click|stopPropagation={() => ($selectedComponent = [id])}
+					class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
 				>
-					{id}
-				</div>
-				{#if selectable && !$selectedComponent?.includes(id)}
-					<div class="px-1">
-						<Pointer size={14} />
-					</div>
-				{/if}
-			</button>
-			{#if selectable && renamable && $selectedComponent?.includes(id)}
-				<div class="h-3">
-					<IdEditor
+					<div
+						class={classNames(
+							'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+							$selectedComponent?.includes(id) ? idClass[color] : ''
+						)}
+					>
 						{id}
-						on:selected={() => ($selectedComponent = [id])}
-						on:save={({ detail }) => renameId(detail)}
-					/></div
-				>
-			{/if}
-		</div>
-		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
-			{#if ['ctx', 'state'].includes(id)}
-				<DocLink
-					docLink={id === 'state'
-						? 'https://www.windmill.dev/docs/apps/outputs#state'
-						: id === 'ctx'
-						? 'https://www.windmill.dev/docs/apps/outputs#app-context'
-						: ''}
-					size="xs2"
-				/>
-			{/if}
-			{name}
-			<div class={classNames('bg-surface-secondary rounded-sm')}>
-				{#if !open}
-					<ChevronDown size={14} color="gray" />
-				{:else if $manuallyOpened[id]}
-					<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
-				{:else}
-					<ChevronUp size={14} color="gray" />
+					</div>
+					{#if selectable && !$selectedComponent?.includes(id)}
+						<div class="px-1">
+							<Pointer size={14} />
+						</div>
+					{/if}
+				</button>
+				{#if selectable && renamable && $selectedComponent?.includes(id)}
+					<div class="h-3">
+						<IdEditor
+							{id}
+							on:selected={() => ($selectedComponent = [id])}
+							on:save={({ detail }) => renameId(detail)}
+						/></div
+					>
 				{/if}
 			</div>
+			<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+				{#if ['ctx', 'state'].includes(id)}
+					<DocLink
+						docLink={id === 'state'
+							? 'https://www.windmill.dev/docs/apps/outputs#state'
+							: id === 'ctx'
+							? 'https://www.windmill.dev/docs/apps/outputs#app-context'
+							: ''}
+						size="xs2"
+					/>
+				{/if}
+				{name}
+				<div class={classNames('bg-surface-secondary rounded-sm')}>
+					{#if !open}
+						<ChevronDown size={14} color="gray" />
+					{:else if $manuallyOpened[id]}
+						<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+					{:else}
+						<ChevronUp size={14} color="gray" />
+					{/if}
+				</div>
+			</div>
 		</div>
-	</div>
+	{/if}
+
 	<div
 		class="border-b {open
 			? 'h-full'
@@ -295,7 +299,7 @@
 			: ''}"
 	>
 		<div class={classNames(nested ? 'border-l ml-2' : '', open ? 'border-t' : '')}>
-			<slot />
+			<slot render={open && render} />
 		</div>
 	</div>
 </div>

frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -3,20 +3,21 @@
 	import Output from './Output.svelte'
 
 	export let gridItem: GridItem
+	export let render: boolean
 </script>
 
 <div class="my-1">
 	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actionButtons as action, index}
-				<Output id={action.id} first={index === 0} label="Table action" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
 			{/each}
 		</div>
 	{/if}
 	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
-				<Output id={action.id} first={index === 0} label="Table action" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
 			{/each}
 		</div>
 	{/if}