windmill-components 1.504.0 → 1.504.2

package/package/components/AppWrapper.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">import AppEditor from './apps/editor/AppEditor.svelte';
 let { app: oldApp, ...props } = $props();
 let app = $state(oldApp);
-$effect(() => {
-    app = oldApp;
-});
 </script>
 
 <AppEditor {app} {...props} />

package/package/components/{DBManagerDrawerButton.svelte → DBManagerDrawer.svelte}

@@ -3,10 +3,9 @@ import Button from './common/button/Button.svelte';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { sendUserToast, sortArray } from '../utils';
-import { ArrowLeft, Database, Expand, Loader2, Minimize, RefreshCcw } from 'lucide-svelte';
+import { ArrowLeft, Expand, Loader2, Minimize, RefreshCcw } from 'lucide-svelte';
 import { dbSupportsSchemas, getDbSchemas, getLanguageByResourceType, loadAllTablesMetaData, loadTableMetaData } from './apps/components/display/dbtable/utils';
 import DbManager from './DBManager.svelte';
-import { Alert } from './common';
 import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts } from './dbOps';
 import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable';
 import { runScriptAndPollResult } from './jobs/utils';
@@ -14,10 +13,21 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SqlRepl from './SqlRepl.svelte';
 import SimpleAgTable from './SimpleAgTable.svelte';
 import { untrack } from 'svelte';
-let { resourceType, resourcePath } = $props();
-let dbSchema = $derived(resourcePath in $dbSchemas ? $dbSchemas[resourcePath] : undefined);
-let isDrawerOpen = $state(false);
-let shouldDisplayError = $derived(resourcePath && resourcePath in $dbSchemas && !$dbSchemas[resourcePath]);
+let resourceType = $state(undefined);
+let resourcePath = $state(undefined);
+let open = $derived(resourcePath && resourceType);
+export function openDrawer(_resourceType, _resourcePath) {
+    resourceType = _resourceType;
+    resourcePath = _resourcePath;
+    getSchema();
+}
+export function closeDrawer() {
+    resourceType = undefined;
+    resourcePath = undefined;
+    refreshCount = 0;
+    refreshing = false;
+}
+let dbSchema = $derived(resourcePath && resourcePath in $dbSchemas ? $dbSchemas[resourcePath] : undefined);
 // `refreshCount` is a derived state. `refreshing` is the source of truth
 let refreshCount = $state(0);
 $effect(() => {
@@ -32,18 +42,17 @@ $effect(() => {
 const refresh = () => !refreshing && (refreshing = true);
 let expand = $state(false);
 $effect(() => {
-    if (!isDrawerOpen)
+    if (!open)
         expand = false;
 });
 async function getSchema() {
-    if ($dbSchemas[resourcePath] && !refreshing)
+    if (!resourcePath || !resourceType || ($dbSchemas[resourcePath] && !refreshing))
         return;
     try {
         const oldDbSchema = $dbSchemas[resourcePath];
         await getDbSchemas(resourceType, resourcePath, $workspaceStore, $dbSchemas, (message) => {
-            if (isDrawerOpen) {
+            if (open)
                 sendUserToast(message, true);
-            }
         });
         // avoid infinite loop on error due to the way getDbSchemas is implemented
         // and relying on an assignement side effect
@@ -64,6 +73,8 @@ let replResultData = $state(undefined);
 let cachedColDefs = {};
 let cachedLastRefreshCount = 0;
 async function getColDefs(tableKey) {
+    if (!resourcePath || !resourceType)
+        return [];
     if (cachedLastRefreshCount !== refreshCount)
         cachedColDefs = {};
     cachedLastRefreshCount = refreshCount;
@@ -96,37 +107,26 @@ async function getColDefs(tableKey) {
 	}}
 />
 
-{#if shouldDisplayError}
-	<Alert type="error" size="xs" title="Schema not available" class="mt-2">
-		Schema could not be loaded. Please check the permissions of the resource.
-	</Alert>
-{:else}
-	<Button
-		size="xs"
-		variant="border"
-		spacingSize="xs2"
-		btnClasses="mt-1 w-24"
-		on:click={async () => {
-			if (!dbSchema || !$workspaceStore) refreshing = true
-			isDrawerOpen = true
-		}}
-	>
-		<Database size={18} /> Manager
-	</Button>
-	<Drawer bind:open={isDrawerOpen} size={expand ? `${windowWidth}px` : '1200px'} preventEscape>
+<Drawer
+	bind:open
+	size={expand ? `${windowWidth}px` : '1200px'}
+	preventEscape
+	on:close={closeDrawer}
+>
+	{#key [resourceType, resourcePath, dbSchema]}
 		<DrawerContent
 			title={replResultData ? 'Query Result' : 'Database Manager'}
 			on:close={() => {
 				if (replResultData) {
 					replResultData = undefined
 				} else {
-					isDrawerOpen = false
+					closeDrawer()
 				}
 			}}
 			CloseIcon={replResultData ? ArrowLeft : undefined}
 			noPadding
 		>
-			{#if dbSchema && $workspaceStore}
+			{#if dbSchema && $workspaceStore && resourceType && resourcePath}
 				<Splitpanes horizontal>
 					<Pane class="relative">
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -157,8 +157,8 @@ async function getColDefs(tableKey) {
 								dbTableOpsWithPreviewScripts({
 									colDefs,
 									tableKey,
-									resourcePath,
-									resourceType,
+									resourcePath: resourcePath!,
+									resourceType: resourceType!,
 									workspace: $workspaceStore
 								})}
 							dbTableActionsFactory={[
@@ -170,16 +170,16 @@ async function getColDefs(tableKey) {
 							]}
 							{refresh}
 							dbTableEditorPropsFactory={({ selectedSchemaKey }) => ({
-								resourceType,
+								resourceType: resourceType!,
 								previewSql: (values) =>
-									makeCreateTableQuery(values, resourceType, selectedSchemaKey),
+									makeCreateTableQuery(values, resourceType!, selectedSchemaKey),
 								async onConfirm(values) {
 									await runScriptAndPollResult({
 										workspace: $workspaceStore,
 										requestBody: {
 											args: { database: '$res:' + resourcePath },
-											content: makeCreateTableQuery(values, resourceType, selectedSchemaKey),
-											language: getLanguageByResourceType(resourceType)
+											content: makeCreateTableQuery(values, resourceType!, selectedSchemaKey),
+											language: getLanguageByResourceType(resourceType!)
 										}
 									})
 									refresh()
@@ -234,5 +234,5 @@ async function getColDefs(tableKey) {
 				/>
 			{/snippet}
 		</DrawerContent>
-	</Drawer>
-{/if}
+	{/key}
+</Drawer>

package/package/components/DBManagerDrawer.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type DbType } from './apps/components/display/dbtable/utils';
+declare const DbManagerDrawer: import("svelte").Component<Record<string, never>, {
+    openDrawer: (_resourceType: DbType, _resourcePath: string) => void;
+    closeDrawer: () => void;
+}, "">;
+type DbManagerDrawer = ReturnType<typeof DbManagerDrawer>;
+export default DbManagerDrawer;

package/package/components/DarkModeObserver.svelte

@@ -1,22 +1,36 @@
+<script module lang="ts">export function useIsDarkMode({ onChange } = {}) {
+    let isDarkMode = $state({ val: false });
+    let observer = undefined;
+    onMount(() => {
+        isDarkMode.val = document.documentElement.classList.contains('dark');
+        observer = new MutationObserver((mutationsList) => {
+            for (let mutation of mutationsList) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const newDarkMode = document.documentElement.classList.contains('dark');
+                    onChange?.(newDarkMode);
+                    isDarkMode.val = newDarkMode;
+                }
+            }
+        });
+        observer.observe(document.documentElement, { attributes: true });
+    });
+    onDestroy(() => {
+        observer?.disconnect();
+    });
+    return isDarkMode;
+}
+</script>
+
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
 import { createEventDispatcher } from 'svelte';
-export let darkMode = false;
+let { darkMode = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
-let observer = undefined;
-onMount(() => {
-    darkMode = document.documentElement.classList.contains('dark');
-    observer = new MutationObserver((mutationsList, observer) => {
-        for (let mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                const newDarkMode = document.documentElement.classList.contains('dark');
-                dispatch('change', newDarkMode);
-                darkMode = newDarkMode;
-            }
-        }
-    });
-    observer.observe(document.documentElement, { attributes: true });
+let isDarkMode = useIsDarkMode({
+    onChange: (newDarkMode) => dispatch('change', newDarkMode)
 });
-onDestroy(() => {
-    observer?.disconnect();
+$effect(() => {
+    if (darkMode !== isDarkMode.val) {
+        darkMode = isDarkMode.val;
+    }
 });
 </script>

package/package/components/DarkModeObserver.svelte.d.ts

@@ -1,3 +1,10 @@
+import type { StateStore } from '../utils';
+export declare function useIsDarkMode({ onChange }?: {
+    onChange?: (newDarkMode: boolean) => void;
+}): StateStore<boolean>;
+type $$ComponentProps = {
+    darkMode?: 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> & {
         $$bindings?: Bindings;
@@ -11,12 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DarkModeObserver: $$__sveltets_2_IsomorphicComponent<{
-    darkMode?: boolean;
-}, {
+declare const DarkModeObserver: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "darkMode">;
 type DarkModeObserver = InstanceType<typeof DarkModeObserver>;
 export default DarkModeObserver;

package/package/components/Dev.svelte

@@ -17,7 +17,7 @@ import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte';
 import FlowEditorPanel from './flows/content/FlowEditorPanel.svelte';
 import { deepEqual } from 'fast-equals';
 import { writable } from 'svelte/store';
-import { initHistory } from '../history';
+import { initHistory } from '../history.svelte';
 import { dfs } from './flows/dfs';
 import { loadSchemaFromModule } from './flows/flowInfers';
 import { CornerDownLeft, Play } from 'lucide-svelte';

package/package/components/EditorBar.svelte

@@ -20,14 +20,15 @@ import { createEventDispatcher, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import { DiffIcon, DollarSign, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
-import { capitalize, toCamel } from '../utils';
+import { DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
+import { capitalize, formatS3Object, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import EditorSettings from './EditorSettings.svelte';
+import S3FilePicker from './S3FilePicker.svelte';
 let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
@@ -35,70 +36,61 @@ let resourcePicker = $state();
 let resourceTypePicker = $state();
 let variableEditor = $state();
 let resourceEditor = $state();
-let showContextVarPicker = $state(false);
-let showVarPicker = $state(false);
-let showResourcePicker = $state(false);
-let showResourceTypePicker = $state(false);
-run(() => {
-    showContextVarPicker = [
-        'python3',
-        'bash',
-        'powershell',
-        'go',
-        'deno',
-        'bun',
-        'bunnative',
-        'nativets',
-        'php',
-        'rust',
-        'csharp',
-        'nu',
-        'java'
-        // for related places search: ADD_NEW_LANG
-    ].includes(lang ?? '');
-});
-run(() => {
-    showVarPicker = [
-        'python3',
-        'bash',
-        'powershell',
-        'go',
-        'deno',
-        'bun',
-        'bunnative',
-        'nativets',
-        'php',
-        'rust',
-        'csharp',
-        'nu',
-        'java'
-        // for related places search: ADD_NEW_LANG
-    ].includes(lang ?? '');
-});
-run(() => {
-    showResourcePicker = [
-        'python3',
-        'bash',
-        'powershell',
-        'go',
-        'deno',
-        'bun',
-        'bunnative',
-        'nativets',
-        'php',
-        'rust',
-        'csharp',
-        'nu',
-        'java'
-        // for related places search: ADD_NEW_LANG
-    ].includes(lang ?? '');
-});
-run(() => {
-    showResourceTypePicker =
-        ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
-            lang === 'python3' ||
-            lang === 'php';
-});
+let s3FilePicker = $state();
+let showContextVarPicker = $derived([
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'bunnative',
+    'nativets',
+    'php',
+    'rust',
+    'csharp',
+    'nu',
+    'java'
+    // for related places search: ADD_NEW_LANG
+].includes(lang ?? ''));
+let showVarPicker = $derived([
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'bunnative',
+    'nativets',
+    'php',
+    'rust',
+    'csharp',
+    'nu',
+    'java'
+    // for related places search: ADD_NEW_LANG
+].includes(lang ?? ''));
+let showResourcePicker = $derived([
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'bunnative',
+    'nativets',
+    'php',
+    'rust',
+    'csharp',
+    'nu',
+    'java',
+    'duckdb'
+    // for related places search: ADD_NEW_LANG
+].includes(lang ?? ''));
+let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
+    ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
+let showResourceTypePicker = $derived(['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
+    lang === 'python3' ||
+    lang === 'php');
 let codeViewer = $state();
 let codeObj = $state(undefined);
 function addEditorActions() {
@@ -444,7 +436,7 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 
 <ItemPicker
 	bind:this={resourcePicker}
-	pickCallback={(path, _) => {
+	pickCallback={(path, _, resType) => {
 		if (!editor) return
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
@@ -504,6 +496,15 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`(Wmill.getResource("${path}"))`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'duckdb') {
+			let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
+			if (!t) {
+				sendUserToast(`Resource type ${resType} is not supported in DuckDB`, true)
+				editor.insertAtCursor(`'$res:${path}'`)
+				return
+			} else {
+				editor.insertAtCursor(`ATTACH '$res:${path}' AS db (TYPE ${t});`)
+			}
 		}
 
 		sendUserToast(`${path} inserted at cursor`)
@@ -550,6 +551,30 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 <ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
+<S3FilePicker
+	bind:this={s3FilePicker}
+	readOnlyMode={false}
+	on:selectAndClose={(s3obj) => {
+		let s = `'${formatS3Object(s3obj.detail)}'`
+		if (lang === 'duckdb') {
+			if (s3obj.detail?.s3.endsWith('.json')) s = `read_json(${s})`
+			if (s3obj.detail?.s3.endsWith('.csv')) s = `read_csv(${s})`
+			if (s3obj.detail?.s3.endsWith('.parquet')) s = `read_parquet(${s})`
+			editor?.insertAtCursor(s)
+		} else if (lang === 'python3') {
+			if (!editor?.getCode().includes('import wmill')) {
+				editor?.insertAtBeginning('import wmill\n')
+			}
+			editor?.insertAtCursor(`wmill.load_s3_file(${s})`)
+		} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
+			if (!editor?.getCode().includes('import * as wmill from')) {
+				editor?.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
+			}
+			editor?.insertAtCursor(`wmill.loadS3File(${s})`)
+		}
+	}}
+/>
+
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
 	<div class="flex items-center">
 		<div
@@ -589,6 +614,22 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
+			{#if showS3Picker && customUi?.s3object != false}
+				<Button
+					aiId="editor-bar-add-s3-object"
+					aiDescription="Add S3 Object"
+					title="Add S3 object"
+					color="light"
+					on:click={() => s3FilePicker?.open()}
+					size="xs"
+					btnClasses="!font-medium text-tertiary"
+					spacingSize="md"
+					startIcon={{ icon: File }}
+					{iconOnly}
+					>+S3 Object
+				</Button>
+			{/if}
+
 			{#if showResourcePicker && customUi?.resource != false}
 				<Button
 					aiId="editor-bar-add-resource"

package/package/components/FlowBuilder.svelte

@@ -785,10 +785,9 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
 						on:undo={() => {
 							const currentModules = flowStore.val?.value?.modules
-
-							console.log('debug before', $state.snapshot(flowStore.val))
+							console.log('undo before', flowStore.val, JSON.stringify(flowStore.val, null, 2))
 							flowStore.val = undo(history, flowStore.val)
-							console.log('debug after', $state.snapshot(flowStore.val))
+							console.log('undo after', flowStore.val, JSON.stringify(flowStore.val, null, 2))
 
 							const newModules = flowStore.val?.value?.modules
 							const restoredModules = newModules?.filter(

package/package/components/FlowStatusViewerInner.svelte

@@ -20,6 +20,7 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { buildPrefix } from './graph/graphBuilder.svelte';
+import { parseAssetFromString } from './assets/lib';
 import FlowPreviewResult from './FlowPreviewResult.svelte';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
@@ -51,6 +52,23 @@ export let rightColumnSelect = 'timeline';
 export let localModuleStates = writable({});
 export let localDurationStatuses = writable({});
 let recursiveRefresh = {};
+$: inputAssets = parseInputAssets(job?.args ?? {});
+function parseInputAssets(args) {
+    const arr = [];
+    for (const v of Object.values(args)) {
+        if (typeof v === 'string') {
+            const asset = parseAssetFromString(v);
+            if (asset)
+                arr.push(asset);
+        }
+        else if (v && typeof v === 'object' && typeof v['s3'] === 'string') {
+            const s3 = v['s3'];
+            const storage = typeof v['storage'] == 'string' ? v['storage'] : undefined;
+            arr.push({ kind: 's3object', path: `${storage ?? ''}/${s3}` });
+        }
+    }
+    return arr;
+}
 let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
 let retry_selected = '';
 let timeout = undefined;
@@ -1015,6 +1033,7 @@ let subflowsSize = 500;
 						</div>
 
 						<FlowGraphV2
+							{inputAssets}
 							{selectedId}
 							triggerNode={true}
 							download={!hideDownloadInGraph}

package/package/components/FlowWrapper.svelte

@@ -2,9 +2,6 @@
 import FlowBuilder from './FlowBuilder.svelte';
 let { flowStore: oldFlowStore, disableAi, light, ...props } = $props();
 let flowStore = $state(oldFlowStore);
-$effect(() => {
-    flowStore = oldFlowStore;
-});
 let trialRender = $state(true);
 if (light) {
     setTimeout(() => {

package/package/components/ItemPicker.svelte

@@ -96,7 +96,7 @@ let refreshing = $state(false);
 										if (closeOnClick) {
 											drawer?.closeDrawer()
 										}
-										pickCallback(obj['path'], obj[extraField])
+										pickCallback(obj['path'], obj[extraField], extraField2 ? obj[extraField2] : '')
 									}}
 								>
 									{#if `app` in obj}

package/package/components/ItemPicker.svelte.d.ts

@@ -1,6 +1,6 @@
 type Item = Record<string, any>;
 interface Props {
-    pickCallback: (path: string, f: string) => void;
+    pickCallback: (path: string, extraField: string, extraField2: string) => void;
     loadItems: () => Promise<Item[] | undefined>;
     extraField?: string;
     extraField2?: string | undefined;

package/package/components/MoveDrawer.svelte.d.ts

@@ -12,13 +12,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const MoveDrawer: $$__sveltets_2_IsomorphicComponent<{
-    openDrawer?: (initialPath_l: string, summary_l: string | undefined, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app") => Promise<void>;
+    openDrawer?: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "schedule" | "app" | "variable" | "raw_app") => Promise<void>;
 }, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app") => Promise<void>;
+    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "schedule" | "app" | "variable" | "raw_app") => Promise<void>;
 }, string>;
 type MoveDrawer = InstanceType<typeof MoveDrawer>;
 export default MoveDrawer;

package/package/components/ResourcePicker.svelte

@@ -4,11 +4,11 @@ import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import { Button } from './common';
-import DBManagerDrawerButton from './DBManagerDrawerButton.svelte';
 import { Pen, Plus, RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
-import { isDbType } from './apps/components/display/dbtable/utils';
 import Select from './select/Select.svelte';
+import DbManagerDrawer from './DBManagerDrawer.svelte';
+import ExploreAssetButton, { assetCanBeExplored } from '../../routes/(root)/(logged)/assets/ExploreAssetButton.svelte';
 let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, onClear = undefined } = $props();
 if (initialValue && value == undefined) {
     console.log('initialValue', initialValue);
@@ -97,6 +97,7 @@ $effect(() => {
 });
 let appConnect = $state();
 let resourceEditor = $state();
+let dbManagerDrawer = $state();
 </script>
 
 <AppConnect
@@ -203,7 +204,13 @@ let resourceEditor = $state();
 			iconOnly
 		/>
 	</div>
-	{#if showSchemaExplorer && isDbType(resourceType) && value}
-		<DBManagerDrawerButton {resourceType} resourcePath={value} />
+	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'resource', path: value }, { resource_type: resourceType })}
+		<ExploreAssetButton
+			_resourceMetadata={{ resource_type: resourceType }}
+			asset={{ kind: 'resource', path: value }}
+			{dbManagerDrawer}
+		/>
 	{/if}
 </div>
+
+<DbManagerDrawer bind:this={dbManagerDrawer} />