windmill-components 1.542.5 → 1.555.0

package/package/components/ArgInput.svelte.d.ts

@@ -29,6 +29,7 @@ interface Props {
             [name: string]: SchemaProperty;
         };
     } | undefined;
+    lightHeaderFont?: boolean;
     displayHeader?: boolean;
     properties?: {
         [name: string]: SchemaProperty;
@@ -79,6 +80,8 @@ interface Props {
     } | undefined) | undefined;
     workspace?: string | undefined;
     actions?: import('svelte').Snippet;
+    innerBottomSnippet?: import('svelte').Snippet;
+    fieldHeaderActions?: import('svelte').Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -105,6 +108,6 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "value" | "description" | "title" | "properties" | "defaultValue" | "placeholder" | "pattern" | "valid" | "oneOf" | "format" | "order" | "editor" | "enum_" | "itemsType" | "pickForField">;
+}, "value" | "description" | "title" | "pattern" | "properties" | "placeholder" | "valid" | "oneOf" | "format" | "defaultValue" | "order" | "editor" | "enum_" | "itemsType" | "pickForField">;
 type ArgInput = InstanceType<typeof ArgInput>;
 export default ArgInput;

package/package/components/ArrayTypeNarrowing.svelte

@@ -8,6 +8,7 @@ import Alert from './common/alert/Alert.svelte';
 import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte';
 import Toggle from './Toggle.svelte';
 import { tick } from 'svelte';
+import Select from './select/Select.svelte';
 let { canEditResourceType = false, originalType = undefined, itemsType = $bindable() } = $props();
 let selected = $state(itemsType?.type != 'string'
     ? itemsType?.type == 'object' && itemsType?.resourceType == 's3object'
@@ -22,39 +23,44 @@ let selected = $state(itemsType?.type != 'string'
 
 {#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 	<Label label="Items type">
-		<select
-			bind:value={selected}
-			onchange={() => {
-				if (selected == 'enum') {
-					itemsType = { type: 'string', enum: [] }
-				} else if (selected == 'string') {
-					itemsType = { type: 'string' }
-				} else if (selected == 'number') {
-					itemsType = { type: 'number' }
-				} else if (selected == 'object') {
-					itemsType = { ...itemsType, type: 'object' }
-				} else if (selected == 'bytes') {
-					itemsType = { type: 'string', contentEncoding: 'base64' }
-				} else if (selected == 'resource') {
-					itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
-				} else if (selected == 's3object') {
-					itemsType = { type: 'object', resourceType: 's3object' }
-				} else {
-					itemsType = undefined
+		<Select
+			bind:value={
+				() => selected,
+				(v) => {
+					selected = v
+					if (selected == 'enum') {
+						itemsType = { type: 'string', enum: [] }
+					} else if (selected == 'string') {
+						itemsType = { type: 'string' }
+					} else if (selected == 'number') {
+						itemsType = { type: 'number' }
+					} else if (selected == 'object') {
+						itemsType = { ...itemsType, type: 'object' }
+					} else if (selected == 'bytes') {
+						itemsType = { type: 'string', contentEncoding: 'base64' }
+					} else if (selected == 'resource') {
+						itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
+					} else if (selected == 's3object') {
+						itemsType = { type: 'object', resourceType: 's3object' }
+					} else {
+						itemsType = undefined
+					}
 				}
-			}}
-			id="array-type-narrowing"
-		>
-			<option value="string"> Items are strings</option>
-			<option value="enum">Items are strings from an enum</option>
-			{#if originalType != 'string[]'}
-				<option value="s3object">Items are S3 objects</option>
-				<option value="object"> Items are objects (JSON)</option>
-				<option value="resource"> Items are resources</option>
-				<option value="number">Items are numbers</option>
-				<option value="bytes">Items are bytes</option>
-			{/if}
-		</select>
+			}
+			items={[
+				{ value: 'string', label: "Items are strings or objects with a 'label/value' field" },
+				{ value: 'enum', label: 'Items are strings from an enum' },
+				...(originalType != 'string[]'
+					? [
+							{ value: 's3object', label: 'Items are S3 objects' },
+							{ value: 'object', label: 'Items are objects (JSON)' },
+							{ value: 'resource', label: 'Items are resources' },
+							{ value: 'number', label: 'Items are numbers' },
+							{ value: 'bytes', label: 'Items are bytes' }
+						]
+					: [])
+			] as { value: string; label: string }[]}
+		/>
 	</Label>
 {:else if itemsType?.resourceType}
 	<Label label="Resource type">

package/package/components/AutoscalingEvents.svelte

@@ -4,14 +4,18 @@ import { Button, Skeleton } from './common';
 import { twMerge } from 'tailwind-merge';
 import TimeAgo from './TimeAgo.svelte';
 import { enterpriseLicense } from '../stores';
-export let worker_group;
-let loading = true;
-let events = undefined;
-$: worker_group && loadEvents();
+import { untrack } from 'svelte';
+let { worker_group } = $props();
+let loading = $state(true);
+let events = $state(undefined);
+let limit = $state(5);
 async function loadEvents() {
     loading = true;
     try {
-        events = await ConfigService.listAutoscalingEvents({ workerGroup: worker_group });
+        events = await ConfigService.listAutoscalingEvents({
+            workerGroup: worker_group,
+            perPage: limit
+        });
     }
     catch (e) {
         events = [];
@@ -21,6 +25,10 @@ async function loadEvents() {
         loading = false;
     }
 }
+$effect(() => {
+    limit;
+    worker_group && untrack(() => loadEvents());
+});
 </script>
 
 <div>
@@ -66,5 +74,13 @@ async function loadEvents() {
 				{/each}
 			</div>
 		{/if}
+		<div class="mt-4 flex">
+			<Button color="light" size="xs2" on:click={() => (limit = limit + 25)}>Show more</Button>
+		</div>
+		{#if limit > 50}
+			<div class="mt-4 flex text-xs text-tertiary">
+				Note that autoscaling events are only stored for the last 30 days.
+			</div>
+		{/if}
 	{/if}
 </div>

package/package/components/AutoscalingEvents.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AutoscalingEvents: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     worker_group: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AutoscalingEvents = InstanceType<typeof AutoscalingEvents>;
+}
+declare const AutoscalingEvents: import("svelte").Component<Props, {}, "">;
+type AutoscalingEvents = ReturnType<typeof AutoscalingEvents>;
 export default AutoscalingEvents;

package/package/components/ChannelSelector.svelte

@@ -1,28 +1,102 @@
 <script lang="ts">import Select from './select/Select.svelte';
-let { disabled = false, placeholder = 'Select channel', selectedChannel = $bindable(undefined), containerClass = 'w-64', minWidth = '160px', channels = [] } = $props();
+import { WorkspaceService } from '../gen';
+import { workspaceStore } from '../stores';
+import { debounce } from '../utils';
+let { disabled = false, placeholder = 'Select channel', selectedChannel = $bindable(undefined), containerClass = 'w-64', minWidth = '160px', channels = undefined, teamId, onError } = $props();
+let isFetching = $state(false);
+let searchResults = $state([]);
+// Only enable search mode if no channels are provided AND teamId is provided
+const searchMode = !channels && !!teamId;
+// Determine which channels to show: provided channels or search results
+// In search mode, include the selected channel if it exists
+let displayChannels = $derived(() => {
+    const baseChannels = channels || searchResults;
+    if (searchMode && selectedChannel && !baseChannels.find(c => c.channel_id === selectedChannel?.channel_id)) {
+        return [selectedChannel, ...baseChannels];
+    }
+    return baseChannels;
+});
+// Create separate filter text for search mode
+let searchFilterText = $state('');
+// Debounced search function
+const debouncedSearch = debounce(async (query) => {
+    await searchChannels(query);
+}, 500);
+// Watch for search filter text changes (only in search mode)
+$effect(() => {
+    if (searchMode) {
+        if (searchFilterText.length >= 1) {
+            debouncedSearch.debounced(searchFilterText);
+        }
+        else if (searchFilterText.length === 0) {
+            searchResults = [];
+        }
+    }
+});
+async function searchChannels(query) {
+    if (!query || !teamId)
+        return;
+    isFetching = true;
+    try {
+        const response = await WorkspaceService.listAvailableTeamsChannels({
+            workspace: $workspaceStore,
+            teamId: teamId,
+            search: query
+        });
+        searchResults = response || [];
+        isFetching = false;
+        return searchResults;
+    }
+    catch (error) {
+        isFetching = false;
+        onError?.(error);
+        console.error('Error searching channels:', error);
+        searchResults = [];
+        return [];
+    }
+}
 </script>
 
 <div class={containerClass}>
 	<div class="flex items-center gap-2">
 		<div class="flex-grow" style="min-width: {minWidth};">
-			<Select
-				containerStyle={'min-width: ' + minWidth}
-				items={channels.map((channel) => ({
-					label: channel.channel_name ?? 'Unknown Channel',
-					value: channel.channel_id ?? ''
-				}))}
-				{placeholder}
-				bind:value={
-					() => selectedChannel?.channel_id,
-					(value) => (selectedChannel = channels.find((channel) => channel.channel_id === value))
-				}
-				clearable
-				disabled={disabled || channels.length === 0}
-			/>
+			{#if searchMode}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={searchFilterText.length >= 1 || (searchFilterText.length === 0 && selectedChannel) ? displayChannels().filter(channel => channel.channel_id && channel.channel_name).map((channel) => ({
+						label: channel.channel_name ?? 'Unknown Channel',
+						value: channel.channel_id ?? ''
+					})) : []}
+					placeholder={isFetching ? "Searching..." : (teamId ? "Search channels..." : "Select a team first")}
+					clearable
+					disabled={disabled || isFetching || !teamId}
+					bind:filterText={searchFilterText}
+					bind:value={
+						() => selectedChannel?.channel_id,
+						(value) => {
+							selectedChannel = value ? displayChannels().find((channel) => channel.channel_id === value) : undefined
+						}
+					}
+				/>
+			{:else}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={displayChannels().filter(channel => channel.channel_id && channel.channel_name).map((channel) => ({
+						label: channel.channel_name ?? 'Unknown Channel',
+						value: channel.channel_id ?? ''
+					}))}
+					{placeholder}
+					clearable
+					disabled={disabled || displayChannels().length === 0}
+					bind:value={
+						() => selectedChannel?.channel_id,
+						(value) => {
+							selectedChannel = value ? displayChannels().find((channel) => channel.channel_id === value) : undefined
+						}
+					}
+				/>
+			{/if}
 		</div>
 	</div>
 
-	{#if channels.length === 0 && !disabled}
-		<div class="text-xs text-tertiary mt-1">No channels available</div>
-	{/if}
 </div>

package/package/components/ChannelSelector.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props {
     containerClass?: string;
     minWidth?: string;
     channels?: ChannelItem[];
+    teamId?: string;
+    onError?: (error: Error) => void;
 }
 declare const ChannelSelector: import("svelte").Component<Props, {}, "selectedChannel">;
 type ChannelSelector = ReturnType<typeof ChannelSelector>;

package/package/components/ConnectionSection.svelte

@@ -37,7 +37,18 @@ async function connectTeams() {
         onLoadSettings();
     }
     catch (error) {
-        sendUserToast('Failed to connect to Teams', true);
+        // Extract the actual error message from the API response
+        let errorMessage = 'Failed to connect to Teams';
+        if (typeof error?.body === 'string') {
+            errorMessage = error.body;
+        }
+        else if (error?.body?.message) {
+            errorMessage = error.body.message;
+        }
+        else if (error?.message && error.message !== 'Bad Request') {
+            errorMessage = error.message;
+        }
+        sendUserToast(errorMessage, true);
         console.error('Error connecting to Teams:', error);
     }
 }

package/package/components/DateTimeInput.svelte

@@ -5,6 +5,7 @@ import { Button } from './common';
 import { Clock, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
+import { inputBaseClass, inputBorderClass } from './text_input/TextInput.svelte';
 let { value = $bindable(undefined), clearable = false, autofocus = false, useDropdown = false, minDate = undefined, maxDate = undefined, disabled = undefined, inputClass = undefined } = $props();
 let date = $state(undefined);
 let time = $state(undefined);
@@ -36,7 +37,7 @@ function parseDateAndTime(date, time) {
         let newDate = new Date(`${date}T${time}`);
         if (newDate.toString() === 'Invalid Date')
             return;
-        if (newDate.getFullYear() < 2000)
+        if (newDate.getFullYear() < 1900)
             return;
         value = newDate.toISOString();
         dispatchIfMounted('change', value);
@@ -75,20 +76,21 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		bind:value={date}
 		{autofocus}
 		{disabled}
-		class={twMerge('h-8 text-sm !w-3/4 ', inputClass)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-3/4 ', inputClass)}
 		min={minDate}
 		max={maxDate}
 	/>
 	<input
 		type="time"
 		bind:value={time}
-		class={twMerge('h-8 text-sm !w-1/4 min-w-[100px] ', inputClass)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-1/4 min-w-[100px] ', inputClass)}
 		{disabled}
 	/>
 	<Button
-		variant="border"
+		variant="contained"
 		color="light"
-		wrapperClasses="h-8"
+		wrapperClasses="h-full"
+		btnClasses="bg-surface-secondary"
 		startIcon={{
 			icon: Clock
 		}}
@@ -133,7 +135,7 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		<Button
 			variant="border"
 			color="light"
-			wrapperClasses="h-8"
+			wrapperClasses="h-full"
 			{disabled}
 			on:click={() => {
 				value = undefined

package/package/components/DeployButton.svelte

@@ -53,7 +53,7 @@ let dropdownOpen = $state(false);
 				bind:this={msgInput}
 			/>
 			<Button
-				size="xs"
+				size="sm"
 				on:click={async () => dispatch('save', deploymentMsg)}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}

package/package/components/Dev.svelte

@@ -5,7 +5,7 @@ import { WindmillIcon } from './icons';
 import LogPanel from './scriptEditor/LogPanel.svelte';
 import { JobService, OpenAPI, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
-import { setCopilotInfo, userStore, workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { emptySchema, readFieldsRecursively, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { onDestroy, onMount, setContext, untrack } from 'svelte';
@@ -29,6 +29,8 @@ import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
 import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
+import { setCopilotInfo } from '../aiStore';
+let { initial = undefined } = $props();
 let flowCopilotContext = {
     shouldUpdatePropertyType: writable({}),
     exprsToSet: writable({}),
@@ -81,10 +83,13 @@ const flowPreviewContent = $derived(flowPreviewButtons?.getFlowPreviewContent())
 const job = $derived(flowPreviewContent?.getJob());
 let showJobStatus = $state(false);
 let currentScript = $state(undefined);
+let mode = $state('script');
+let lastPath = undefined;
 let schema = $state(emptySchema());
 const href = window.location.href;
 const indexQ = href.indexOf('?');
 const searchParams = indexQ > -1 ? new URLSearchParams(href.substring(indexQ)) : undefined;
+let relativePaths = $state([]);
 if (searchParams?.has('local')) {
     connectWs();
 }
@@ -93,6 +98,15 @@ let lockChanges = false;
 let timeout = undefined;
 let loadingCodebaseButton = $state(false);
 let lastCommandId = '';
+if (initial) {
+    if (initial.type == 'script') {
+        replaceScript(initial.script);
+    }
+    else if (initial.type == 'flow') {
+        replaceFlow(initial.flow);
+    }
+    modeInitialized = true;
+}
 const el = (event) => {
     // sendUserToast(`Received message from parent ${event.data.type}`, true)
     if (event.data.type == 'runTest') {
@@ -104,7 +118,7 @@ const el = (event) => {
     }
     else if (event.data.type == 'testBundle') {
         if (event.data.id == lastCommandId) {
-            testBundle(event.data.file, event.data.isTar);
+            testBundle(event.data.file, event.data.isTar, event.data.format);
         }
         else {
             sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
@@ -166,7 +180,7 @@ onMount(() => {
     });
     window.parent?.postMessage({ type: 'refresh' }, '*');
 });
-async function testBundle(file, isTar) {
+async function testBundle(file, isTar, format) {
     jobLoader?.abstractRun(async () => {
         try {
             const form = new FormData();
@@ -176,7 +190,8 @@ async function testBundle(file, isTar) {
                 path: currentScript?.path,
                 args,
                 language: currentScript?.language,
-                tag: currentScript?.tag
+                tag: currentScript?.tag,
+                format
             }));
             // sendUserToast(JSON.stringify(file))
             if (isTar) {
@@ -312,8 +327,6 @@ async function onKeyDown(event) {
         document.execCommand('paste');
     }
 }
-let relativePaths = $state([]);
-let lastPath = undefined;
 async function replaceScript(lastEdit) {
     mode = 'script';
     currentScript = lastEdit;
@@ -338,7 +351,6 @@ async function replaceScript(lastEdit) {
         validCode = false;
     }
 }
-let mode = $state('script');
 const flowStore = $state({
     val: {
         summary: '',
@@ -461,6 +473,9 @@ let token = $derived($page.url.searchParams.get('wm_token') ?? undefined);
 let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined);
 let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'));
 let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4');
+$effect.pre(() => {
+    setContext('AuthToken', { token });
+});
 $effect.pre(() => {
     if (token) {
         OpenAPI.WITH_CREDENTIALS = true;
@@ -536,7 +551,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 
 <main class="h-screen w-full">
 	{#if mode == 'script'}
-		<div class="flex flex-col min-h-full overflow-auto">
+		<div class="flex flex-col min-h-full min-h-screen overflow-auto">
 			<div class="absolute top-0 left-2">
 				<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
 			</div>
@@ -628,7 +643,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					</Button>
 				{/if}
 			</div>
-			<Splitpanes horizontal class="h-full">
+			<Splitpanes horizontal style="height: 1000px;">
 				<Pane size={33}>
 					<div class="px-2">
 						<div class="break-words relative font-sans">

package/package/components/Dev.svelte.d.ts

@@ -1,3 +1,25 @@
-declare const Dev: import("svelte").Component<Record<string, never>, {}, "">;
+import { type Preview, type OpenFlow } from '../gen';
+type LastEditScript = {
+    content: string;
+    path: string;
+    language: Preview['language'];
+    lock?: string;
+    isCodebase?: boolean;
+    tag?: string;
+};
+type LastEditFlow = {
+    flow: OpenFlow;
+    uriPath: string;
+};
+type $$ComponentProps = {
+    initial?: {
+        type: 'script';
+        script: LastEditScript;
+    } | {
+        type: 'flow';
+        flow: LastEditFlow;
+    } | undefined;
+};
+declare const Dev: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dev = ReturnType<typeof Dev>;
 export default Dev;

package/package/components/DisplayResult.svelte

@@ -22,7 +22,7 @@ import DownloadCsv from './table/DownloadCsv.svelte';
 import { convertJsonToCsv } from './table/tableUtils';
 import Tooltip from './Tooltip.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
-import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte';
+import { getContext, hasContext, createEventDispatcher, onDestroy, untrack } from 'svelte';
 import { toJsonStr } from '../utils';
 import { userStore } from '../stores';
 import ResultStreamDisplay from './ResultStreamDisplay.svelte';
@@ -45,17 +45,29 @@ function isTableCol(result, keys) {
 }
 function isTableRowObject(json) {
     // check array of objects (with possible a first row of headers)
+    const hasHeaders = Array.isArray(json[0]) &&
+        json[0].length > 0 &&
+        json[0].length <= 50 &&
+        json[0].every((item) => typeof item === 'string');
+    return isTableRowObjectInner(json, hasHeaders);
+}
+function isTableRowObjectInner(json, hasHeaders) {
     return (Array.isArray(json) &&
-        json.length > 0 &&
-        (json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item)) ||
-            (Array.isArray(json[0]) &&
-                json[0].every((item) => typeof item === 'string') &&
-                json
-                    .slice(1)
-                    .every((item) => item &&
-                    typeof item === 'object' &&
-                    Object.keys(item).length > 0 &&
-                    !Array.isArray(item)))));
+        json.length > (hasHeaders ? 1 : 0) &&
+        json.every((item, index) => {
+            if (hasHeaders && index === 0) {
+                return true;
+            }
+            if (item && typeof item === 'object') {
+                let keys = Object.keys(item);
+                if (keys.length > 0 && !Array.isArray(item)) {
+                    if (hasHeaders || keys.length <= 50) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }));
 }
 let largeObject = $state(undefined);
 function checkIfS3(result, keys) {
@@ -92,6 +104,7 @@ function inferResultKind(result) {
                 return keys[0];
             }
             let size = roughSizeOfObject(result);
+            console.debug('size of object', size);
             // Otherwise, check if the result is too large (10kb) for json
             if (size > TABLE_MAX_SIZE) {
                 largeObject = true;
@@ -252,20 +265,18 @@ function handleArrayOfObjectsHeaders(json) {
         json.length > 0 &&
         Array.isArray(json[0]) &&
         json[0].length > 0 &&
-        json[0].every((item) => typeof item === 'string') &&
-        json
-            .slice(1)
-            .every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item))) {
+        json[0].every((item) => typeof item === 'string')) {
         const headers = json[0];
-        const rows = json.slice(1);
-        const result = rows.map((row) => {
+        const rows = new Array(json.length - 1);
+        for (let i = 1; i < json.length; i++) {
             const obj = {};
-            for (const header of headers) {
-                obj[header] = row[header];
+            const row = json[i];
+            for (let j = 0; j < headers.length; j++) {
+                obj[headers[j]] = row[headers[j]];
             }
-            return obj;
-        });
-        return result;
+            rows[i - 1] = obj;
+        }
+        return rows;
     }
     return json;
 }
@@ -340,7 +351,9 @@ onDestroy(() => {
 $effect(() => {
     ;
     [result];
-    resultKind = inferResultKind(result);
+    untrack(() => {
+        resultKind = inferResultKind(result);
+    });
 });
 $effect(() => {
     chooseToolbarLocation(!is_render_all &&