@industream/flowmaker-flowbox-ui-components 1.0.5 → 1.0.6-poc.1

package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -24,6 +24,7 @@
      * @prop onSelectionChange  — Called when selection changes (receives full selectedIds array)
      * @prop onRemove           — Called when a single entry is removed from the selection
      */
+    import { untrack } from 'svelte';
     import { DataCatalogClient } from '@industream/datacatalog-client';
     import type { CatalogEntry } from '@industream/datacatalog-client/dto';
     import { DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY } from './picker-column-helpers';
@@ -126,9 +127,11 @@
             const uniqueItems = deduplicateEntries(items);
 
             if (uniqueItems.length > MAX_ENTRIES) {
-                // Too many — enter server search mode, don't show entries
+                // Too many for client-side filtering → server-search mode. Still show the
+                // first MAX_ENTRIES as a browsable PREVIEW (with a "not all displayed"
+                // warning in TagBrowser) instead of a blank "type to search" screen.
                 tooMany = true;
-                entries = [];
+                entries = uniqueItems.slice(0, MAX_ENTRIES);
             } else {
                 tooMany = false;
                 entries = uniqueItems;
@@ -152,9 +155,9 @@
         searchAbort?.abort();
 
         if (!query) {
-            // Empty query in too-many mode → clear results, show hint again
-            entries = [];
+            // Empty query in too-many mode → restore the first-N preview.
             searching = false;
+            loadInitial(dcApiUrl, sourceConnectionId);
             return;
         }
 
@@ -180,6 +183,48 @@
                 searching = false;
             });
     }
+
+    /**
+     * Full details of the SELECTED entries, fetched by ID — decoupled from the browse
+     * list (`entries`), which is empty in `tooMany` mode and only holds the current
+     * page/search otherwise. Without this, the SelectedTags panel can only render
+     * selected tags that happen to be in `entries` → on large sources it shows
+     * "No tags selected" / loses the selection visually despite a correct count.
+     */
+    let selectedEntries = $state<CatalogEntry[]>([]);
+
+    $effect(() => {
+        const ids = [...selectedIds];   // reactive dependency
+        const url = dcApiUrl;           // reactive dependency
+
+        if (!url || ids.length === 0) {
+            selectedEntries = [];
+            return;
+        }
+
+        // Reuse already-resolved entries that are still selected; fetch only the missing.
+        const idSet = new Set(ids);
+        const current = untrack(() => selectedEntries);
+        const keep = current.filter((e) => idSet.has(e.id));
+        const have = new Set(keep.map((e) => e.id));
+        const missing = ids.filter((id) => !have.has(id));
+
+        if (missing.length === 0) {
+            if (keep.length !== current.length) selectedEntries = keep;
+            return;
+        }
+
+        // get() auto-switches to POST /catalog-entries/query for large id lists (URI-safe).
+        getClient(url).catalogEntries
+            .get({ ids: missing })
+            .then((res) => {
+                const latest = new Set(untrack(() => selectedIds));
+                selectedEntries = [...keep, ...(res.items ?? [])].filter((e) => latest.has(e.id));
+            })
+            .catch(() => {
+                // Keep what we have; SelectedTags falls back to the browse list below.
+            });
+    });
 </script>
 
 <TagBrowser
@@ -197,7 +242,7 @@
 
 {#if selectedIds.length > 0}
     <SelectedTags
-        {entries}
+        entries={selectedEntries.length > 0 ? selectedEntries : entries}
         bind:selectedIds
         columns={selectedColumnsDisplay}
         {onRemove}

package/dist/DCCatalogEntryPicker/TagBrowser.svelte

@@ -39,9 +39,6 @@
     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;
@@ -109,14 +106,15 @@
             <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 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>
+        <div class="state-message empty-state"><span>{tooMany ? 'No matching entries. Refine your search.' : emptyMessage}</span></div>
     {:else}
+        {#if tooMany}
+            <div class="too-many-banner">
+                <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>Showing {entries.length} entries (not all). Use the search box to find others.</span>
+            </div>
+        {/if}
         <div class="table-container">
             <table class="entry-table">
                 <!-- Table headers: one checkbox column + one column per columnDescriptor -->
@@ -203,7 +201,14 @@
     }
     .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); }
+    .too-many-banner {
+        display: flex; align-items: center; gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: var(--cds-notification-background-warning, #3d3522);
+        border-left: 3px solid var(--cds-support-warning, #f1c21b);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.75rem;
+    }
+    .too-many-banner svg { color: var(--cds-support-warning, #f1c21b); flex: 0 0 auto; }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "1.0.5",
+  "version": "1.0.6-poc.1",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -39,7 +39,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "svelte-package --input src"
+    "build": "svelte-package --input src",
+    "dev": "vite --config vite.dev.config.ts"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -24,6 +24,7 @@
      * @prop onSelectionChange  — Called when selection changes (receives full selectedIds array)
      * @prop onRemove           — Called when a single entry is removed from the selection
      */
+    import { untrack } from 'svelte';
     import { DataCatalogClient } from '@industream/datacatalog-client';
     import type { CatalogEntry } from '@industream/datacatalog-client/dto';
     import { DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY } from './picker-column-helpers';
@@ -126,9 +127,11 @@
             const uniqueItems = deduplicateEntries(items);
 
             if (uniqueItems.length > MAX_ENTRIES) {
-                // Too many — enter server search mode, don't show entries
+                // Too many for client-side filtering → server-search mode. Still show the
+                // first MAX_ENTRIES as a browsable PREVIEW (with a "not all displayed"
+                // warning in TagBrowser) instead of a blank "type to search" screen.
                 tooMany = true;
-                entries = [];
+                entries = uniqueItems.slice(0, MAX_ENTRIES);
             } else {
                 tooMany = false;
                 entries = uniqueItems;
@@ -152,9 +155,9 @@
         searchAbort?.abort();
 
         if (!query) {
-            // Empty query in too-many mode → clear results, show hint again
-            entries = [];
+            // Empty query in too-many mode → restore the first-N preview.
             searching = false;
+            loadInitial(dcApiUrl, sourceConnectionId);
             return;
         }
 
@@ -180,6 +183,48 @@
                 searching = false;
             });
     }
+
+    /**
+     * Full details of the SELECTED entries, fetched by ID — decoupled from the browse
+     * list (`entries`), which is empty in `tooMany` mode and only holds the current
+     * page/search otherwise. Without this, the SelectedTags panel can only render
+     * selected tags that happen to be in `entries` → on large sources it shows
+     * "No tags selected" / loses the selection visually despite a correct count.
+     */
+    let selectedEntries = $state<CatalogEntry[]>([]);
+
+    $effect(() => {
+        const ids = [...selectedIds];   // reactive dependency
+        const url = dcApiUrl;           // reactive dependency
+
+        if (!url || ids.length === 0) {
+            selectedEntries = [];
+            return;
+        }
+
+        // Reuse already-resolved entries that are still selected; fetch only the missing.
+        const idSet = new Set(ids);
+        const current = untrack(() => selectedEntries);
+        const keep = current.filter((e) => idSet.has(e.id));
+        const have = new Set(keep.map((e) => e.id));
+        const missing = ids.filter((id) => !have.has(id));
+
+        if (missing.length === 0) {
+            if (keep.length !== current.length) selectedEntries = keep;
+            return;
+        }
+
+        // get() auto-switches to POST /catalog-entries/query for large id lists (URI-safe).
+        getClient(url).catalogEntries
+            .get({ ids: missing })
+            .then((res) => {
+                const latest = new Set(untrack(() => selectedIds));
+                selectedEntries = [...keep, ...(res.items ?? [])].filter((e) => latest.has(e.id));
+            })
+            .catch(() => {
+                // Keep what we have; SelectedTags falls back to the browse list below.
+            });
+    });
 </script>
 
 <TagBrowser
@@ -197,7 +242,7 @@
 
 {#if selectedIds.length > 0}
     <SelectedTags
-        {entries}
+        entries={selectedEntries.length > 0 ? selectedEntries : entries}
         bind:selectedIds
         columns={selectedColumnsDisplay}
         {onRemove}

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -39,9 +39,6 @@
     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;
@@ -109,14 +106,15 @@
             <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 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>
+        <div class="state-message empty-state"><span>{tooMany ? 'No matching entries. Refine your search.' : emptyMessage}</span></div>
     {:else}
+        {#if tooMany}
+            <div class="too-many-banner">
+                <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>Showing {entries.length} entries (not all). Use the search box to find others.</span>
+            </div>
+        {/if}
         <div class="table-container">
             <table class="entry-table">
                 <!-- Table headers: one checkbox column + one column per columnDescriptor -->
@@ -203,7 +201,14 @@
     }
     .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); }
+    .too-many-banner {
+        display: flex; align-items: center; gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: var(--cds-notification-background-warning, #3d3522);
+        border-left: 3px solid var(--cds-support-warning, #f1c21b);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.75rem;
+    }
+    .too-many-banner svg { color: var(--cds-support-warning, #f1c21b); flex: 0 0 auto; }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);