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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte +98 -11
  2. package/dist/DCCatalogEntryPicker/SelectedTags.svelte +4 -3
  3. package/dist/DCCatalogEntryPicker/TagBrowser.svelte +56 -10
  4. package/dist/DCCatalogEntryPicker/TagBrowser.svelte.d.ts +6 -0
  5. package/dist/DCCatalogEntryPicker/picker-column-helpers.d.ts +2 -0
  6. package/package.json +3 -2
  7. package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte +98 -11
  8. package/src/DCCatalogEntryPicker/SelectedTags.svelte +4 -3
  9. package/src/DCCatalogEntryPicker/TagBrowser.svelte +56 -10
  10. package/src/DCCatalogEntryPicker/picker-column-helpers.ts +2 -0
package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte CHANGED
@@ -5,12 +5,14 @@
5
5
  * Composes TagBrowser (searchable table with multi-select) and SelectedTags
6
6
  * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
7
7
  *
8
- * Column keys reference the COLUMN_DEFS registry in columns.ts:
9
- * 'name' → CatalogEntry.name (text)
10
- * 'dataType' → CatalogEntry.dataType (pill)
11
- * 'nodeId' → CatalogEntry.sourceParams.nodeId (code)
12
- * 'unit' → CatalogEntry.metadata.unit (pill)
13
- * 'labels' → CatalogEntry.labels[] (label pills)
8
+ * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
9
+ * server-side search. Filters by `sourceConnections` to scope entries.
10
+ *
11
+ * Load strategy:
12
+ * 1. Initial load fetches up to MAX_ENTRIES + 1 items.
13
+ * 2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
14
+ * 3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
15
+ * with 1s debounce, AbortSignal cancels in-flight requests).
14
16
  *
15
17
  * @prop dcApiUrl — DataCatalog API base URL
16
18
  * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
28
30
  import TagBrowser from './TagBrowser.svelte';
29
31
  import SelectedTags from './SelectedTags.svelte';
30
32
 
33
+ const MAX_ENTRIES = 100;
34
+
31
35
  interface Props {
32
36
  dcApiUrl?: string;
33
37
  sourceConnectionId?: string;
@@ -53,24 +57,65 @@
53
57
  }: Props = $props();
54
58
 
55
59
  let loading = $state(false);
60
+ let searching = $state(false);
56
61
  let error = $state('');
62
+ let tooMany = $state(false);
63
+
64
+ /** Abort controller for cancelling in-flight search requests */
65
+ let searchAbort: AbortController | null = null;
66
+
67
+ /** Cached client instance — recreated when dcApiUrl changes */
68
+ let client: DataCatalogClient | null = null;
69
+ let clientUrl = '';
70
+
71
+ function getClient(apiUrl: string): DataCatalogClient {
72
+ if (client && clientUrl === apiUrl) return client;
73
+ client = new DataCatalogClient({ baseUrl: apiUrl });
74
+ clientUrl = apiUrl;
75
+ return client;
76
+ }
57
77
 
58
78
  $effect(() => {
59
79
  if (dcApiUrl && sourceConnectionId) {
60
- loadEntries(dcApiUrl, sourceConnectionId);
80
+ loadInitial(dcApiUrl, sourceConnectionId);
61
81
  } else {
62
82
  entries = [];
63
83
  error = '';
84
+ tooMany = false;
64
85
  }
65
86
  });
66
87
 
67
- async function loadEntries(apiUrl: string, connId: string) {
88
+ /**
89
+ * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
90
+ * If ≤ MAX_ENTRIES items, stay in client mode.
91
+ * If more, switch to server search mode.
92
+ */
93
+ async function loadInitial(apiUrl: string, connId: string) {
94
+ // Cancel any in-flight search
95
+ searchAbort?.abort();
96
+ searchAbort = null;
97
+
68
98
  loading = true;
69
99
  error = '';
100
+ tooMany = false;
101
+ entries = [];
102
+
70
103
  try {
71
- const client = new DataCatalogClient({ baseUrl: apiUrl });
72
- const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
73
- entries = result.items ?? [];
104
+ const dc = getClient(apiUrl);
105
+ const result = await dc.catalogEntries.search('%', {
106
+ sourceConnectionIds: [connId],
107
+ limit: MAX_ENTRIES + 1
108
+ });
109
+ const items = result.items ?? [];
110
+
111
+ if (items.length > MAX_ENTRIES) {
112
+ // Too many — enter server search mode, don't show entries
113
+ tooMany = true;
114
+ entries = [];
115
+ } else {
116
+ tooMany = false;
117
+ entries = items;
118
+ }
74
119
  } catch (err: any) {
75
120
  error = err.message ?? 'Failed to load catalog entries';
76
121
  entries = [];
@@ -78,6 +123,45 @@
78
123
  loading = false;
79
124
  }
80
125
  }
126
+
127
+ /**
128
+ * Server-side search — called by TagBrowser when in server mode (tooMany).
129
+ * Cancels previous in-flight request via AbortSignal.
130
+ */
131
+ function handleServerSearch(query: string) {
132
+ if (!dcApiUrl || !sourceConnectionId) return;
133
+
134
+ // Cancel previous in-flight search
135
+ searchAbort?.abort();
136
+
137
+ if (!query) {
138
+ // Empty query in too-many mode → clear results, show hint again
139
+ entries = [];
140
+ searching = false;
141
+ return;
142
+ }
143
+
144
+ const abort = new AbortController();
145
+ searchAbort = abort;
146
+ searching = true;
147
+
148
+ const dc = getClient(dcApiUrl);
149
+ dc.catalogEntries.search(query, {
150
+ sourceConnectionIds: [sourceConnectionId],
151
+ limit: MAX_ENTRIES
152
+ }, abort.signal)
153
+ .then((result) => {
154
+ if (abort.signal.aborted) return;
155
+ entries = result.items ?? [];
156
+ searching = false;
157
+ })
158
+ .catch((err) => {
159
+ if (abort.signal.aborted) return;
160
+ error = err.message ?? 'Search failed';
161
+ entries = [];
162
+ searching = false;
163
+ });
164
+ }
81
165
  </script>
82
166
 
83
167
  <TagBrowser
@@ -88,6 +172,9 @@
88
172
  {error}
89
173
  {emptyMessage}
90
174
  {onSelectionChange}
175
+ onSearch={tooMany ? handleServerSearch : null}
176
+ {searching}
177
+ {tooMany}
91
178
  />
92
179
 
93
180
  {#if selectedIds.length > 0}
package/dist/DCCatalogEntryPicker/SelectedTags.svelte CHANGED
@@ -56,17 +56,18 @@
56
56
  <div class="tag-info">
57
57
  {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
58
58
  {@const val = resolveValue(entry, columnDescriptor.key)}
59
+ {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
59
60
  {#if index === 0}
60
61
  <!-- First column: bold primary label -->
61
- <span class="tag-primary">{val ?? '-'}</span>
62
+ <span class="tag-primary">{displayVal ?? '-'}</span>
62
63
  {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
63
64
  {#each val as label (label.id)}
64
65
  <span class="meta-item">{label.name}</span>
65
66
  {/each}
66
67
  {:else if columnDescriptor.type === 'code'}
67
- {#if val}<code class="tag-code">{val}</code>{/if}
68
+ {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
68
69
  {:else}
69
- {#if val}<span class="meta-item">{val}</span>{/if}
70
+ {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
70
71
  {/if}
71
72
  {/each}
72
73
  </div>
package/dist/DCCatalogEntryPicker/TagBrowser.svelte CHANGED
@@ -8,10 +8,14 @@
8
8
  loading = false,
9
9
  error = '',
10
10
  emptyMessage = 'No entries found for this source connection.',
11
- onSelectionChange = null
11
+ onSelectionChange = null,
12
+ onSearch = null,
13
+ searching = false,
14
+ tooMany = false
12
15
  } = $props();
13
16
 
14
17
  let searchQuery = $state('');
18
+ let debounceTimer = null;
15
19
 
16
20
  /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
17
21
  const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
20
24
  .filter(Boolean)
21
25
  );
22
26
 
27
+ /**
28
+ * When onSearch is set (server mode), entries are already filtered server-side.
29
+ * When onSearch is NOT set (client mode), filter locally.
30
+ */
23
31
  const filtered = $derived(() => {
32
+ if (onSearch) return entries;
24
33
  if (!searchQuery.trim()) return entries;
25
34
  const q = searchQuery.toLowerCase();
26
35
  return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
30
39
  const totalCount = $derived(entries.length);
31
40
  const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
32
41
 
42
+ /** Whether to show the "too many entries" hint instead of the table */
43
+ const showTooManyHint = $derived(tooMany && !searchQuery.trim());
44
+
45
+ function handleSearchInput(e) {
46
+ searchQuery = e.target.value;
47
+ if (!onSearch) return;
48
+
49
+ // Debounce 1s for server search
50
+ if (debounceTimer) clearTimeout(debounceTimer);
51
+ debounceTimer = setTimeout(() => {
52
+ onSearch(searchQuery.trim());
53
+ }, 1000);
54
+ }
55
+
33
56
  function toggleEntry(id) {
34
57
  selectedIds = selectedIds.indexOf(id) >= 0
35
58
  ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
61
84
  <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
62
85
  <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>
63
86
  </svg>
64
- <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
87
+ <input
88
+ type="text"
89
+ class="search-input"
90
+ placeholder={tooMany ? "Search to find entries..." : "Search..."}
91
+ value={searchQuery}
92
+ oninput={handleSearchInput}
93
+ />
94
+ {#if searching}
95
+ <div class="search-spinner"></div>
96
+ {/if}
65
97
  </div>
66
98
  <div class="toolbar-actions">
67
99
  <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
68
- <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
69
- <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
100
+ <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
101
+ <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
70
102
  </div>
71
103
  </div>
72
104
 
@@ -77,7 +109,12 @@
77
109
  <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>
78
110
  <span>{error}</span>
79
111
  </div>
80
- {:else if entries.length === 0}
112
+ {:else if showTooManyHint}
113
+ <div class="state-message too-many-state">
114
+ <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>
115
+ <span>Too many entries. Type in the search box to refine.</span>
116
+ </div>
117
+ {:else if entries.length === 0 && !searching}
81
118
  <div class="state-message empty-state"><span>{emptyMessage}</span></div>
82
119
  {:else}
83
120
  <div class="table-container">
@@ -102,17 +139,18 @@
102
139
  <!-- Render each column cell according to its type (text, code, pill, labels) -->
103
140
  {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
104
141
  {@const val = resolveValue(entry, columnDescriptor.key)}
105
- <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
142
+ {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
143
+ <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
106
144
  {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
107
145
  {#each val as label (label.id)}
108
146
  <span class="label-pill">{label.name}</span>
109
147
  {/each}
110
148
  {:else if columnDescriptor.type === 'code'}
111
- <code>{val ?? '-'}</code>
149
+ <code>{displayVal ?? '-'}</code>
112
150
  {:else if columnDescriptor.type === 'pill'}
113
- {#if val}<span class="pill">{val}</span>{:else}-{/if}
151
+ {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
114
152
  {:else}
115
- {val ?? '-'}
153
+ {displayVal ?? '-'}
116
154
  {/if}
117
155
  </td>
118
156
  {/each}
@@ -121,7 +159,7 @@
121
159
  </tbody>
122
160
  </table>
123
161
  </div>
124
- {#if filtered().length !== entries.length}
162
+ {#if !onSearch && filtered().length !== entries.length}
125
163
  <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
126
164
  {/if}
127
165
  {/if}
@@ -141,6 +179,13 @@
141
179
  }
142
180
  .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
143
181
  .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
182
+ .search-spinner {
183
+ position: absolute; right: 0.75rem;
184
+ width: 0.875rem; height: 0.875rem;
185
+ border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
186
+ border-top-color: var(--cds-interactive, #0f62fe);
187
+ border-radius: 50%; animation: spin 0.8s linear infinite;
188
+ }
144
189
  .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
145
190
  .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
146
191
  .action-button {
@@ -158,6 +203,7 @@
158
203
  }
159
204
  .error-state { color: var(--cds-support-error, #fa4d56); }
160
205
  .empty-state { color: var(--cds-text-helper, #8d8d8d); }
206
+ .too-many-state { color: var(--cds-support-warning, #f1c21b); }
161
207
  .spinner {
162
208
  width: 1rem; height: 1rem;
163
209
  border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
package/dist/DCCatalogEntryPicker/TagBrowser.svelte.d.ts CHANGED
@@ -11,6 +11,9 @@ declare const TagBrowser: import("svelte").Component<{
11
11
  error?: string;
12
12
  emptyMessage?: string;
13
13
  onSelectionChange?: any;
14
+ onSearch?: any;
15
+ searching?: boolean;
16
+ tooMany?: boolean;
14
17
  }, {}, "selectedIds">;
15
18
  type $$ComponentProps = {
16
19
  entries?: any[];
@@ -20,5 +23,8 @@ type $$ComponentProps = {
20
23
  error?: string;
21
24
  emptyMessage?: string;
22
25
  onSelectionChange?: any;
26
+ onSearch?: any;
27
+ searching?: boolean;
28
+ tooMany?: boolean;
23
29
  };
24
30
  import { DEFAULT_COLUMNS } from './picker-column-helpers';
package/dist/DCCatalogEntryPicker/picker-column-helpers.d.ts CHANGED
@@ -43,6 +43,8 @@ export interface ColumnDef {
43
43
  label: string;
44
44
  resolve: (entry: CatalogEntry) => unknown;
45
45
  type: ColumnType;
46
+ /** Optional formatter function to transform the resolved value for display */
47
+ format?: (value: unknown, key: string) => string;
46
48
  }
47
49
  /**
48
50
  * Static column definitions for top-level CatalogEntry fields.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@industream/flowmaker-flowbox-ui-components",
3
- "version": "0.0.14",
3
+ "version": "0.0.15",
4
4
  "description": "Reusable Svelte components for FlowMaker FlowBox UI",
5
5
  "type": "module",
6
6
  "svelte": "./dist/index.js",
@@ -43,9 +43,10 @@
43
43
  },
44
44
  "peerDependencies": {
45
45
  "svelte": "^5.0.0",
46
- "@industream/datacatalog-client": "^1.0.0-preview.2"
46
+ "@industream/datacatalog-client": "^1.4.0"
47
47
  },
48
48
  "devDependencies": {
49
+ "@industream/datacatalog-client": "1.4.1",
49
50
  "svelte": "^5.0.0",
50
51
  "vite": "^6.0.0",
51
52
  "@sveltejs/vite-plugin-svelte": "^5.0.0",
package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte CHANGED
@@ -5,12 +5,14 @@
5
5
  * Composes TagBrowser (searchable table with multi-select) and SelectedTags
6
6
  * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
7
7
  *
8
- * Column keys reference the COLUMN_DEFS registry in columns.ts:
9
- * 'name' → CatalogEntry.name (text)
10
- * 'dataType' → CatalogEntry.dataType (pill)
11
- * 'nodeId' → CatalogEntry.sourceParams.nodeId (code)
12
- * 'unit' → CatalogEntry.metadata.unit (pill)
13
- * 'labels' → CatalogEntry.labels[] (label pills)
8
+ * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
9
+ * server-side search. Filters by `sourceConnections` to scope entries.
10
+ *
11
+ * Load strategy:
12
+ * 1. Initial load fetches up to MAX_ENTRIES + 1 items.
13
+ * 2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
14
+ * 3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
15
+ * with 1s debounce, AbortSignal cancels in-flight requests).
14
16
  *
15
17
  * @prop dcApiUrl — DataCatalog API base URL
16
18
  * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
28
30
  import TagBrowser from './TagBrowser.svelte';
29
31
  import SelectedTags from './SelectedTags.svelte';
30
32
 
33
+ const MAX_ENTRIES = 100;
34
+
31
35
  interface Props {
32
36
  dcApiUrl?: string;
33
37
  sourceConnectionId?: string;
@@ -53,24 +57,65 @@
53
57
  }: Props = $props();
54
58
 
55
59
  let loading = $state(false);
60
+ let searching = $state(false);
56
61
  let error = $state('');
62
+ let tooMany = $state(false);
63
+
64
+ /** Abort controller for cancelling in-flight search requests */
65
+ let searchAbort: AbortController | null = null;
66
+
67
+ /** Cached client instance — recreated when dcApiUrl changes */
68
+ let client: DataCatalogClient | null = null;
69
+ let clientUrl = '';
70
+
71
+ function getClient(apiUrl: string): DataCatalogClient {
72
+ if (client && clientUrl === apiUrl) return client;
73
+ client = new DataCatalogClient({ baseUrl: apiUrl });
74
+ clientUrl = apiUrl;
75
+ return client;
76
+ }
57
77
 
58
78
  $effect(() => {
59
79
  if (dcApiUrl && sourceConnectionId) {
60
- loadEntries(dcApiUrl, sourceConnectionId);
80
+ loadInitial(dcApiUrl, sourceConnectionId);
61
81
  } else {
62
82
  entries = [];
63
83
  error = '';
84
+ tooMany = false;
64
85
  }
65
86
  });
66
87
 
67
- async function loadEntries(apiUrl: string, connId: string) {
88
+ /**
89
+ * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
90
+ * If ≤ MAX_ENTRIES items, stay in client mode.
91
+ * If more, switch to server search mode.
92
+ */
93
+ async function loadInitial(apiUrl: string, connId: string) {
94
+ // Cancel any in-flight search
95
+ searchAbort?.abort();
96
+ searchAbort = null;
97
+
68
98
  loading = true;
69
99
  error = '';
100
+ tooMany = false;
101
+ entries = [];
102
+
70
103
  try {
71
- const client = new DataCatalogClient({ baseUrl: apiUrl });
72
- const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
73
- entries = result.items ?? [];
104
+ const dc = getClient(apiUrl);
105
+ const result = await dc.catalogEntries.search('%', {
106
+ sourceConnectionIds: [connId],
107
+ limit: MAX_ENTRIES + 1
108
+ });
109
+ const items = result.items ?? [];
110
+
111
+ if (items.length > MAX_ENTRIES) {
112
+ // Too many — enter server search mode, don't show entries
113
+ tooMany = true;
114
+ entries = [];
115
+ } else {
116
+ tooMany = false;
117
+ entries = items;
118
+ }
74
119
  } catch (err: any) {
75
120
  error = err.message ?? 'Failed to load catalog entries';
76
121
  entries = [];
@@ -78,6 +123,45 @@
78
123
  loading = false;
79
124
  }
80
125
  }
126
+
127
+ /**
128
+ * Server-side search — called by TagBrowser when in server mode (tooMany).
129
+ * Cancels previous in-flight request via AbortSignal.
130
+ */
131
+ function handleServerSearch(query: string) {
132
+ if (!dcApiUrl || !sourceConnectionId) return;
133
+
134
+ // Cancel previous in-flight search
135
+ searchAbort?.abort();
136
+
137
+ if (!query) {
138
+ // Empty query in too-many mode → clear results, show hint again
139
+ entries = [];
140
+ searching = false;
141
+ return;
142
+ }
143
+
144
+ const abort = new AbortController();
145
+ searchAbort = abort;
146
+ searching = true;
147
+
148
+ const dc = getClient(dcApiUrl);
149
+ dc.catalogEntries.search(query, {
150
+ sourceConnectionIds: [sourceConnectionId],
151
+ limit: MAX_ENTRIES
152
+ }, abort.signal)
153
+ .then((result) => {
154
+ if (abort.signal.aborted) return;
155
+ entries = result.items ?? [];
156
+ searching = false;
157
+ })
158
+ .catch((err) => {
159
+ if (abort.signal.aborted) return;
160
+ error = err.message ?? 'Search failed';
161
+ entries = [];
162
+ searching = false;
163
+ });
164
+ }
81
165
  </script>
82
166
 
83
167
  <TagBrowser
@@ -88,6 +172,9 @@
88
172
  {error}
89
173
  {emptyMessage}
90
174
  {onSelectionChange}
175
+ onSearch={tooMany ? handleServerSearch : null}
176
+ {searching}
177
+ {tooMany}
91
178
  />
92
179
 
93
180
  {#if selectedIds.length > 0}
package/src/DCCatalogEntryPicker/SelectedTags.svelte CHANGED
@@ -56,17 +56,18 @@
56
56
  <div class="tag-info">
57
57
  {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
58
58
  {@const val = resolveValue(entry, columnDescriptor.key)}
59
+ {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
59
60
  {#if index === 0}
60
61
  <!-- First column: bold primary label -->
61
- <span class="tag-primary">{val ?? '-'}</span>
62
+ <span class="tag-primary">{displayVal ?? '-'}</span>
62
63
  {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
63
64
  {#each val as label (label.id)}
64
65
  <span class="meta-item">{label.name}</span>
65
66
  {/each}
66
67
  {:else if columnDescriptor.type === 'code'}
67
- {#if val}<code class="tag-code">{val}</code>{/if}
68
+ {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
68
69
  {:else}
69
- {#if val}<span class="meta-item">{val}</span>{/if}
70
+ {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
70
71
  {/if}
71
72
  {/each}
72
73
  </div>
package/src/DCCatalogEntryPicker/TagBrowser.svelte CHANGED
@@ -8,10 +8,14 @@
8
8
  loading = false,
9
9
  error = '',
10
10
  emptyMessage = 'No entries found for this source connection.',
11
- onSelectionChange = null
11
+ onSelectionChange = null,
12
+ onSearch = null,
13
+ searching = false,
14
+ tooMany = false
12
15
  } = $props();
13
16
 
14
17
  let searchQuery = $state('');
18
+ let debounceTimer = null;
15
19
 
16
20
  /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
17
21
  const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
20
24
  .filter(Boolean)
21
25
  );
22
26
 
27
+ /**
28
+ * When onSearch is set (server mode), entries are already filtered server-side.
29
+ * When onSearch is NOT set (client mode), filter locally.
30
+ */
23
31
  const filtered = $derived(() => {
32
+ if (onSearch) return entries;
24
33
  if (!searchQuery.trim()) return entries;
25
34
  const q = searchQuery.toLowerCase();
26
35
  return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
30
39
  const totalCount = $derived(entries.length);
31
40
  const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
32
41
 
42
+ /** Whether to show the "too many entries" hint instead of the table */
43
+ const showTooManyHint = $derived(tooMany && !searchQuery.trim());
44
+
45
+ function handleSearchInput(e) {
46
+ searchQuery = e.target.value;
47
+ if (!onSearch) return;
48
+
49
+ // Debounce 1s for server search
50
+ if (debounceTimer) clearTimeout(debounceTimer);
51
+ debounceTimer = setTimeout(() => {
52
+ onSearch(searchQuery.trim());
53
+ }, 1000);
54
+ }
55
+
33
56
  function toggleEntry(id) {
34
57
  selectedIds = selectedIds.indexOf(id) >= 0
35
58
  ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
61
84
  <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
62
85
  <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>
63
86
  </svg>
64
- <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
87
+ <input
88
+ type="text"
89
+ class="search-input"
90
+ placeholder={tooMany ? "Search to find entries..." : "Search..."}
91
+ value={searchQuery}
92
+ oninput={handleSearchInput}
93
+ />
94
+ {#if searching}
95
+ <div class="search-spinner"></div>
96
+ {/if}
65
97
  </div>
66
98
  <div class="toolbar-actions">
67
99
  <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
68
- <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
69
- <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
100
+ <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
101
+ <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
70
102
  </div>
71
103
  </div>
72
104
 
@@ -77,7 +109,12 @@
77
109
  <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>
78
110
  <span>{error}</span>
79
111
  </div>
80
- {:else if entries.length === 0}
112
+ {:else if showTooManyHint}
113
+ <div class="state-message too-many-state">
114
+ <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>
115
+ <span>Too many entries. Type in the search box to refine.</span>
116
+ </div>
117
+ {:else if entries.length === 0 && !searching}
81
118
  <div class="state-message empty-state"><span>{emptyMessage}</span></div>
82
119
  {:else}
83
120
  <div class="table-container">
@@ -102,17 +139,18 @@
102
139
  <!-- Render each column cell according to its type (text, code, pill, labels) -->
103
140
  {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
104
141
  {@const val = resolveValue(entry, columnDescriptor.key)}
105
- <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
142
+ {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
143
+ <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
106
144
  {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
107
145
  {#each val as label (label.id)}
108
146
  <span class="label-pill">{label.name}</span>
109
147
  {/each}
110
148
  {:else if columnDescriptor.type === 'code'}
111
- <code>{val ?? '-'}</code>
149
+ <code>{displayVal ?? '-'}</code>
112
150
  {:else if columnDescriptor.type === 'pill'}
113
- {#if val}<span class="pill">{val}</span>{:else}-{/if}
151
+ {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
114
152
  {:else}
115
- {val ?? '-'}
153
+ {displayVal ?? '-'}
116
154
  {/if}
117
155
  </td>
118
156
  {/each}
@@ -121,7 +159,7 @@
121
159
  </tbody>
122
160
  </table>
123
161
  </div>
124
- {#if filtered().length !== entries.length}
162
+ {#if !onSearch && filtered().length !== entries.length}
125
163
  <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
126
164
  {/if}
127
165
  {/if}
@@ -141,6 +179,13 @@
141
179
  }
142
180
  .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
143
181
  .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
182
+ .search-spinner {
183
+ position: absolute; right: 0.75rem;
184
+ width: 0.875rem; height: 0.875rem;
185
+ border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
186
+ border-top-color: var(--cds-interactive, #0f62fe);
187
+ border-radius: 50%; animation: spin 0.8s linear infinite;
188
+ }
144
189
  .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
145
190
  .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
146
191
  .action-button {
@@ -158,6 +203,7 @@
158
203
  }
159
204
  .error-state { color: var(--cds-support-error, #fa4d56); }
160
205
  .empty-state { color: var(--cds-text-helper, #8d8d8d); }
206
+ .too-many-state { color: var(--cds-support-warning, #f1c21b); }
161
207
  .spinner {
162
208
  width: 1rem; height: 1rem;
163
209
  border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
package/src/DCCatalogEntryPicker/picker-column-helpers.ts CHANGED
@@ -46,6 +46,8 @@ export interface ColumnDef {
46
46
  label: string;
47
47
  resolve: (entry: CatalogEntry) => unknown;
48
48
  type: ColumnType;
49
+ /** Optional formatter function to transform the resolved value for display */
50
+ format?: (value: unknown, key: string) => string;
49
51
  }
50
52
 
51
53
  /**