windmill-components 1.511.1 → 1.531.0

package/package/components/DisplayResult.svelte

@@ -25,13 +25,15 @@ import HighlightTheme from './HighlightTheme.svelte';
 import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte';
 import { toJsonStr } from '../utils';
 import { userStore } from '../stores';
+import ResultStreamDisplay from './ResultStreamDisplay.svelte';
+import { twMerge } from 'tailwind-merge';
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
 const dispatch = createEventDispatcher();
 let resultKind = $state();
 let hasBigInt = $state(false);
-let { result, requireHtmlApproval = false, filename = undefined, disableExpand = false, jobId = undefined, workspaceId = undefined, hideAsJson = false, noControls = false, drawerOpen = $bindable(false), nodeId = undefined, language = undefined, appPath = undefined, customUi = undefined, isTest = true, externalToolbarAvailable = false, forceJson = $bindable(false), copilot_fix, children } = $props();
+let { result, requireHtmlApproval = false, filename = undefined, disableExpand = false, jobId = undefined, workspaceId = undefined, hideAsJson = false, noControls = false, drawerOpen = $bindable(false), nodeId = undefined, language = undefined, appPath = undefined, customUi = undefined, isTest = true, externalToolbarAvailable = false, forceJson = $bindable(false), result_stream = undefined, fixTableSizingToParent = false, copilot_fix, children, loading = false, growVertical = false } = $props();
 let enableHtml = $state(false);
 let s3FileDisplayRawMode = $state(false);
 function isTableRow(result) {
@@ -352,7 +354,15 @@ $effect(() => {
 </script>
 
 <HighlightTheme />
-{#if is_render_all}
+
+{#if result_stream && result == undefined}
+	<div class="flex flex-col w-full gap-2">
+		<div class="flex items-center gap-2 text-tertiary">
+			<Loader2 class="animate-spin" size={16} /> Streaming result
+		</div>
+		<ResultStreamDisplay {result_stream} />
+	</div>
+{:else if is_render_all}
 	<div class="flex flex-col w-full gap-2">
 		{#if !noControls}
 			<div class="text-tertiary text-sm">
@@ -392,9 +402,11 @@ $effect(() => {
 	<div class="text-red-400">Non displayable object</div>
 {:else}
 	<div
-		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
-			? ''
-			: 'min-h-[160px]'}"
+		class={twMerge(
+			'inline-highlight relative grow flex flex-col',
+			['plain', 'markdown'].includes(resultKind ?? '') ? 'min-h-0' : 'min-h-[160px]',
+			growVertical ? '' : 'h-full'
+		)}
 	>
 		{#if result != undefined && length != undefined && largeObject != undefined}
 			<div class="flex justify-between items-center w-full">
@@ -447,16 +459,36 @@ $effect(() => {
 					{/if}
 				</div>
 			</div>
-			<div class="grow">
+			<div class="grow relative">
 				{#if !forceJson && resultKind === 'table-col'}
-					{@const data = 'table-col' in result ? result['table-col'] : result}
-					<AutoDataTable objects={objectOfArraysToObjects(data)} />
+					{@const data =
+						typeof result === 'object' && 'table-col' in result ? result['table-col'] : result}
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={objectOfArraysToObjects(data)}
+					/>
 				{:else if !forceJson && resultKind === 'table-row'}
-					{@const data = 'table-row' in result ? result['table-row'] : result}
-					<AutoDataTable objects={arrayOfRowsToObjects(data)} />
+					{@const data =
+						typeof result === 'object' && 'table-row' in result ? result['table-row'] : result}
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={arrayOfRowsToObjects(data)}
+					/>
 				{:else if !forceJson && resultKind === 'table-row-object'}
-					{@const data = 'table-row-object' in result ? result['table-row-object'] : result}
-					<AutoDataTable objects={handleArrayOfObjectsHeaders(data)} />
+					{@const data =
+						typeof result === 'object' && 'table-row-object' in result
+							? result['table-row-object']
+							: result}
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={handleArrayOfObjectsHeaders(data)}
+					/>
 				{:else if !forceJson && resultKind === 'html'}
 					<div class="h-full">
 						{#if !requireHtmlApproval || enableHtml}
@@ -538,7 +570,7 @@ $effect(() => {
 				{:else if !forceJson && resultKind === 'plain'}<div class="h-full text-2xs"
 						><pre class="whitespace-pre-wrap"
 							>{typeof result === 'string' ? result : result?.['result']}</pre
-						>{#if !noControls}
+						>{#if !noControls && !loading}
 							<div class="flex">
 								<Button
 									on:click={() =>
@@ -755,7 +787,7 @@ $effect(() => {
 										>
 									</button>
 								{:else if !s3object?.disable_download}
-									<FileDownload {s3object} />
+									<FileDownload {workspaceId} {s3object} {appPath} />
 								{:else}
 									<div class="flex text-secondary pt-2">{s3object?.s3} (download disabled)</div>
 								{/if}

package/package/components/DisplayResult.svelte.d.ts

@@ -11,14 +11,18 @@ interface Props {
     noControls?: boolean;
     drawerOpen?: boolean;
     nodeId?: string | undefined;
+    loading?: boolean | undefined;
     language?: string | undefined;
     appPath?: string | undefined;
     customUi?: DisplayResultUi | undefined;
     isTest?: boolean;
     externalToolbarAvailable?: boolean;
     forceJson?: boolean;
+    result_stream?: string | undefined;
+    fixTableSizingToParent?: boolean;
     copilot_fix?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
+    growVertical?: boolean;
 }
 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> & {
@@ -40,6 +44,6 @@ declare const DisplayResult: $$__sveltets_2_IsomorphicComponent<Props, {
 }, {}, {
     openDrawer: () => void;
     getToolbarLocation: () => "external" | "self" | undefined;
-}, "drawerOpen" | "forceJson">;
+}, "forceJson" | "drawerOpen">;
 type DisplayResult = InstanceType<typeof DisplayResult>;
 export default DisplayResult;

package/package/components/DynSelect.svelte

@@ -15,63 +15,87 @@ function validSelectObject(x) {
 </script>
 
 <script lang="ts">import { usePromise } from '../svelte5Utils.svelte';
-import { deepEqual } from 'fast-equals';
-import JobLoader from './JobLoader.svelte';
+import JobLoader, {} from './JobLoader.svelte';
 import Select from './select/Select.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
+import {} from '../utils';
+import { deepEqual } from 'fast-equals';
 import { untrack } from 'svelte';
-import { readFieldsRecursively } from '../utils';
-let { value = $bindable(), helperScript, entrypoint, args: _args, name } = $props();
-let args = $state(structuredClone($state.snapshot(_args)));
-$effect(() => {
-    readFieldsRecursively(_args, { excludeField: [name] });
-    untrack(() => !deepEqual(args, _args) && (args = $state.snapshot(_args)));
-});
+let { value = $bindable(), helperScript, entrypoint, otherArgs: otherArgs } = $props();
+let resultJobLoader = $state();
+let _items = usePromise(getItemsFromOptions, { clearValueOnRefresh: false });
+let items = $derived(_items.value);
+let filterText = $state('');
+let open = $state(false);
 async function getItemsFromOptions() {
     return new Promise((resolve, reject) => {
         let cb = {
-            done(res) {
-                if (!res || !Array.isArray(res)) {
-                    reject('Result was not an array');
+            doneResult({ result }) {
+                if (!result || !Array.isArray(result)) {
+                    if (result?.error?.message && result?.error?.name) {
+                        reject('Error in DynSelect function execution: ' +
+                            result?.error?.name +
+                            ' - ' +
+                            result?.error?.message);
+                    }
+                    else {
+                        reject('Result was not an array but ' + JSON.stringify(result, null, 2));
+                    }
                     return;
                 }
-                if (res.length == 0)
+                if (result.length == 0)
                     resolve([]);
-                if (res.every((x) => typeof x == 'string')) {
-                    res = res.map((x) => ({ label: x, value: x }));
+                if (result.every((x) => typeof x == 'string')) {
+                    result = result.map((x) => ({ label: x, value: x }));
                 }
-                else if (res.find((x) => validSelectObject(x) != undefined)) {
-                    reject(validSelectObject(res.find((x) => validSelectObject(x) != undefined)));
-                }
-                else {
-                    if (filterText != undefined && filterText != '')
-                        res = res.filter((x) => x['label'].includes(filterText));
-                    resolve(res);
+                else if (result.find((x) => validSelectObject(x) != undefined)) {
+                    reject(validSelectObject(result.find((x) => validSelectObject(x) != undefined)));
+                    return;
                 }
+                resolve(result);
             },
             cancel: () => reject(),
-            error: (err) => reject(err)
+            doneError({ id, error }) {
+                reject(error);
+            }
         };
         helperScript?.type == 'inline'
-            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
-            : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
+            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
+            : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
     });
 }
-let _items = usePromise(getItemsFromOptions);
-let items = $derived(_items.value);
+let neverLoaded = $state(true);
+$effect(() => {
+    if (_items.value && value) {
+        if (!_items.value.find((x) => x.value == value)) {
+            value = undefined;
+        }
+    }
+});
+let lastArgs = $state.snapshot(otherArgs);
+let timeout = $state();
+let nargs = $state($state.snapshot(otherArgs));
+$effect(() => {
+    otherArgs;
+    untrack(() => clearTimeout(timeout));
+    timeout = setTimeout(() => {
+        nargs = $state.snapshot(otherArgs);
+    }, 1000);
+});
 $effect(() => {
     ;
-    [args, name, entrypoint, helperScript, filterText];
-    untrack(() => _items.refresh());
+    [filterText, entrypoint, helperScript];
+    if (resultJobLoader && (open || neverLoaded || !deepEqual(lastArgs, nargs))) {
+        neverLoaded = false;
+        lastArgs = $state.snapshot(otherArgs);
+        _items.refresh();
+    }
 });
-let resultJobLoader = $state();
-let filterText = $state('');
-let open = $state(false);
 </script>
 
 {#if helperScript}
-	<JobLoader bind:this={resultJobLoader} />
+	<JobLoader onlyResult bind:this={resultJobLoader} />
 
 	<div class="w-full flex-col flex">
 		<Select
@@ -85,7 +109,7 @@ let open = $state(false);
 		/>
 		{#if _items.error}
 			<div class="text-red-400 text-2xs">
-				error: <Tooltip>{JSON.stringify(_items.error)}</Tooltip>
+				error: <Tooltip>{_items.error}</Tooltip>
 			</div>
 		{/if}
 	</div>

package/package/components/DynSelect.svelte.d.ts

@@ -1,17 +1,9 @@
-import type { Script } from '../gen';
+import { type DynamicSelect } from '../utils';
 interface Props {
     value?: any;
-    helperScript?: {
-        type: 'inline';
-        path?: string;
-        lang: Script['language'];
-        code: string;
-    } | {
-        type: 'hash';
-        hash: string;
-    };
+    helperScript?: DynamicSelect.HelperScript;
     entrypoint: string;
-    args?: Record<string, any>;
+    otherArgs?: Record<string, any>;
     name: string;
 }
 declare const DynSelect: import("svelte").Component<Props, {}, "value">;

package/package/components/EditableSchemaForm.svelte

@@ -17,18 +17,38 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { emptyString } from '../utils';
+import { DynamicSelect, emptyString } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
 import { tweened } from 'svelte/motion';
+import Section from './Section.svelte';
+import Editor from './Editor.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, openEditTab, addProperty, runButton, extraTab } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
     }
+    if (dynSelectLang === undefined) {
+        dynSelectLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
+    }
+    if (dynSelectCode === undefined) {
+        dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
+    }
+});
+$effect(() => {
+    if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
+        if (dynSelectCode && dynSelectCode.trim()) {
+            schema['x-windmill-dyn-select-code'] = dynSelectCode.trim();
+            schema['x-windmill-dyn-select-lang'] = dynSelectLang;
+        }
+        else {
+            delete schema['x-windmill-dyn-select-code'];
+            delete schema['x-windmill-dyn-select-lang'];
+        }
+    }
 });
 export function setDefaults() {
     const nargs = {};
@@ -73,6 +93,7 @@ function alignOrderWithProperties(schema) {
 function onSchemaChange() {
     let editSchema = false;
     if (alignOrderWithProperties(schema)) {
+        console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2));
         editSchema = true;
     }
     let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
@@ -95,9 +116,11 @@ function computeSelected(property) {
         ? property.type
         : property.format === 'resource-s3_object'
             ? 'S3'
-            : property.oneOf && property.oneOf.length >= 2
-                ? 'oneOf'
-                : 'object';
+            : property.format?.startsWith('dynselect-')
+                ? 'dynselect'
+                : property.oneOf && property.oneOf.length >= 2
+                    ? 'oneOf'
+                    : 'object';
 }
 export function openField(key) {
     opened = key;
@@ -150,6 +173,7 @@ let jsonView = $state(customUi?.jsonOnly == true);
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let error = $state(undefined);
 let editor = $state(undefined);
+let dynamicSelectEditor = $state(undefined);
 export function updateJson() {
     schemaString = JSON.stringify(schema, null, '\t');
     editor?.setCode(schemaString);
@@ -191,6 +215,37 @@ $effect(() => {
 $effect(() => {
     !!editTab ? openEditTabFn() : closeEditTab();
 });
+let dynSelectFunctions = $derived(Object.entries(schema?.properties ?? {})
+    .filter(([_, property]) => {
+    const props = property;
+    return (props.type === 'object' &&
+        (props.format?.startsWith('dynselect-') || props.format?.startsWith('dynselect_')));
+})
+    .map(([fieldName, _]) => fieldName.replace(/\s+/g, '_')));
+let typeOptions = [
+    ['String', 'string'],
+    ['Number', 'number'],
+    ['Integer', 'integer'],
+    ['Object', 'object'],
+    ['OneOf', 'oneOf'],
+    ['Array', 'array'],
+    ['Boolean', 'boolean'],
+    ['S3 Object', 'S3']
+];
+if (showDynSelectOpt) {
+    typeOptions.push(['DynSelect', 'dynselect']);
+}
+function initDynSelectFn(lang) {
+    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+    return Object.entries(schema?.properties ?? {})
+        .map(([functionName]) => generateFn(functionName))
+        .join('');
+}
+function updateDynSelectCode(functionName, lang = 'bun') {
+    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+    const code = generateFn(functionName);
+    dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
+}
 </script>
 
 <div class="w-full h-full">
@@ -249,6 +304,11 @@ $effect(() => {
 								}
 								tick().then(() => dispatch('change', schema))
 							}}
+							helperScript={{
+								type: 'inline',
+								code: dynSelectCode!,
+								lang: dynSelectLang!
+							}}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
 							{diff}
@@ -263,6 +323,57 @@ $effect(() => {
 						/>
 
 						{@render runButton?.()}
+
+						<div class="h-full">
+							{#if dynSelectFunctions.length > 0}
+								<Section
+									label="Dynamic select functions"
+									collapsable={true}
+									collapsed={false}
+									class="text-sm"
+								>
+									<div class="flex flex-col gap-2 h-full">
+										{#if dynSelectFunctions.length > 0}
+											<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
+												<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+													Expected Functions for Dynamic Select Fields:
+												</div>
+												<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
+													{#each dynSelectFunctions as functionName}
+														<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
+															{functionName}()
+														</li>
+													{/each}
+												</ul>
+											</div>
+										{/if}
+										<ToggleButtonGroup
+											bind:selected={dynSelectLang}
+											on:selected={({ detail }) => {
+												dynSelectCode = initDynSelectFn(detail)
+											}}
+										>
+											{#snippet children({ item })}
+												<ToggleButton value="bun" label="Typescript (Bun)" {item} />
+												<ToggleButton value="python3" label="Python" {item} />
+											{/snippet}
+										</ToggleButtonGroup>
+										{#key dynSelectLang}
+											<div class="border w-full h-full">
+												<Editor
+													bind:this={dynamicSelectEditor}
+													class="flex flex-1 grow h-80 w-full"
+													scriptLang={dynSelectLang}
+													useWebsockets={false}
+													automaticLayout
+													bind:code={dynSelectCode}
+												/>
+											</div>
+										{/key}
+									</div>
+								</Section>
+							{/if}
+						</div>
 					</div>
 				</div>
 			</Pane>
@@ -424,6 +535,7 @@ $effect(() => {
 																				(v) => {
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
+																					const isDynSelect = v == 'dynselect'
 
 																					const emptyProperty = {
 																						contentEncoding: undefined,
@@ -449,6 +561,15 @@ $effect(() => {
 																							type: 'object',
 																							format: 'resource-s3_object'
 																						}
+																					} else if (isDynSelect) {
+																						const functionName = argName.replace(/\s+/g, '_')
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							format: 'dynselect-' + functionName
+																						}
+																						updateDynSelectCode(argName, dynSelectLang)
+																						dynamicSelectEditor?.setCode(dynSelectCode || '')
 																					} else if (isOneOf) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
@@ -465,7 +586,8 @@ $effect(() => {
 																										property_1: {
 																											type: 'string'
 																										}
-																									}
+																									},
+																									order: ['property_1']
 																								},
 																								{
 																									title: 'Option 2',
@@ -478,7 +600,8 @@ $effect(() => {
 																										property_2: {
 																											type: 'string'
 																										}
-																									}
+																									},
+																									order: ['property_2']
 																								}
 																							]
 																						}
@@ -498,7 +621,7 @@ $effect(() => {
 																			}}
 																		>
 																			{#snippet children({ item })}
-																				{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
+																				{#each typeOptions as x}
 																					<ToggleButton value={x[1]} label={x[0]} {item} />
 																				{/each}
 																			{/snippet}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Schema } from '../common';
+import { type ScriptLang } from '../gen';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { EditableSchemaFormUi } from './custom_ui';
 interface Props {
@@ -27,6 +28,9 @@ interface Props {
     customUi?: EditableSchemaFormUi | undefined;
     pannelExtraButtonWidth?: number;
     class?: string;
+    dynSelectCode?: string | undefined;
+    dynSelectLang?: ScriptLang | undefined;
+    showDynSelectOpt?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;
@@ -59,6 +63,6 @@ declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     openField: (key: string) => void;
     deleteField: (key: string) => void;
     updateJson: () => void;
-}, "args" | "schema" | "isValid" | "editPanelSize">;
+}, "args" | "schema" | "isValid" | "editPanelSize" | "dynSelectCode" | "dynSelectLang">;
 type EditableSchemaForm = InstanceType<typeof EditableSchemaForm>;
 export default EditableSchemaForm;

package/package/components/Editor.svelte

@@ -83,7 +83,7 @@ import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode } from '../stores';
+import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode, relativeLineNumbers } from '../stores';
 import { editorConfig, updateOptions } from '../editorUtils';
 import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
@@ -107,9 +107,10 @@ import AIChatInlineWidget from './copilot/chat/AIChatInlineWidget.svelte';
 import { writable } from 'svelte/store';
 import { formatResourceTypes } from './copilot/chat/script/core';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-import { editorPositionMap } from '../utils';
+import { editorPositionMap, readFieldsRecursively } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
+import { getDbSchemas } from './apps/components/display/dbtable/utils';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);
@@ -138,7 +139,7 @@ const dispatch = createEventDispatcher();
 let graphqlService = undefined;
 let dbSchema = $state(undefined);
 let destroyed = false;
-const uri = computeUri(filePath, scriptLang);
+const uri = computeUri(untrack(() => filePath), scriptLang);
 console.log('uri', uri);
 function computeUri(filePath, scriptLang) {
     let file;
@@ -405,10 +406,17 @@ function addSqlTypeCompletions() {
     });
 }
 let sqlSchemaCompletor = undefined;
-function updateSchema() {
+async function updateSchema() {
     const newSchemaRes = lang === 'graphql' ? args?.api : args?.database;
     if (typeof newSchemaRes === 'string') {
-        dbSchema = $dbSchemas[newSchemaRes.replace('$res:', '')];
+        const resourcePath = newSchemaRes.replace('$res:', '');
+        dbSchema = $dbSchemas[resourcePath];
+        if (lang === 'graphql' && dbSchema === undefined) {
+            await getDbSchemas(lang, resourcePath, $workspaceStore, $dbSchemas, (e) => {
+                console.error('error getting graphql db schema', e);
+            });
+            dbSchema = $dbSchemas[resourcePath];
+        }
     }
     else {
         dbSchema = undefined;
@@ -425,8 +433,10 @@ function addDBSchemaCompletions() {
     if (!schemaLang || !schema) {
         return;
     }
+    console.log('adding db schema completions', schemaLang);
     if (schemaLang === 'graphql') {
         graphqlService ||= initializeMode();
+        console.log('setting schema config', schema);
         graphqlService?.setSchemaConfig([
             {
                 uri: 'my-schema.graphql',
@@ -519,8 +529,8 @@ let aiChatEditorHandler = $state(undefined);
 let showInlineAIChat = $state(false);
 let inlineAIChatSelection = $state(null);
 let selectedCode = $state('');
-export function reviewAndApplyCode(code) {
-    aiChatEditorHandler?.reviewAndApply(code);
+export function reviewAndApplyCode(code, applyAll = false) {
+    aiChatEditorHandler?.reviewAndApply(code, applyAll);
 }
 function addChatHandler(editor) {
     try {
@@ -990,7 +1000,7 @@ async function loadMonaco() {
     onFileChanges();
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
+            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
             fontSize: !small ? 14 : 12,
             lineNumbersMinChars,
@@ -1313,9 +1323,12 @@ $effect(() => {
         : sqlTypeCompletor?.dispose();
 });
 $effect(() => {
-    lang && args && $dbSchemas && untrack(() => updateSchema());
+    console.log('updating schema', lang, $dbSchemas);
+    readFieldsRecursively(args);
+    lang && $dbSchemas && untrack(() => updateSchema());
 });
 $effect(() => {
+    console.log('updating db schema completions', dbSchema, lang);
     initialized &&
         dbSchema &&
         ['sql', 'graphql'].includes(lang) &&
@@ -1361,6 +1374,11 @@ $effect(() => {
 $effect(() => {
     files && model && untrack(() => onFileChanges());
 });
+$effect(() => {
+    editor?.updateOptions({
+        lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
+    });
+});
 </script>
 
 <svelte:window onkeydown={onKeyDown} />

package/package/components/Editor.svelte.d.ts

@@ -71,7 +71,7 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     append: (code: string) => void;
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
-    reviewAndApplyCode: (code: string) => void;
+    reviewAndApplyCode: (code: string, applyAll?: boolean) => void;
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;