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

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { onDestroy } from 'svelte';
     import { DEFAULT_COLUMNS, resolveColumn, resolveValue, resolveSearchText } from './picker-column-helpers';
 
     let {
@@ -6,18 +7,23 @@
         selectedIds = $bindable([]),
         columns = DEFAULT_COLUMNS,
         loading = false,
+        loadingMore = false,
         error = '',
+        loadMoreError = '',
         emptyMessage = 'No entries found for this source connection.',
+        totalCount = 0,
+        remaining = 0,
+        serverSearch = false,
+        searching = false,
         onSelectionChange = null,
         onSearch = null,
-        searching = false,
-        tooMany = false
+        onLoadMore = null
     } = $props();
 
     let searchQuery = $state('');
     let debounceTimer = null;
 
-    /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
+    /** Resolved column descriptors for rendering. */
     const columnDescriptors = $derived(
         columns
             .map(k => { const col = resolveColumn(k); return col ? { key: k, ...col } : null; })
@@ -25,31 +31,40 @@
     );
 
     /**
-     * When onSearch is set (server mode), entries are already filtered server-side.
-     * When onSearch is NOT set (client mode), filter locally.
+     * In server-search mode entries are already filtered server-side.
+     * Otherwise (whole catalog loaded) filter the in-memory entries locally.
      */
     const filtered = $derived(() => {
-        if (onSearch) return entries;
+        if (serverSearch) return entries;
         if (!searchQuery.trim()) return entries;
         const q = searchQuery.toLowerCase();
         return entries.filter(e => resolveSearchText(e, columns).includes(q));
     });
 
     const selectedCount = $derived(selectedIds.length);
-    const totalCount = $derived(entries.length);
     const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
 
+    /** Whether the load-more affordance should show (more pages for the current query). */
+    const showLoadMore = $derived(remaining > 0 && !loading && !error);
+
     function handleSearchInput(e) {
         searchQuery = e.target.value;
-        if (!onSearch) return;
 
-        // Debounce 1s for server search
+        // Always cancel a pending server search: if the mode is (or just became)
+        // client-side, no request should fire; if server-side, we re-arm below.
         if (debounceTimer) clearTimeout(debounceTimer);
+        if (!serverSearch) return; // client-side filtering is reactive via filtered()
+
+        // Debounce 1s for server search
         debounceTimer = setTimeout(() => {
-            onSearch(searchQuery.trim());
+            onSearch?.(searchQuery.trim());
         }, 1000);
     }
 
+    onDestroy(() => {
+        if (debounceTimer) clearTimeout(debounceTimer);
+    });
+
     function toggleEntry(id) {
         selectedIds = selectedIds.indexOf(id) >= 0
             ? selectedIds.filter(s => s !== id)
@@ -73,6 +88,21 @@
     function toggleAll() {
         allVisibleSelected ? deselectAll() : selectAll();
     }
+
+    /**
+     * Svelte action: fires `onLoadMore` when the sentinel scrolls into the
+     * viewport of the scrollable table container. The "Load more" button is
+     * the accessible/explicit fallback for the same callback.
+     */
+    function autoLoad(node) {
+        const observer = new IntersectionObserver((entriesObserved) => {
+            if (entriesObserved.some(en => en.isIntersecting) && !loadingMore) {
+                onLoadMore?.();
+            }
+        }, { root: node.closest('.table-container'), rootMargin: '120px' });
+        observer.observe(node);
+        return { destroy() { observer.disconnect(); } };
+    }
 </script>
 
 <div class="tag-browser">
@@ -84,7 +114,7 @@
             <input
                 type="text"
                 class="search-input"
-                placeholder={tooMany ? "Search to find entries..." : "Search..."}
+                placeholder={serverSearch ? "Search to find entries..." : "Search..."}
                 value={searchQuery}
                 oninput={handleSearchInput}
             />
@@ -107,14 +137,8 @@
             <span>{error}</span>
         </div>
     {:else if entries.length === 0 && !searching}
-        <div class="state-message empty-state"><span>{tooMany ? 'No matching entries. Refine your search.' : emptyMessage}</span></div>
+        <div class="state-message empty-state"><span>{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 -->
@@ -156,8 +180,22 @@
                     {/each}
                 </tbody>
             </table>
+            {#if showLoadMore}
+                <div class="load-more" use:autoLoad>
+                    {#if loadingMore}
+                        <div class="spinner"></div> <span>Loading more…</span>
+                    {:else}
+                        <button class="action-button" onclick={() => onLoadMore?.()}>
+                            Load more ({remaining} remaining)
+                        </button>
+                    {/if}
+                </div>
+                {#if loadMoreError}
+                    <div class="load-more-error">{loadMoreError} — <button class="link-button" onclick={() => onLoadMore?.()}>retry</button></div>
+                {/if}
+            {/if}
         </div>
-        {#if !onSearch && filtered().length !== entries.length}
+        {#if !serverSearch && filtered().length !== entries.length}
             <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
         {/if}
     {/if}
@@ -201,14 +239,6 @@
     }
     .error-state { color: var(--cds-support-error, #fa4d56); }
     .empty-state { color: var(--cds-text-helper, #8d8d8d); }
-    .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);
@@ -260,4 +290,18 @@
         font-size: 0.75rem; color: var(--cds-text-helper, #8d8d8d);
         text-align: center; padding: 0.25rem;
     }
+    .load-more {
+        display: flex; align-items: center; justify-content: center;
+        gap: 0.5rem; padding: 0.75rem; font-size: 0.8125rem;
+        color: var(--cds-text-secondary, #c6c6c6);
+    }
+    .load-more-error {
+        font-size: 0.75rem; color: var(--cds-support-error, #fa4d56);
+        text-align: center; padding: 0.25rem;
+    }
+    .link-button {
+        background: none; border: none; padding: 0; cursor: pointer;
+        color: var(--cds-link-primary, #78a9ff); text-decoration: underline;
+        font-size: inherit;
+    }
 </style>

package/src/DCCatalogEntryPicker/picker-pagination.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+import {
+    PAGE_SIZE,
+    MATCH_ALL,
+    deduplicateEntries,
+    mergePage,
+    normalizeQuery,
+    isAllLoaded,
+    hasMore,
+    remainingCount,
+    upsertSelectedCache,
+    resolveSelected
+} from './picker-pagination';
+
+const entry = (id: string, name = id): CatalogEntry => ({ id, name } as CatalogEntry);
+
+describe('constants', () => {
+    it('exposes the page size and match-all token', () => {
+        expect(PAGE_SIZE).toBe(100);
+        expect(MATCH_ALL).toBe('%');
+    });
+});
+
+describe('deduplicateEntries', () => {
+    it('keeps first occurrence by id and preserves order', () => {
+        const result = deduplicateEntries([entry('a'), entry('b'), entry('a')]);
+        expect(result.map(e => e.id)).toEqual(['a', 'b']);
+    });
+});
+
+describe('mergePage', () => {
+    it('appends a new page and drops duplicates against existing', () => {
+        const result = mergePage([entry('a'), entry('b')], [entry('b'), entry('c')]);
+        expect(result.map(e => e.id)).toEqual(['a', 'b', 'c']);
+    });
+});
+
+describe('normalizeQuery', () => {
+    it('trims and maps empty input to the match-all token', () => {
+        expect(normalizeQuery('   ')).toBe(MATCH_ALL);
+        expect(normalizeQuery('')).toBe(MATCH_ALL);
+    });
+    it('trims a real query', () => {
+        expect(normalizeQuery('  temp ')).toBe('temp');
+    });
+});
+
+describe('isAllLoaded', () => {
+    it('is true only for match-all with every item loaded', () => {
+        expect(isAllLoaded(MATCH_ALL, 50, 50)).toBe(true);
+        expect(isAllLoaded(MATCH_ALL, 50, 120)).toBe(false);
+        expect(isAllLoaded('temp', 50, 50)).toBe(false);
+    });
+});
+
+describe('hasMore / remainingCount', () => {
+    it('reports remaining pages relative to total', () => {
+        expect(hasMore(100, 350)).toBe(true);
+        expect(hasMore(350, 350)).toBe(false);
+        expect(remainingCount(100, 350)).toBe(250);
+        expect(remainingCount(350, 350)).toBe(0);
+        expect(remainingCount(400, 350)).toBe(0);
+    });
+});
+
+describe('selected cache', () => {
+    it('upserts fetched items by id', () => {
+        const cache = upsertSelectedCache(new Map(), [entry('a'), entry('b')]);
+        upsertSelectedCache(cache, [entry('b', 'renamed')]);
+        expect(cache.get('b')?.name).toBe('renamed');
+        expect(cache.size).toBe(2);
+    });
+    it('resolves selected entries from window first, cache as fallback, in selection order', () => {
+        const cache = upsertSelectedCache(new Map(), [entry('x'), entry('y')]);
+        const window = [entry('y', 'in-window')];
+        const result = resolveSelected(window, cache, ['x', 'y']);
+        expect(result.map(e => e.id)).toEqual(['x', 'y']);
+        expect(result.find(e => e.id === 'y')?.name).toBe('in-window');
+    });
+});

package/src/DCCatalogEntryPicker/picker-pagination.ts

@@ -0,0 +1,75 @@
+import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+
+/** Number of entries fetched per page. */
+export const PAGE_SIZE = 100;
+
+/** Query token that matches all entries (server-side wildcard). */
+export const MATCH_ALL = '%';
+
+/** Deduplicate entries by id, keeping the first occurrence and preserving order. */
+export function deduplicateEntries(items: CatalogEntry[]): CatalogEntry[] {
+    const seen = new Set<string>();
+    const result: CatalogEntry[] = [];
+    for (const item of items) {
+        if (!seen.has(item.id)) {
+            seen.add(item.id);
+            result.push(item);
+        }
+    }
+    return result;
+}
+
+/** Append a freshly fetched page to the accumulated list, dropping duplicates. */
+export function mergePage(existing: CatalogEntry[], page: CatalogEntry[]): CatalogEntry[] {
+    return deduplicateEntries([...existing, ...page]);
+}
+
+/** Trim a raw search input; an empty query becomes the match-all token. */
+export function normalizeQuery(raw: string): string {
+    const trimmed = raw.trim();
+    return trimmed === '' ? MATCH_ALL : trimmed;
+}
+
+/** True when the full match-all set is in memory (small catalog → client-side search). */
+export function isAllLoaded(query: string, loadedCount: number, totalCount: number): boolean {
+    return query === MATCH_ALL && loadedCount >= totalCount;
+}
+
+/** Whether more pages remain for the current query. */
+export function hasMore(loadedCount: number, totalCount: number): boolean {
+    return loadedCount < totalCount;
+}
+
+/** Number of not-yet-loaded entries for the current query (never negative). */
+export function remainingCount(loadedCount: number, totalCount: number): number {
+    return Math.max(0, totalCount - loadedCount);
+}
+
+/** Upsert every fetched entry into the selected-entry metadata cache (mutates and returns it). */
+export function upsertSelectedCache(
+    cache: Map<string, CatalogEntry>,
+    items: CatalogEntry[]
+): Map<string, CatalogEntry> {
+    for (const item of items) {
+        cache.set(item.id, item);
+    }
+    return cache;
+}
+
+/**
+ * Resolve the selected entries for display: prefer the currently loaded window,
+ * fall back to the cache, in the order of `selectedIds`. Ids absent from both are skipped.
+ */
+export function resolveSelected(
+    entries: CatalogEntry[],
+    cache: Map<string, CatalogEntry>,
+    selectedIds: string[]
+): CatalogEntry[] {
+    const windowById = new Map(entries.map(e => [e.id, e]));
+    const result: CatalogEntry[] = [];
+    for (const id of selectedIds) {
+        const found = windowById.get(id) ?? cache.get(id);
+        if (found) result.push(found);
+    }
+    return result;
+}

package/src/DCCatalogEntryPicker/picker-tree.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import type { AssetNode, AssetDictionary, CatalogEntry } from '@industream/datacatalog-client/dto';
+import {
+    flattenNodes,
+    findNodeById,
+    collectEntryIds,
+    filterEntriesByConnection,
+    firstDictionaryId
+} from './picker-tree';
+
+const node = (id: string, entryIds: string[] = [], children: AssetNode[] = []): AssetNode =>
+    ({ id, dictionaryId: 'd1', name: id, order: 0, entryIds, children } as AssetNode);
+
+const tree: AssetNode[] = [
+    node('root', ['e1'], [
+        node('zone-a', ['e2', 'e3'], [
+            node('leaf', ['e3', 'e4'])
+        ]),
+        node('zone-b', ['e5'])
+    ])
+];
+
+describe('flattenNodes', () => {
+    it('returns every node depth-first, self before children', () => {
+        expect(flattenNodes(tree).map(n => n.id)).toEqual(['root', 'zone-a', 'leaf', 'zone-b']);
+    });
+    it('handles an empty forest', () => {
+        expect(flattenNodes([])).toEqual([]);
+    });
+});
+
+describe('findNodeById', () => {
+    it('finds a nested node', () => {
+        expect(findNodeById(tree, 'leaf')?.id).toBe('leaf');
+    });
+    it('returns null when absent', () => {
+        expect(findNodeById(tree, 'nope')).toBeNull();
+    });
+});
+
+describe('collectEntryIds', () => {
+    it('returns only the node own entryIds by default', () => {
+        expect(collectEntryIds(findNodeById(tree, 'zone-a')!)).toEqual(['e2', 'e3']);
+    });
+    it('unions descendants and de-duplicates, node first, DFS order', () => {
+        expect(collectEntryIds(findNodeById(tree, 'zone-a')!, true)).toEqual(['e2', 'e3', 'e4']);
+    });
+    it('collects the whole tree from the root with descendants', () => {
+        expect(collectEntryIds(tree[0], true)).toEqual(['e1', 'e2', 'e3', 'e4', 'e5']);
+    });
+});
+
+describe('filterEntriesByConnection', () => {
+    const entry = (id: string, connId: string): CatalogEntry =>
+        ({ id, sourceConnection: { id: connId } } as CatalogEntry);
+    const rows = [entry('a', 'c1'), entry('b', 'c2'), entry('c', 'c1')];
+    it('keeps only rows on the given connection', () => {
+        expect(filterEntriesByConnection(rows, 'c1').map(e => e.id)).toEqual(['a', 'c']);
+    });
+    it('returns all rows when connection id is empty', () => {
+        expect(filterEntriesByConnection(rows, '')).toHaveLength(3);
+    });
+});
+
+describe('firstDictionaryId', () => {
+    it('returns the first id or undefined', () => {
+        expect(firstDictionaryId([{ id: 'x' } as AssetDictionary])).toBe('x');
+        expect(firstDictionaryId([])).toBeUndefined();
+    });
+});

package/src/DCCatalogEntryPicker/picker-tree.ts

@@ -0,0 +1,60 @@
+import type { AssetNode, AssetDictionary } from '@industream/datacatalog-client/dto';
+import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+
+/** Depth-first flatten of a node forest — self emitted before its children. */
+export function flattenNodes(nodes: AssetNode[]): AssetNode[] {
+    const result: AssetNode[] = [];
+    for (const n of nodes) {
+        result.push(n);
+        if (n.children && n.children.length > 0) {
+            result.push(...flattenNodes(n.children));
+        }
+    }
+    return result;
+}
+
+/** Find a node by id anywhere in the forest; null when absent. */
+export function findNodeById(nodes: AssetNode[], id: string): AssetNode | null {
+    for (const n of flattenNodes(nodes)) {
+        if (n.id === id) return n;
+    }
+    return null;
+}
+
+/**
+ * Collect a node's assigned parent entryIds. With `includeDescendants`, unions
+ * every descendant's entryIds too. De-duplicated, node-first, DFS order.
+ */
+export function collectEntryIds(node: AssetNode, includeDescendants: boolean = false): string[] {
+    const source = includeDescendants ? flattenNodes([node]) : [node];
+    const seen = new Set<string>();
+    const result: string[] = [];
+    for (const n of source) {
+        for (const id of n.entryIds ?? []) {
+            if (!seen.has(id)) {
+                seen.add(id);
+                result.push(id);
+            }
+        }
+    }
+    return result;
+}
+
+/**
+ * Keep only binding rows on the given source connection. An empty
+ * `sourceConnectionId` disables filtering (returns the input unchanged).
+ * The typed `query` filter cannot scope by connection, so the container
+ * filters client-side (node entry counts are small).
+ */
+export function filterEntriesByConnection(
+    entries: CatalogEntry[],
+    sourceConnectionId: string
+): CatalogEntry[] {
+    if (!sourceConnectionId) return entries;
+    return entries.filter(e => e.sourceConnection?.id === sourceConnectionId);
+}
+
+/** Id of the first dictionary (default selection), or undefined for an empty list. */
+export function firstDictionaryId(dictionaries: AssetDictionary[]): string | undefined {
+    return dictionaries.length > 0 ? dictionaries[0].id : undefined;
+}