windmill-components 1.623.1 → 1.642.0

package/package/components/apps/components/display/dbtable/queries/select.js

@@ -53,7 +53,7 @@ function makeSnowflakeSelectQuery(table, columnDefs, whereClause, options) {
     query = buildParameters(headers, 'snowflake') + '\n' + query;
     return query;
 }
-export function makeSelectQuery(table, columnDefs, whereClause, dbType, options) {
+export function makeSelectQuery(table, columnDefs, whereClause, dbType, options, breakingFeatures) {
     if (!table)
         throw new Error('Table name is required');
     let quicksearchCondition = '';
@@ -84,11 +84,40 @@ CASE WHEN :order_by = '${column.field}' AND :is_desc IS true THEN \`${column.fie
             break;
         }
         case 'postgresql': {
+            function buildOrderBy({ field, is_desc = false, text_cast = false, check_is_number }) {
+                const numberCheckExpr = check_is_number === true
+                    ? ` pg_typeof("${field}")::text IN ('integer', 'bigint', 'smallint', 'numeric', 'real', 'double precision') AND`
+                    : check_is_number === false
+                        ? ` pg_typeof("${field}")::text NOT IN ('integer', 'bigint', 'smallint', 'numeric', 'real', 'double precision') AND`
+                        : '';
+                return `(CASE WHEN${numberCheckExpr} $4 = '${field}' AND $5 IS ${is_desc} THEN "${field}"${text_cast ? '::text' : ''} END)${is_desc ? ' DESC' : ''}`;
+            }
             const orderBy = `
       ${columnDefs
-                .map((column) => `
-      (CASE WHEN $4 = '${column.field}' AND $5 IS false THEN "${column.field}"::text END),
-      (CASE WHEN $4 = '${column.field}' AND $5 IS true THEN "${column.field}"::text END) DESC`)
+                .map((column) => {
+                if (breakingFeatures?.fixPgIntTypes) {
+                    // Array types (e.g. json[], text[]) and the json type have no ordering
+                    // operator in PostgreSQL. PostgreSQL type-checks every THEN branch of a
+                    // CASE expression at plan time -- even branches whose WHEN condition is
+                    // never true -- so a bare column reference in ORDER BY fails with
+                    // "could not identify an ordering operator for type json[]".
+                    // Force a text cast for these types to avoid the error.
+                    const forceTextCast = column.datatype?.includes('[]') || column.datatype?.toLowerCase() === 'json';
+                    if (forceTextCast) {
+                        return `
+      ${buildOrderBy({ field: column.field, is_desc: false, text_cast: true })},
+      ${buildOrderBy({ field: column.field, is_desc: true, text_cast: true })}`;
+                    }
+                    return `
+      ${buildOrderBy({ field: column.field, is_desc: false, text_cast: true, check_is_number: false })},
+      ${buildOrderBy({ field: column.field, is_desc: false, text_cast: false, check_is_number: true })},
+      ${buildOrderBy({ field: column.field, is_desc: true, text_cast: true, check_is_number: false })},
+      ${buildOrderBy({ field: column.field, is_desc: true, text_cast: false, check_is_number: true })}`;
+                }
+                return `
+      ${buildOrderBy({ field: column.field, is_desc: false, text_cast: true })},
+      ${buildOrderBy({ field: column.field, is_desc: true, text_cast: true })}`;
+            })
                 .join(',\n')}`;
             quicksearchCondition = `($3 = '' OR CONCAT(${filteredColumns.join(', ')}) ILIKE '%' || $3 || '%')`;
             query += `SELECT ${filteredColumns
@@ -99,25 +128,39 @@ CASE WHEN :order_by = '${column.field}' AND :is_desc IS true THEN \`${column.fie
             query += ` LIMIT $1::INT OFFSET $2::INT`;
             break;
         }
-        case 'ms_sql_server':
+        case 'ms_sql_server': {
             // MSSQL uses CONCAT for string concatenation and supports OFFSET FETCH for pagination
             // Note: MSSQL does not have a built-in ILIKE function, so we use LIKE with a case-insensitive collation if needed
             //
             // Note 2: CONCAT in mssql requires 2 to 254 arguments. But we can't change this query without breaking
             // existing policies
+            // Filter out data types that cannot be sorted or concatenated in MS SQL Server
+            const unsortableTypes = ['text', 'ntext', 'image'];
             const orderBy = columnDefs
+                .filter((column) => !unsortableTypes.includes(column.datatype.toLowerCase()))
                 .map((column) => {
                 return `
 (CASE WHEN @p4 = '${column.field}' AND @p5 = 0 THEN ${column.field} END) ASC,
 (CASE WHEN @p4 = '${column.field}' AND @p5 = 1 THEN ${column.field} END) DESC`;
             })
                 .join(',\n');
-            quicksearchCondition = ` (@p3 = '' OR CONCAT(${selectClause}) LIKE '%' + @p3 + '%')`;
+            // Create search clause that excludes unsortable types to avoid CONCAT issues
+            const searchClause = filteredColumns
+                .filter((col) => {
+                const fieldName = col.slice(1, -1); // Remove brackets
+                const def = columnDefs.find((c) => c.field === fieldName);
+                return !unsortableTypes.includes(def?.datatype.toLowerCase() ?? '');
+            })
+                .join(', ');
+            quicksearchCondition = searchClause
+                ? ` (@p3 = '' OR CONCAT(${searchClause}) LIKE '%' + @p3 + '%')`
+                : ` (@p3 = '')`;
             query += `SELECT ${selectClause} FROM ${table}`;
             query += ` WHERE ${whereClause ? `${whereClause} AND` : ''} ${quicksearchCondition}`;
             query += ` ORDER BY ${orderBy}`;
             query += ` OFFSET @p2 ROWS FETCH NEXT @p1 ROWS ONLY`;
             break;
+        }
         case 'snowflake': {
             return makeSnowflakeSelectQuery(table, columnDefs, whereClause, options);
         }
@@ -206,7 +249,9 @@ export function getSelectInput(dbInput, table, columnDefs, whereClause, options)
             ? {
                 database: {
                     type: 'static',
-                    value: `$res:${dbInput.resourcePath}`,
+                    value: dbInput.resourcePath.startsWith('datatable://')
+                        ? dbInput.resourcePath
+                        : `$res:${dbInput.resourcePath}`,
                     fieldType: 'object',
                     format: `resource-${dbType}`
                 }

package/package/components/apps/components/display/dbtable/queries/update.js

@@ -83,7 +83,9 @@ export function getUpdateInput(dbInput, table, column, columns) {
             ? {
                 database: {
                     type: 'static',
-                    value: `$res:${dbInput.resourcePath}`,
+                    value: dbInput.resourcePath.startsWith('datatable://')
+                        ? dbInput.resourcePath
+                        : `$res:${dbInput.resourcePath}`,
                     fieldType: 'object',
                     format: `resource-${dbType}`
                 }

package/package/components/apps/components/display/dbtable/tableEditor.d.ts

@@ -0,0 +1,35 @@
+import type { ColumnMetadata, TableMetadata } from './utils';
+export type TableEditorValues = {
+    name: string;
+    columns: TableEditorValuesColumn[];
+    foreignKeys: TableEditorForeignKey[];
+    pk_constraint_name?: string;
+};
+export type TableEditorValuesColumn = {
+    name: string;
+    datatype: string;
+    primaryKey?: boolean;
+    defaultValue?: string;
+    nullable?: boolean;
+    datatype_length?: number;
+    initialName?: string;
+    default_constraint_name?: string;
+};
+export type TableEditorForeignKey = {
+    targetTable?: string;
+    columns: {
+        sourceColumn?: string;
+        targetColumn?: string;
+    }[];
+    onDelete: 'CASCADE' | 'SET NULL' | 'NO ACTION';
+    onUpdate: 'CASCADE' | 'SET NULL' | 'NO ACTION';
+    fk_constraint_name?: string;
+};
+export declare function datatypeDefaultLength(datatype: string): number;
+export declare function buildTableEditorValues({ metadata, tableName, pk_constraint_name, foreignKeys }: {
+    metadata: TableMetadata;
+    tableName: string;
+    pk_constraint_name?: string;
+    foreignKeys: TableEditorForeignKey[];
+}): TableEditorValues;
+export declare function columnDefToTableEditorValuesColumn(colDef: ColumnMetadata): TableEditorValuesColumn;

package/package/components/apps/components/display/dbtable/tableEditor.js

@@ -0,0 +1,67 @@
+import { countChars } from '../../../../../utils';
+export function datatypeDefaultLength(datatype) {
+    datatype = datatype.toLowerCase();
+    if (datatype == 'bit')
+        return 1;
+    if (['varchar', 'char', 'nvarchar', 'nchar', 'varbinary', 'binary'].includes(datatype)) {
+        return 255;
+    }
+    else {
+        return 10;
+    }
+}
+export function buildTableEditorValues({ metadata, tableName, pk_constraint_name, foreignKeys }) {
+    return {
+        name: tableName,
+        columns: metadata.map(columnDefToTableEditorValuesColumn),
+        pk_constraint_name,
+        foreignKeys
+    };
+}
+export function columnDefToTableEditorValuesColumn(colDef) {
+    let datatype;
+    let datatype_length;
+    const match = colDef.datatype?.match(/^([\w\s]+?)(?:\((\d+)\))?(\[\])?$/);
+    if (match) {
+        datatype = match[1].replace(/\s+/g, ' ').trim().toUpperCase() + (match[3] || ''); // Normalize spaces and add '[]' if it's an array type
+        datatype_length = match[2] ? parseInt(match[2], 10) : datatypeDefaultLength(datatype);
+    }
+    else {
+        datatype = colDef.datatype?.replace(/\s+/g, ' ').toUpperCase() || 'UNKNOWN';
+    }
+    datatype = normalizeDatatypeAlias(datatype);
+    const defaultValue = colDef.defaultvalue
+        ? colDef.defaultvalue.startsWith("'") &&
+            colDef.defaultvalue.endsWith("'") &&
+            countChars(colDef.defaultvalue, "'") === 2
+            ? colDef.defaultvalue.substring(1, colDef.defaultvalue.length - 1)
+            : `{${colDef.defaultvalue}}`
+        : undefined;
+    return {
+        name: colDef.field,
+        primaryKey: colDef.isprimarykey,
+        defaultValue,
+        nullable: colDef.isnullable !== 'NO',
+        datatype,
+        datatype_length,
+        initialName: colDef.field,
+        default_constraint_name: colDef.default_constraint_name
+    };
+}
+function normalizeDatatypeAlias(datatype) {
+    // Normalize some common datatype variations
+    const dt = datatype.toUpperCase().trim();
+    if (dt === 'INTEGER')
+        return 'INT';
+    if (dt === 'DOUBLE PRECISION')
+        return 'DOUBLE';
+    if (dt === 'TIMESTAMP WITHOUT TIME ZONE')
+        return 'TIMESTAMP';
+    if (dt === 'TIMESTAMP WITH TIME ZONE')
+        return 'TIMESTAMPTZ';
+    if (dt === 'CHARACTER VARYING')
+        return 'VARCHAR';
+    if (dt === 'CHARACTER')
+        return 'CHAR';
+    return datatype;
+}

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -15,6 +15,7 @@ export type ColumnMetadata = {
     isidentity: ColumnIdentity;
     isnullable: 'YES' | 'NO';
     isenum: boolean;
+    default_constraint_name?: string;
 };
 export type TableMetadata = ColumnMetadata[];
 export type ColumnDef = {
@@ -75,6 +76,7 @@ export declare function formatSchema(dbSchema: {
 };
 export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
 export declare function buildVisibleFieldList(columnDefs: ColumnDef[], dbType: DbType): string[];
+export declare function renderDbQuotedIdentifier(identifier: string, dbType: DbType): string;
 export declare function getLanguageByResourceType(name: string): ScriptLang;
 export declare function buildParameters(columns: Array<{
     field: string;

package/package/components/apps/components/display/dbtable/utils.js

@@ -91,23 +91,34 @@ const bq = new BigQuery({
 	credentials: args
 })
 const [datasets] = await bq.getDatasets();
-const schema = {}
-for (const dataset of datasets) {
-	schema[dataset.id] = {}
-	const query = "SELECT table_name, ARRAY_AGG(STRUCT(if(is_nullable = 'YES', true, false) AS required, column_name AS name, data_type AS type, if(column_default = 'NULL', null, column_default) AS \`default\`) ORDER BY ordinal_position) AS schema \
-FROM \`{dataset.id}\`.INFORMATION_SCHEMA.COLUMNS \
-GROUP BY table_name".replace('{dataset.id}', dataset.id)
-	const [rows] = await bq.query(query)
-	for (const row of rows) {
-		schema[dataset.id][row.table_name] = {}
-		for (const col of row.schema) {
-			const colName = col.name
-			delete col.name
-			if (col.default === null) {
-				delete col.default
-			}
-			schema[dataset.id][row.table_name][colName] = col
+if (!datasets) return {}
+const schema = {} as any
+let queries = datasets.map(dataset => \`
+	SELECT 
+		table_name, 
+		'\${dataset.id}' as dataset,
+		ARRAY_AGG(STRUCT(
+			if(is_nullable = 'YES', true, false) AS required,
+			column_name AS name,
+			data_type AS type,
+			if(column_default = 'NULL', null, column_default) AS \\\`default\\\`
+		) ORDER BY ordinal_position)
+		AS schema 
+	FROM \\\`\${dataset.id}\\\`.INFORMATION_SCHEMA.COLUMNS 
+	GROUP BY table_name\`
+)
+let query = queries.join('\\nUNION ALL \\n')
+const [rows] = await bq.query(query)
+for (const row of rows) {
+	schema[row.dataset] ??= {}
+	schema[row.dataset][row.table_name] = {}
+	for (const col of row.schema) {
+		const colName = col.name
+		delete col.name
+		if (col.default === null) {
+			delete col.default
 		}
+		schema[row.dataset][row.table_name][colName] = col
 	}
 }
 return schema
@@ -168,7 +179,9 @@ return schema
         code: `select TABLE_SCHEMA, TABLE_NAME, DATA_TYPE, COLUMN_NAME, COLUMN_DEFAULT from information_schema.columns where table_schema != 'sys'`,
         lang: 'mssql',
         processingFn: (rows) => {
-            const schemas = rows[0].reduce((acc, a) => {
+            if (!rows || rows.length === 0)
+                return {};
+            const schemas = rows.reduce((acc, a) => {
                 const table_schema = a.TABLE_SCHEMA;
                 delete a.TABLE_SCHEMA;
                 acc[table_schema] = acc[table_schema] || [];
@@ -223,30 +236,32 @@ export function buildVisibleFieldList(columnDefs, dbType) {
     // Filter out hidden columns to avoid counting the wrong number of rows
     return columnDefs
         .filter((columnDef) => columnDef && columnDef.ignored !== true)
-        .map((column) => {
-        switch (dbType) {
-            case 'postgresql':
-                return `"${column?.field}"`; // PostgreSQL uses double quotes for identifiers
-            case 'ms_sql_server':
-                return `[${column?.field}]`; // MSSQL uses square brackets for identifiers
-            case 'mysql':
-                return `\`${column?.field}\``; // MySQL uses backticks
-            case 'snowflake':
-                return `"${column?.field}"`; // Snowflake uses double quotes for identifiers
-            case 'bigquery':
-                return `\`${column?.field}\``; // BigQuery uses backticks
-            case 'duckdb':
-                return `"${column?.field}"`; // DuckDB uses double quotes for identifiers
-            default:
-                throw new Error('Unsupported database type: ' + dbType);
-        }
-    });
+        .map((column) => renderDbQuotedIdentifier(column?.field, dbType));
+}
+export function renderDbQuotedIdentifier(identifier, dbType) {
+    switch (dbType) {
+        case 'postgresql':
+            return `"${identifier}"`; // PostgreSQL uses double quotes for identifiers
+        case 'ms_sql_server':
+            return `[${identifier}]`; // MSSQL uses square brackets for identifiers
+        case 'mysql':
+            return `\`${identifier}\``; // MySQL uses backticks
+        case 'snowflake':
+            return `"${identifier}"`; // Snowflake uses double quotes for identifiers
+        case 'bigquery':
+            return `\`${identifier}\``; // BigQuery uses backticks
+        case 'duckdb':
+            return `"${identifier}"`; // DuckDB uses double quotes for identifiers
+        default:
+            throw new Error('Unsupported database type: ' + dbType);
+    }
 }
 export function getLanguageByResourceType(name) {
     const language = {
         postgresql: 'postgresql',
         mysql: 'mysql',
         ms_sql_server: 'mssql',
+        mssql: 'mssql',
         snowflake: 'snowflake',
         snowflake_oauth: 'snowflake',
         bigquery: 'bigquery',
@@ -286,7 +301,17 @@ export function dbSupportsSchemas(dbType) {
 }
 export function datatypeHasLength(datatype) {
     datatype = datatype.toLowerCase();
-    const lengthDataTypes = ['varchar', 'char', 'nvarchar', 'nchar', 'varbinary', 'binary', 'bit'];
+    const lengthDataTypes = [
+        'varchar',
+        'char',
+        'nvarchar',
+        'nchar',
+        'varbinary',
+        'binary',
+        'bit',
+        'character varying',
+        'character'
+    ];
     return lengthDataTypes.some((type) => datatype === type);
 }
 export function sqlDataTypeToJsTypeHeuristic(datatype) {

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -107,6 +107,12 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             toggleRow(p);
             p.node.setSelected(true);
         },
+        setModalRow: (row) => {
+            const data = { ...(row?.data ?? {}) };
+            delete data['__index'];
+            if (!deepEqual(outputs?.openedModalRow?.peak(), data))
+                outputs?.openedModalRow.set(data);
+        },
         onSet: (id, value, rowIndex) => {
             if (!inputs[id]) {
                 inputs[id] = { [rowIndex]: value };

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -31,6 +31,7 @@ let outputs = initOutput($worldStore, id, {
     selectedRowIndex: 0,
     selectedRow: {},
     selectedRows: [],
+    openedModalRow: {},
     result: [],
     inputs: {},
     loading: false,

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -23,6 +23,7 @@ import { Button } from '../../../../common';
 import InputValue from '../../helpers/InputValue.svelte';
 import { stateSnapshot, withProps } from '../../../../../svelte5Utils.svelte';
 import { get } from 'svelte/store';
+import SubGridEditor from '../../../editor/SubGridEditor.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), render, customCss = undefined, actions = undefined, actionsOrder = undefined, onChange = undefined } = $props();
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
@@ -69,6 +70,7 @@ let outputs = initOutput($worldStore, id, {
     selectedRowIndex: 0,
     selectedRow: {},
     selectedRows: [],
+    openedModalRow: {},
     result: [],
     loading: false,
     page: 0,
@@ -192,6 +194,12 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             toggleRow(p);
             p.node.setSelected(true);
         },
+        setModalRow: (row) => {
+            const data = { ...(row?.data ?? {}) };
+            delete data['__index'];
+            if (!deepEqual(outputs?.openedModalRow?.peak(), data))
+                outputs?.openedModalRow.set(data);
+        },
         onSet: (id, value, rowIndex) => {
             if (!inputs[id]) {
                 inputs[id] = { [rowIndex]: value };
@@ -495,6 +503,13 @@ $effect(() => {
 	/>
 {/each}
 
+{#if render == false || loading || initializing}
+	<div class="overflow-hidden h-0">
+		{#each actions?.filter((x) => x.type == 'modalcomponent') ?? [] as action}
+			<SubGridEditor id={action.id} subGridId={`${action.id}-0`} />
+		{/each}
+	</div>
+{/if}
 <RunnableWrapper
 	{outputs}
 	{render}

package/package/components/apps/components/display/table/AppAggridTableActions.svelte

@@ -12,7 +12,7 @@ import { connectOutput } from '../../../editor/appUtils';
 import RowWrapper from '../../layout/RowWrapper.svelte';
 import Popover from '../../../../meltComponents/Popover.svelte';
 import AppModal from '../../layout/AppModal.svelte';
-let { p, id, render, actions = [], rowIndex, row, onSet, onRemove, wrapActions = undefined, selectRow } = $props();
+let { p, id, render, actions = [], rowIndex, row, onSet, onRemove, wrapActions = undefined, selectRow, setModalRow } = $props();
 const dispatch = createEventDispatcher();
 const { selectedComponent, hoverStore, mode, connectingInput, componentControl, app } = getContext('AppViewerContext');
 $componentControl[id] = {
@@ -54,7 +54,7 @@ $componentControl[id] = {
 					}
 				})}
 				onpointerdown={stopPropagation((e) => {
-					selectRow(p)
+					p && selectRow(p)
 
 					if (!$connectingInput.opened) {
 						$selectedComponent = [action.id]
@@ -160,7 +160,7 @@ $componentControl[id] = {
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow(p)
+								p && selectRow(p)
 							}}
 							id={action.id}
 							customCss={action.customCss}
@@ -181,11 +181,14 @@ $componentControl[id] = {
 							id={action.id}
 							customCss={action.customCss}
 							configuration={action.configuration}
+							onOpenRecomputeIds={action.onOpenRecomputeIds}
+							onCloseRecomputeIds={action.onCloseRecomputeIds}
 							verticalAlignment="center"
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow(p)
+								p && (selectRow(p), setModalRow(p))
 							}}
+							onClose={() => setModalRow(undefined)}
 						/>
 					{:else if action.type == 'checkboxcomponent'}
 						<AppCheckbox
@@ -199,7 +202,7 @@ $componentControl[id] = {
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow(p)
+								p && selectRow(p)
 							}}
 							verticalAlignment="center"
 							{controls}
@@ -219,7 +222,7 @@ $componentControl[id] = {
 								onSelect={action.onSelect}
 								preclickAction={async () => {
 									dispatch('toggleRow')
-									selectRow(p)
+									p && selectRow(p)
 								}}
 								{controls}
 							/>
@@ -232,7 +235,7 @@ $componentControl[id] = {
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow(p)
+							p && selectRow(p)
 						}}
 						noWFull
 						id={action.id}
@@ -252,11 +255,14 @@ $componentControl[id] = {
 						id={action.id}
 						customCss={action.customCss}
 						configuration={action.configuration}
+						onOpenRecomputeIds={action.onOpenRecomputeIds}
+						onCloseRecomputeIds={action.onCloseRecomputeIds}
 						verticalAlignment="center"
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow(p)
+							p && (selectRow(p), setModalRow(p))
 						}}
+						onClose={() => setModalRow(undefined)}
 					/>
 				{:else if action.type == 'checkboxcomponent'}
 					<AppCheckbox
@@ -270,7 +276,7 @@ $componentControl[id] = {
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow(p)
+							p && selectRow(p)
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
@@ -288,7 +294,7 @@ $componentControl[id] = {
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow(p)
+								p && selectRow(p)
 							}}
 						/>
 					</div>

package/package/components/apps/components/display/table/AppAggridTableActions.svelte.d.ts

@@ -3,7 +3,7 @@ import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { ICellRendererParams } from 'ag-grid-community';
 interface Props {
-    p: ICellRendererParams<any>;
+    p?: ICellRendererParams<any>;
     id: string;
     render: boolean;
     actions?: TableAction[];
@@ -15,6 +15,7 @@ interface Props {
     onRemove: (id: string, rowIndex: number) => void;
     wrapActions?: boolean | undefined;
     selectRow: (params: ICellRendererParams<any>) => void;
+    setModalRow: (row?: ICellRendererParams<any>) => void;
 }
 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> & {

package/package/components/apps/components/display/table/theme/windmill-theme.css

@@ -45,7 +45,7 @@
 	--ag-input-disabled-border-color: rgba(186, 191, 199, 0.3);
 	--ag-input-disabled-background-color: rgba(186, 191, 199, 0.15);
 	--ag-borders: solid 1px;
-	--ag-border-radius: 8px;
+	--ag-border-radius: 4px;
 	--ag-borders-side-button: none;
 	--ag-side-button-selected-background-color: transparent;
 	--ag-header-column-resize-handle-display: block;
@@ -66,8 +66,9 @@
 	--ag-widget-vertical-spacing: calc(var(--ag-grid-size) * 1.5);
 	--ag-toggle-button-height: 18px;
 	--ag-toggle-button-width: 28px;
-	--ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-		Cantarell, 'Helvetica Neue', sans-serif;
+	--ag-font-family:
+		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+		'Helvetica Neue', sans-serif;
 	--ag-font-size: 0.7rem;
 	--ag-icon-font-family: agGridalpine;
 	--ag-selected-tab-underline-color: var(--ag-alpine-active-color);
@@ -92,8 +93,8 @@
 	--ag-control-panel-background-color: #222628;
 	--ag-subheader-background-color: #000;
 	--ag-input-disabled-background-color: #282c2f;
-	--ag-input-focus-box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.5),
-		0 0 4px 3px var(--ag-input-focus-border-color);
+	--ag-input-focus-box-shadow:
+		0 0 2px 0.5px rgba(255, 255, 255, 0.5), 0 0 4px 3px var(--ag-input-focus-border-color);
 	--ag-card-shadow: 0 1px 20px 1px black;
 	--ag-disabled-foreground-color: rgba(255, 255, 255, 0.5);
 	--ag-chip-background-color: rgba(255, 255, 255, 0.07);
@@ -119,8 +120,8 @@
 		--ag-control-panel-background-color: #222628;
 		--ag-subheader-background-color: #000;
 		--ag-input-disabled-background-color: #282c2f;
-		--ag-input-focus-box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.5),
-			0 0 4px 3px var(--ag-input-focus-border-color);
+		--ag-input-focus-box-shadow:
+			0 0 2px 0.5px rgba(255, 255, 255, 0.5), 0 0 4px 3px var(--ag-input-focus-border-color);
 		--ag-card-shadow: 0 1px 20px 1px black;
 		--ag-disabled-foreground-color: rgba(255, 255, 255, 0.5);
 		--ag-chip-background-color: rgba(255, 255, 255, 0.07);

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -35,7 +35,7 @@ let outputs = initOutput($worldStore, id, {
 		{runnable}
 		wrapperClass="hidden"
 		recomputableByRefreshButton={runnable.autoRefresh ?? true}
-		on:success={onSuccess}
+		onSuccess={(_r) => onSuccess()}
 		{outputs}
 	>
 		{@render children?.()}

package/package/components/apps/components/helpers/InputValue.svelte

@@ -111,7 +111,7 @@ async function handleConnection() {
         lastExprHash = nhash;
     }
     else if (input?.type == 'evalv2') {
-        // console.log('evalv2', onDemandOnly, field)
+        // console.log('evalv2', onDemandOnly, field, exportValueFunction, key)
         if (onDemandOnly && exportValueFunction) {
             value = (args) => {
                 return evalExpr(input, args);

package/package/components/apps/components/helpers/ResolveConfig.svelte

@@ -33,7 +33,7 @@ $effect.pre(() => {
 {:else}
 	{#if debug}
 		<pre class="text-2xs">
-			key: {key} 
+			key: {key}
 			{JSON.stringify({ r: resolvedConfig })}
 			{JSON.stringify(configuration)}</pre
 		>

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -18,7 +18,7 @@ import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { executeRunnable } from './executeRunnable';
 import SchemaForm from '../../../SchemaForm.svelte';
 import JobLoader, {} from '../../../JobLoader.svelte';
-let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), result_stream = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children, nonRenderedPlaceholder } = $props();
+let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), result_stream = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children, nonRenderedPlaceholder, onSuccess } = $props();
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state: stateStore, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
@@ -354,6 +354,7 @@ export async function runComponent(noToast = true, inlineScriptOverride, setRunn
         let error = e?.body ?? e?.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
+        loading = false; // Ensure loading is reset on any error
     }
 }
 function recordJob(jobId, result, jobError, transformer) {
@@ -449,7 +450,7 @@ async function setResult(res, jobId, dispatchSuccess = true) {
     recordJob(jobId, result, undefined, transformerResult);
     delete $errorByComponent[id];
     if (dispatchSuccess) {
-        dispatch('success', result);
+        onSuccess?.(result);
     }
     // callbacks?.done(res)
 }