@industream/flowmaker-flowbox-ui-components 0.0.14 → 0.0.15

package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -5,12 +5,14 @@
      * Composes TagBrowser (searchable table with multi-select) and SelectedTags
      * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
      *
-     * Column keys reference the COLUMN_DEFS registry in columns.ts:
-     *   'name'     → CatalogEntry.name              (text)
-     *   'dataType' → CatalogEntry.dataType           (pill)
-     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
-     *   'unit'     → CatalogEntry.metadata.unit       (pill)
-     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
+     * server-side search. Filters by `sourceConnections` to scope entries.
+     *
+     * Load strategy:
+     *   1. Initial load fetches up to MAX_ENTRIES + 1 items.
+     *   2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
+     *   3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
+     *      with 1s debounce, AbortSignal cancels in-flight requests).
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
 
+    const MAX_ENTRIES = 100;
+
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
@@ -53,24 +57,65 @@
     }: Props = $props();
 
     let loading = $state(false);
+    let searching = $state(false);
     let error = $state('');
+    let tooMany = $state(false);
+
+    /** Abort controller for cancelling in-flight search requests */
+    let searchAbort: AbortController | null = null;
+
+    /** Cached client instance — recreated when dcApiUrl changes */
+    let client: DataCatalogClient | null = null;
+    let clientUrl = '';
+
+    function getClient(apiUrl: string): DataCatalogClient {
+        if (client && clientUrl === apiUrl) return client;
+        client = new DataCatalogClient({ baseUrl: apiUrl });
+        clientUrl = apiUrl;
+        return client;
+    }
 
     $effect(() => {
         if (dcApiUrl && sourceConnectionId) {
-            loadEntries(dcApiUrl, sourceConnectionId);
+            loadInitial(dcApiUrl, sourceConnectionId);
         } else {
             entries = [];
             error = '';
+            tooMany = false;
         }
     });
 
-    async function loadEntries(apiUrl: string, connId: string) {
+    /**
+     * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
+     * If ≤ MAX_ENTRIES items, stay in client mode.
+     * If more, switch to server search mode.
+     */
+    async function loadInitial(apiUrl: string, connId: string) {
+        // Cancel any in-flight search
+        searchAbort?.abort();
+        searchAbort = null;
+
         loading = true;
         error = '';
+        tooMany = false;
+        entries = [];
+
         try {
-            const client = new DataCatalogClient({ baseUrl: apiUrl });
-            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
-            entries = result.items ?? [];
+            const dc = getClient(apiUrl);
+            const result = await dc.catalogEntries.search('%', {
+                sourceConnectionIds: [connId],
+                limit: MAX_ENTRIES + 1
+            });
+            const items = result.items ?? [];
+
+            if (items.length > MAX_ENTRIES) {
+                // Too many — enter server search mode, don't show entries
+                tooMany = true;
+                entries = [];
+            } else {
+                tooMany = false;
+                entries = items;
+            }
         } catch (err: any) {
             error = err.message ?? 'Failed to load catalog entries';
             entries = [];
@@ -78,6 +123,45 @@
             loading = false;
         }
     }
+
+    /**
+     * Server-side search — called by TagBrowser when in server mode (tooMany).
+     * Cancels previous in-flight request via AbortSignal.
+     */
+    function handleServerSearch(query: string) {
+        if (!dcApiUrl || !sourceConnectionId) return;
+
+        // Cancel previous in-flight search
+        searchAbort?.abort();
+
+        if (!query) {
+            // Empty query in too-many mode → clear results, show hint again
+            entries = [];
+            searching = false;
+            return;
+        }
+
+        const abort = new AbortController();
+        searchAbort = abort;
+        searching = true;
+
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.search(query, {
+            sourceConnectionIds: [sourceConnectionId],
+            limit: MAX_ENTRIES
+        }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                entries = result.items ?? [];
+                searching = false;
+            })
+            .catch((err) => {
+                if (abort.signal.aborted) return;
+                error = err.message ?? 'Search failed';
+                entries = [];
+                searching = false;
+            });
+    }
 </script>
 
 <TagBrowser
@@ -88,6 +172,9 @@
     {error}
     {emptyMessage}
     {onSelectionChange}
+    onSearch={tooMany ? handleServerSearch : null}
+    {searching}
+    {tooMany}
 />
 
 {#if selectedIds.length > 0}

package/dist/DCCatalogEntryPicker/SelectedTags.svelte

@@ -56,17 +56,18 @@
                             <div class="tag-info">
                                 {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
                                     {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
                                     {#if index === 0}
                                         <!-- First column: bold primary label -->
-                                        <span class="tag-primary">{val ?? '-'}</span>
+                                        <span class="tag-primary">{displayVal ?? '-'}</span>
                                     {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="meta-item">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                        {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
                                     {:else}
-                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                        {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
                                     {/if}
                                 {/each}
                             </div>

package/dist/DCCatalogEntryPicker/TagBrowser.svelte

@@ -8,10 +8,14 @@
         loading = false,
         error = '',
         emptyMessage = 'No entries found for this source connection.',
-        onSelectionChange = null
+        onSelectionChange = null,
+        onSearch = null,
+        searching = false,
+        tooMany = false
     } = $props();
 
     let searchQuery = $state('');
+    let debounceTimer = null;
 
     /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
     const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
             .filter(Boolean)
     );
 
+    /**
+     * When onSearch is set (server mode), entries are already filtered server-side.
+     * When onSearch is NOT set (client mode), filter locally.
+     */
     const filtered = $derived(() => {
+        if (onSearch) return entries;
         if (!searchQuery.trim()) return entries;
         const q = searchQuery.toLowerCase();
         return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
     const totalCount = $derived(entries.length);
     const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
 
+    /** Whether to show the "too many entries" hint instead of the table */
+    const showTooManyHint = $derived(tooMany && !searchQuery.trim());
+
+    function handleSearchInput(e) {
+        searchQuery = e.target.value;
+        if (!onSearch) return;
+
+        // Debounce 1s for server search
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            onSearch(searchQuery.trim());
+        }, 1000);
+    }
+
     function toggleEntry(id) {
         selectedIds = selectedIds.indexOf(id) >= 0
             ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
             <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
                 <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
             </svg>
-            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+            <input
+                type="text"
+                class="search-input"
+                placeholder={tooMany ? "Search to find entries..." : "Search..."}
+                value={searchQuery}
+                oninput={handleSearchInput}
+            />
+            {#if searching}
+                <div class="search-spinner"></div>
+            {/if}
         </div>
         <div class="toolbar-actions">
             <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
-            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
-            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+            <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
         </div>
     </div>
 
@@ -77,7 +109,12 @@
             <svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm.75 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
             <span>{error}</span>
         </div>
-    {:else if entries.length === 0}
+    {:else if showTooManyHint}
+        <div class="state-message too-many-state">
+            <svg viewBox="0 0 16 16" width="16" height="16"><path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path></svg>
+            <span>Too many entries. Type in the search box to refine.</span>
+        </div>
+    {:else if entries.length === 0 && !searching}
         <div class="state-message empty-state"><span>{emptyMessage}</span></div>
     {:else}
         <div class="table-container">
@@ -102,17 +139,18 @@
                             <!-- Render each column cell according to its type (text, code, pill, labels) -->
                             {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
                                 {@const val = resolveValue(entry, columnDescriptor.key)}
-                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
+                                <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
                                     {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="label-pill">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        <code>{val ?? '-'}</code>
+                                        <code>{displayVal ?? '-'}</code>
                                     {:else if columnDescriptor.type === 'pill'}
-                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                        {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
                                     {:else}
-                                        {val ?? '-'}
+                                        {displayVal ?? '-'}
                                     {/if}
                                 </td>
                             {/each}
@@ -121,7 +159,7 @@
                 </tbody>
             </table>
         </div>
-        {#if filtered().length !== entries.length}
+        {#if !onSearch && filtered().length !== entries.length}
             <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
         {/if}
     {/if}
@@ -141,6 +179,13 @@
     }
     .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
     .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .search-spinner {
+        position: absolute; right: 0.75rem;
+        width: 0.875rem; height: 0.875rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
     .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
     .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
     .action-button {
@@ -158,6 +203,7 @@
     }
     .error-state { color: var(--cds-support-error, #fa4d56); }
     .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .too-many-state { color: var(--cds-support-warning, #f1c21b); }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);

package/dist/DCCatalogEntryPicker/TagBrowser.svelte.d.ts

@@ -11,6 +11,9 @@ declare const TagBrowser: import("svelte").Component<{
     error?: string;
     emptyMessage?: string;
     onSelectionChange?: any;
+    onSearch?: any;
+    searching?: boolean;
+    tooMany?: boolean;
 }, {}, "selectedIds">;
 type $$ComponentProps = {
     entries?: any[];
@@ -20,5 +23,8 @@ type $$ComponentProps = {
     error?: string;
     emptyMessage?: string;
     onSelectionChange?: any;
+    onSearch?: any;
+    searching?: boolean;
+    tooMany?: boolean;
 };
 import { DEFAULT_COLUMNS } from './picker-column-helpers';

package/dist/DCCatalogEntryPicker/picker-column-helpers.d.ts

@@ -43,6 +43,8 @@ export interface ColumnDef {
     label: string;
     resolve: (entry: CatalogEntry) => unknown;
     type: ColumnType;
+    /** Optional formatter function to transform the resolved value for display */
+    format?: (value: unknown, key: string) => string;
 }
 /**
  * Static column definitions for top-level CatalogEntry fields.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -43,9 +43,10 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@industream/datacatalog-client": "^1.0.0-preview.2"
+    "@industream/datacatalog-client": "^1.4.0"
   },
   "devDependencies": {
+    "@industream/datacatalog-client": "1.4.1",
     "svelte": "^5.0.0",
     "vite": "^6.0.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -5,12 +5,14 @@
      * Composes TagBrowser (searchable table with multi-select) and SelectedTags
      * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
      *
-     * Column keys reference the COLUMN_DEFS registry in columns.ts:
-     *   'name'     → CatalogEntry.name              (text)
-     *   'dataType' → CatalogEntry.dataType           (pill)
-     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
-     *   'unit'     → CatalogEntry.metadata.unit       (pill)
-     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
+     * server-side search. Filters by `sourceConnections` to scope entries.
+     *
+     * Load strategy:
+     *   1. Initial load fetches up to MAX_ENTRIES + 1 items.
+     *   2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
+     *   3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
+     *      with 1s debounce, AbortSignal cancels in-flight requests).
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
 
+    const MAX_ENTRIES = 100;
+
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
@@ -53,24 +57,65 @@
     }: Props = $props();
 
     let loading = $state(false);
+    let searching = $state(false);
     let error = $state('');
+    let tooMany = $state(false);
+
+    /** Abort controller for cancelling in-flight search requests */
+    let searchAbort: AbortController | null = null;
+
+    /** Cached client instance — recreated when dcApiUrl changes */
+    let client: DataCatalogClient | null = null;
+    let clientUrl = '';
+
+    function getClient(apiUrl: string): DataCatalogClient {
+        if (client && clientUrl === apiUrl) return client;
+        client = new DataCatalogClient({ baseUrl: apiUrl });
+        clientUrl = apiUrl;
+        return client;
+    }
 
     $effect(() => {
         if (dcApiUrl && sourceConnectionId) {
-            loadEntries(dcApiUrl, sourceConnectionId);
+            loadInitial(dcApiUrl, sourceConnectionId);
         } else {
             entries = [];
             error = '';
+            tooMany = false;
         }
     });
 
-    async function loadEntries(apiUrl: string, connId: string) {
+    /**
+     * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
+     * If ≤ MAX_ENTRIES items, stay in client mode.
+     * If more, switch to server search mode.
+     */
+    async function loadInitial(apiUrl: string, connId: string) {
+        // Cancel any in-flight search
+        searchAbort?.abort();
+        searchAbort = null;
+
         loading = true;
         error = '';
+        tooMany = false;
+        entries = [];
+
         try {
-            const client = new DataCatalogClient({ baseUrl: apiUrl });
-            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
-            entries = result.items ?? [];
+            const dc = getClient(apiUrl);
+            const result = await dc.catalogEntries.search('%', {
+                sourceConnectionIds: [connId],
+                limit: MAX_ENTRIES + 1
+            });
+            const items = result.items ?? [];
+
+            if (items.length > MAX_ENTRIES) {
+                // Too many — enter server search mode, don't show entries
+                tooMany = true;
+                entries = [];
+            } else {
+                tooMany = false;
+                entries = items;
+            }
         } catch (err: any) {
             error = err.message ?? 'Failed to load catalog entries';
             entries = [];
@@ -78,6 +123,45 @@
             loading = false;
         }
     }
+
+    /**
+     * Server-side search — called by TagBrowser when in server mode (tooMany).
+     * Cancels previous in-flight request via AbortSignal.
+     */
+    function handleServerSearch(query: string) {
+        if (!dcApiUrl || !sourceConnectionId) return;
+
+        // Cancel previous in-flight search
+        searchAbort?.abort();
+
+        if (!query) {
+            // Empty query in too-many mode → clear results, show hint again
+            entries = [];
+            searching = false;
+            return;
+        }
+
+        const abort = new AbortController();
+        searchAbort = abort;
+        searching = true;
+
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.search(query, {
+            sourceConnectionIds: [sourceConnectionId],
+            limit: MAX_ENTRIES
+        }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                entries = result.items ?? [];
+                searching = false;
+            })
+            .catch((err) => {
+                if (abort.signal.aborted) return;
+                error = err.message ?? 'Search failed';
+                entries = [];
+                searching = false;
+            });
+    }
 </script>
 
 <TagBrowser
@@ -88,6 +172,9 @@
     {error}
     {emptyMessage}
     {onSelectionChange}
+    onSearch={tooMany ? handleServerSearch : null}
+    {searching}
+    {tooMany}
 />
 
 {#if selectedIds.length > 0}

package/src/DCCatalogEntryPicker/SelectedTags.svelte

@@ -56,17 +56,18 @@
                             <div class="tag-info">
                                 {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
                                     {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
                                     {#if index === 0}
                                         <!-- First column: bold primary label -->
-                                        <span class="tag-primary">{val ?? '-'}</span>
+                                        <span class="tag-primary">{displayVal ?? '-'}</span>
                                     {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="meta-item">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                        {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
                                     {:else}
-                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                        {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
                                     {/if}
                                 {/each}
                             </div>

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -8,10 +8,14 @@
         loading = false,
         error = '',
         emptyMessage = 'No entries found for this source connection.',
-        onSelectionChange = null
+        onSelectionChange = null,
+        onSearch = null,
+        searching = false,
+        tooMany = false
     } = $props();
 
     let searchQuery = $state('');
+    let debounceTimer = null;
 
     /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
     const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
             .filter(Boolean)
     );
 
+    /**
+     * When onSearch is set (server mode), entries are already filtered server-side.
+     * When onSearch is NOT set (client mode), filter locally.
+     */
     const filtered = $derived(() => {
+        if (onSearch) return entries;
         if (!searchQuery.trim()) return entries;
         const q = searchQuery.toLowerCase();
         return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
     const totalCount = $derived(entries.length);
     const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
 
+    /** Whether to show the "too many entries" hint instead of the table */
+    const showTooManyHint = $derived(tooMany && !searchQuery.trim());
+
+    function handleSearchInput(e) {
+        searchQuery = e.target.value;
+        if (!onSearch) return;
+
+        // Debounce 1s for server search
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            onSearch(searchQuery.trim());
+        }, 1000);
+    }
+
     function toggleEntry(id) {
         selectedIds = selectedIds.indexOf(id) >= 0
             ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
             <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
                 <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
             </svg>
-            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+            <input
+                type="text"
+                class="search-input"
+                placeholder={tooMany ? "Search to find entries..." : "Search..."}
+                value={searchQuery}
+                oninput={handleSearchInput}
+            />
+            {#if searching}
+                <div class="search-spinner"></div>
+            {/if}
         </div>
         <div class="toolbar-actions">
             <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
-            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
-            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+            <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
         </div>
     </div>
 
@@ -77,7 +109,12 @@
             <svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm.75 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
             <span>{error}</span>
         </div>
-    {:else if entries.length === 0}
+    {:else if showTooManyHint}
+        <div class="state-message too-many-state">
+            <svg viewBox="0 0 16 16" width="16" height="16"><path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path></svg>
+            <span>Too many entries. Type in the search box to refine.</span>
+        </div>
+    {:else if entries.length === 0 && !searching}
         <div class="state-message empty-state"><span>{emptyMessage}</span></div>
     {:else}
         <div class="table-container">
@@ -102,17 +139,18 @@
                             <!-- Render each column cell according to its type (text, code, pill, labels) -->
                             {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
                                 {@const val = resolveValue(entry, columnDescriptor.key)}
-                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
+                                <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
                                     {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="label-pill">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        <code>{val ?? '-'}</code>
+                                        <code>{displayVal ?? '-'}</code>
                                     {:else if columnDescriptor.type === 'pill'}
-                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                        {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
                                     {:else}
-                                        {val ?? '-'}
+                                        {displayVal ?? '-'}
                                     {/if}
                                 </td>
                             {/each}
@@ -121,7 +159,7 @@
                 </tbody>
             </table>
         </div>
-        {#if filtered().length !== entries.length}
+        {#if !onSearch && filtered().length !== entries.length}
             <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
         {/if}
     {/if}
@@ -141,6 +179,13 @@
     }
     .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
     .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .search-spinner {
+        position: absolute; right: 0.75rem;
+        width: 0.875rem; height: 0.875rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
     .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
     .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
     .action-button {
@@ -158,6 +203,7 @@
     }
     .error-state { color: var(--cds-support-error, #fa4d56); }
     .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .too-many-state { color: var(--cds-support-warning, #f1c21b); }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);

package/src/DCCatalogEntryPicker/picker-column-helpers.ts

@@ -46,6 +46,8 @@ export interface ColumnDef {
     label: string;
     resolve: (entry: CatalogEntry) => unknown;
     type: ColumnType;
+    /** Optional formatter function to transform the resolved value for display */
+    format?: (value: unknown, key: string) => string;
 }
 
 /**