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

package/src/DCCatalogEntryPicker/AssetTree.svelte

@@ -0,0 +1,180 @@
+<script>
+    /**
+     * AssetTree — loads an asset dictionary as a tree and lets the user pick a node.
+     * Emits the selected node's own entryIds to the container, which fetches and
+     * filters the entries. This component holds no selection or entry state.
+     */
+    import { firstDictionaryId, collectEntryIds } from './picker-tree';
+
+    let {
+        client = null,
+        onSelectNode = null
+    } = $props();
+
+    let dictionaries = $state([]);
+    let activeDictionaryId = $state('');
+    let rootNodes = $state([]);
+    let expanded = $state(new Set());
+    let selectedNodeId = $state('');
+    let loading = $state(false);
+    let error = $state('');
+
+    /** Load the dictionary list when a client becomes available. */
+    $effect(() => {
+        if (client) loadDictionaries(client);
+    });
+
+    async function loadDictionaries(dc) {
+        loading = true;
+        error = '';
+        try {
+            const result = await dc.assetDictionaries.get({ asTree: true });
+            dictionaries = result.items ?? [];
+            const first = firstDictionaryId(dictionaries);
+            if (first) {
+                activeDictionaryId = first;
+                await loadTree(dc, first);
+            } else {
+                rootNodes = [];
+            }
+        } catch (err) {
+            error = err?.message ?? 'Failed to load asset dictionaries';
+            dictionaries = [];
+            rootNodes = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function loadTree(dc, id) {
+        loading = true;
+        error = '';
+        try {
+            const dict = await dc.assetDictionaries.getById(id, { asTree: true });
+            rootNodes = dict.nodes ?? [];
+            expanded = new Set(rootNodes.map(n => n.id));
+        } catch (err) {
+            error = err?.message ?? 'Failed to load the asset tree';
+            rootNodes = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function onDictionaryChange(e) {
+        activeDictionaryId = e.target.value;
+        selectedNodeId = '';
+        if (client && activeDictionaryId) loadTree(client, activeDictionaryId);
+    }
+
+    function toggleExpand(id) {
+        const next = new Set(expanded);
+        next.has(id) ? next.delete(id) : next.add(id);
+        expanded = next;
+    }
+
+    function selectNode(node) {
+        selectedNodeId = node.id;
+        onSelectNode?.(collectEntryIds(node), node.id);
+    }
+
+    function retry() {
+        if (client) loadDictionaries(client);
+    }
+</script>
+
+<div class="asset-tree">
+    {#if dictionaries.length > 1}
+        <select class="dict-select" value={activeDictionaryId} onchange={onDictionaryChange}>
+            {#each dictionaries as dict (dict.id)}
+                <option value={dict.id}>{dict.name}</option>
+            {/each}
+        </select>
+    {/if}
+
+    {#if loading}
+        <div class="tree-state"><div class="spinner"></div> <span>Loading tree…</span></div>
+    {:else if error}
+        <div class="tree-state error">{error} — <button class="link-button" onclick={retry}>retry</button></div>
+    {:else if rootNodes.length === 0}
+        <div class="tree-state muted">No asset dictionary available.</div>
+    {:else}
+        <ul class="tree-root">
+            {#each rootNodes as node (node.id)}
+                {@render treeNode(node, 0)}
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+{#snippet treeNode(node, depth)}
+    {@const hasChildren = node.children && node.children.length > 0}
+    {@const isOpen = expanded.has(node.id)}
+    <li class="tree-item">
+        <div
+            class="node-row"
+            class:selected={selectedNodeId === node.id}
+            style="padding-left: {depth * 1}rem"
+        >
+            {#if hasChildren}
+                <button type="button" class="twisty" class:open={isOpen} onclick={() => toggleExpand(node.id)} aria-label="Toggle">
+                    <svg viewBox="0 0 16 16" width="12" height="12"><path d="M11 8L6 13V3z" fill="currentColor"></path></svg>
+                </button>
+            {:else}
+                <span class="twisty-spacer"></span>
+            {/if}
+            <button type="button" class="node-label" onclick={() => selectNode(node)}>
+                {node.name}
+                {#if node.entryIds && node.entryIds.length > 0}<span class="node-count">{node.entryIds.length}</span>{/if}
+            </button>
+        </div>
+        {#if hasChildren && isOpen}
+            <ul>
+                {#each node.children as child (child.id)}
+                    {@render treeNode(child, depth + 1)}
+                {/each}
+            </ul>
+        {/if}
+    </li>
+{/snippet}
+
+<style>
+    .asset-tree { font-size: 0.8125rem; }
+    .dict-select {
+        width: 100%; margin-bottom: 0.5rem; padding: 0.375rem 0.5rem;
+        background: var(--cds-field-01, #353535); color: var(--cds-text-primary, #f4f4f4);
+        border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f); font-size: 0.8125rem;
+    }
+    .tree-state { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; color: var(--cds-text-secondary, #c6c6c6); }
+    .tree-state.error { color: var(--cds-support-error, #fa4d56); }
+    .tree-state.muted { color: var(--cds-text-helper, #8d8d8d); }
+    .tree-root, .tree-item ul { list-style: none; margin: 0; padding: 0; }
+    .tree-root { max-height: 400px; overflow-y: auto; border: 1px solid var(--cds-border-subtle-01, #393939); }
+    .node-row { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
+    .node-row:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .node-row.selected { background: var(--cds-layer-selected-01, #3d3d3d); }
+    .twisty, .twisty-spacer { width: 1.25rem; height: 1.5rem; flex-shrink: 0; }
+    .twisty { background: none; border: none; color: var(--cds-text-secondary, #c6c6c6); cursor: pointer; padding: 0; }
+    .twisty svg { transition: transform 0.15s ease; }
+    .twisty.open svg { transform: rotate(90deg); }
+    .node-label {
+        flex: 1; display: flex; align-items: center; gap: 0.375rem;
+        background: none; border: none; color: var(--cds-text-primary, #f4f4f4);
+        text-align: left; padding: 0.25rem 0.25rem; cursor: pointer; font-size: 0.8125rem;
+    }
+    .node-count {
+        font-size: 0.625rem; padding: 0 0.375rem; border-radius: 1rem;
+        background: var(--cds-tag-background-gray, #393939); color: var(--cds-tag-color-gray, #c6c6c6);
+    }
+    .spinner {
+        width: 1rem; height: 1rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #052FAD);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .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/DCCatalogEntryPicker.svelte

@@ -2,37 +2,46 @@
     /**
      * DCCatalogEntryPicker — DataCatalog entry picker with configurable columns.
      *
-     * Composes TagBrowser (searchable table with multi-select) and SelectedTags
-     * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
+     * Composes TagBrowser (searchable, paginated table with multi-select) and
+     * SelectedTags (collapsible summary with remove). Owns the DataCatalog fetch
+     * lifecycle, pagination state, and the selected-entry metadata cache.
      *
-     * 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).
+     * Strategy (see docs/superpowers/specs/2026-06-30-tag-picker-lazy-pagination-design.md):
+     *   - Always load page 1 on open — never a blank table.
+     *   - Lazy "load more" pagination via offset; totalCount drives the counter and end.
+     *   - Search: client-side instant when the whole catalog is loaded (small catalogs),
+     *     debounced server search otherwise.
+     *   - Selected entries are cached independently of the loaded window so their
+     *     metadata always renders.
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
      * @prop selectedIds        — (bindable) Array of selected CatalogEntry IDs
      * @prop entries            — (bindable) Loaded catalog entries (exposed for parent access)
-     * @prop columns            — Column keys for the browse table (default: name, dataType, labels)
-     * @prop selectedColumnsDisplay — Column keys for the selected tags panel (default: name, dataType, labels)
+     * @prop columns            — Column keys for the browse table
+     * @prop selectedColumnsDisplay — Column keys for the selected tags panel
      * @prop emptyMessage       — Message when no entries match the source connection
      * @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';
+    import {
+        PAGE_SIZE,
+        MATCH_ALL,
+        mergePage,
+        deduplicateEntries,
+        normalizeQuery,
+        isAllLoaded,
+        hasMore,
+        remainingCount,
+        upsertSelectedCache,
+        resolveSelected
+    } from './picker-pagination';
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
 
-    const MAX_ENTRIES = 100;
-
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
@@ -58,33 +67,46 @@
     }: Props = $props();
 
     let loading = $state(false);
+    let loadingMore = $state(false);
     let searching = $state(false);
     let error = $state('');
-    let tooMany = $state(false);
+    let loadMoreError = $state('');
+    let totalCount = $state(0);
+    let currentQuery = $state(MATCH_ALL);
+    let offset = $state(0);
 
-    /** 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 = '';
+    /**
+     * Metadata for selected tags, kept across reloads/searches so SelectedTags always
+     * renders. Invariant: every mutation of this Map is paired with an `entries`
+     * reassignment, so the `selectedEntries` derived (which reads both) re-runs and picks
+     * up the change. Do NOT upsert the cache without also reassigning `entries`.
+     */
+    let selectedCache = new Map<string, CatalogEntry>();
 
     /**
-     * Deduplicate entries by id — keep only the first occurrence.
+     * Best-effort total for the current query. The server's search response MAY omit
+     * `totalCount`; when it does, we must not silently cap pagination at one page.
+     * Fall back to: a full page → "at least one more page" (loaded + PAGE_SIZE) so the
+     * load-more affordance stays available; a short page → exactly what is loaded (the end).
      */
-    function deduplicateEntries(items: CatalogEntry[]): CatalogEntry[] {
-        const seen = new Set<string>();
-        const result: CatalogEntry[] = [];
-        for (const item of items) {
-            const id = item.id;
-            if (!seen.has(id)) {
-                seen.add(id);
-                result.push(item);
-            }
-        }
-        return result;
+    function estimateTotal(reported: number | undefined, loadedCount: number, lastPageLen: number): number {
+        if (reported != null) return reported;
+        return lastPageLen < PAGE_SIZE ? loadedCount : loadedCount + PAGE_SIZE;
     }
 
+    /** Abort controller for cancelling in-flight requests. */
+    let fetchAbort: AbortController | null = null;
+
+    /** Cached client instance — recreated when dcApiUrl changes. */
+    let client: DataCatalogClient | null = null;
+    let clientUrl = '';
+
+    /** Whether search runs server-side (large catalog) or client-side (everything loaded). */
+    const serverSearch = $derived(!isAllLoaded(MATCH_ALL, entries.length, totalCount) || currentQuery !== MATCH_ALL);
+
+    /** Resolved entries for the selected-tags panel: window first, cache fallback. */
+    const selectedEntries = $derived(resolveSelected(entries, selectedCache, selectedIds));
+
     function getClient(apiUrl: string): DataCatalogClient {
         if (client && clientUrl === apiUrl) return client;
         client = new DataCatalogClient({ baseUrl: apiUrl });
@@ -96,135 +118,124 @@
         if (dcApiUrl) {
             loadInitial(dcApiUrl, sourceConnectionId);
         } else {
+            fetchAbort?.abort();
             entries = [];
+            totalCount = 0;
             error = '';
-            tooMany = false;
         }
     });
 
-    /**
-     * 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;
+    /** (Re)load page 1 for the match-all query. Never leaves the table blank on success. */
+    async function loadInitial(apiUrl: string, connId: string = '') {
+        fetchAbort?.abort();
+        const abort = new AbortController();
+        fetchAbort = abort;
 
         loading = true;
         error = '';
-        tooMany = false;
+        loadMoreError = '';
+        currentQuery = MATCH_ALL;
+        offset = 0;
         entries = [];
+        totalCount = 0;
 
         try {
             const dc = getClient(apiUrl);
-            const result = await dc.catalogEntries.search('%', {
+            const result = await dc.catalogEntries.search(MATCH_ALL, {
                 sourceConnectionIds: connId ? [connId] : [],
-                limit: MAX_ENTRIES + 1
-            });
-            const items = result.items ?? [];
-            const uniqueItems = deduplicateEntries(items);
-
-            if (uniqueItems.length > MAX_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 = uniqueItems.slice(0, MAX_ENTRIES);
-            } else {
-                tooMany = false;
-                entries = uniqueItems;
-            }
+                limit: PAGE_SIZE,
+                offset: 0
+            }, abort.signal);
+            if (abort.signal.aborted) return;
+            const items = deduplicateEntries(result.items ?? []);
+            entries = items;
+            totalCount = estimateTotal(result.totalCount, items.length, items.length);
+            offset = items.length;
+            upsertSelectedCache(selectedCache, items);
         } catch (err: any) {
-            error = err.message ?? 'Failed to load catalog entries';
+            if (abort.signal.aborted) return;
+            error = err?.message ?? 'Failed to load catalog entries';
             entries = [];
         } finally {
-            loading = false;
+            if (!abort.signal.aborted) loading = false;
         }
     }
 
-    /**
-     * Server-side search — called by TagBrowser when in server mode (tooMany).
-     * Cancels previous in-flight request via AbortSignal.
-     */
-    function handleServerSearch(query: string) {
+    /** Server-side search (large catalogs). Resets pagination for the new query. */
+    function handleServerSearch(rawQuery: string) {
         if (!dcApiUrl) return;
-
-        // Cancel previous in-flight search
-        searchAbort?.abort();
-
-        if (!query) {
-            // Empty query in too-many mode → restore the first-N preview.
-            searching = false;
-            loadInitial(dcApiUrl, sourceConnectionId);
-            return;
-        }
-
+        fetchAbort?.abort();
         const abort = new AbortController();
-        searchAbort = abort;
+        fetchAbort = abort;
+
+        const query = normalizeQuery(rawQuery);
+        currentQuery = query;
+        offset = 0;
+        entries = [];
+        totalCount = 0;
+        error = '';
+        loadMoreError = '';
         searching = true;
 
         const dc = getClient(dcApiUrl);
         dc.catalogEntries.search(query, {
             sourceConnectionIds: sourceConnectionId ? [sourceConnectionId] : [],
-            limit: MAX_ENTRIES
+            limit: PAGE_SIZE,
+            offset: 0
         }, abort.signal)
             .then((result) => {
                 if (abort.signal.aborted) return;
-                const items = result.items ?? [];
-                entries = deduplicateEntries(items);
+                const items = deduplicateEntries(result.items ?? []);
+                entries = items;
+                totalCount = estimateTotal(result.totalCount, items.length, items.length);
+                offset = items.length;
+                upsertSelectedCache(selectedCache, items);
                 searching = false;
             })
-            .catch((err) => {
+            .catch((err: any) => {
                 if (abort.signal.aborted) return;
-                error = err.message ?? 'Search failed';
+                error = err?.message ?? 'Search failed';
                 entries = [];
                 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[]>([]);
+    /** Append the next page for the current query. No-op when everything is loaded. */
+    function handleLoadMore() {
+        if (!dcApiUrl || loadingMore || loading || searching) return;
+        if (!hasMore(entries.length, totalCount)) return;
 
-    $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));
+        fetchAbort?.abort();
+        const abort = new AbortController();
+        fetchAbort = abort;
 
-        if (missing.length === 0) {
-            if (keep.length !== current.length) selectedEntries = keep;
-            return;
-        }
+        loadingMore = true;
+        loadMoreError = '';
+        const startOffset = offset;
 
-        // 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));
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.search(currentQuery, {
+            sourceConnectionIds: sourceConnectionId ? [sourceConnectionId] : [],
+            limit: PAGE_SIZE,
+            offset: startOffset
+        }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                const items = result.items ?? [];
+                entries = mergePage(entries, items);
+                totalCount = estimateTotal(result.totalCount, entries.length, items.length);
+                offset = entries.length;
+                upsertSelectedCache(selectedCache, items);
+                loadingMore = false;
             })
-            .catch(() => {
-                // Keep what we have; SelectedTags falls back to the browse list below.
+            .catch((err: any) => {
+                if (abort.signal.aborted) return;
+                loadMoreError = err?.message ?? 'Failed to load more entries';
+                loadingMore = false;
             });
-    });
+    }
+
+    const remaining = $derived(remainingCount(entries.length, totalCount));
 </script>
 
 <TagBrowser
@@ -232,17 +243,22 @@
     bind:selectedIds
     {columns}
     {loading}
+    {loadingMore}
     {error}
+    {loadMoreError}
     {emptyMessage}
-    {onSelectionChange}
-    onSearch={tooMany ? handleServerSearch : null}
+    {totalCount}
+    {remaining}
+    serverSearch={serverSearch}
     {searching}
-    {tooMany}
+    {onSelectionChange}
+    onSearch={handleServerSearch}
+    onLoadMore={handleLoadMore}
 />
 
 {#if selectedIds.length > 0}
     <SelectedTags
-        entries={selectedEntries.length > 0 ? selectedEntries : entries}
+        entries={selectedEntries}
         bind:selectedIds
         columns={selectedColumnsDisplay}
         {onRemove}

package/src/DCCatalogEntryPicker/LabelFacet.svelte

@@ -0,0 +1,89 @@
+<script>
+    /**
+     * LabelFacet — loads catalog labels and renders them as toggle chips.
+     * Selecting chips emits the active labelIds (OR filter) to the container,
+     * which owns the fetch. This component never fetches catalog entries.
+     */
+    let {
+        client = null,
+        selectedLabelIds = $bindable([]),
+        onChange = null
+    } = $props();
+
+    let labels = $state([]);
+    let loading = $state(false);
+    let error = $state('');
+
+    /** Load labels once a client is available. */
+    $effect(() => {
+        if (client) loadLabels(client);
+    });
+
+    async function loadLabels(dc) {
+        loading = true;
+        error = '';
+        try {
+            const result = await dc.labels.get();
+            labels = result.items ?? [];
+        } catch (err) {
+            error = err?.message ?? 'Failed to load labels';
+            labels = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function toggle(id) {
+        selectedLabelIds = selectedLabelIds.indexOf(id) >= 0
+            ? selectedLabelIds.filter(x => x !== id)
+            : [...selectedLabelIds, id];
+        onChange?.(selectedLabelIds);
+    }
+
+    function clearAll() {
+        if (selectedLabelIds.length === 0) return;
+        selectedLabelIds = [];
+        onChange?.(selectedLabelIds);
+    }
+</script>
+
+{#if loading}
+    <div class="label-facet muted">Loading labels…</div>
+{:else if error}
+    <div class="label-facet notice">Labels unavailable — search works without label filtering.</div>
+{:else if labels.length > 0}
+    <div class="label-facet">
+        <span class="facet-label">Labels:</span>
+        {#each labels as label (label.id)}
+            {@const active = selectedLabelIds.includes(label.id)}
+            <button type="button" class="chip" class:active onclick={() => toggle(label.id)}>{label.name}</button>
+        {/each}
+        {#if selectedLabelIds.length > 0}
+            <button type="button" class="chip clear" onclick={clearAll}>Clear</button>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .label-facet {
+        display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
+        padding: 0.5rem 0; font-size: 0.75rem;
+    }
+    .facet-label { color: var(--cds-text-secondary, #c6c6c6); margin-right: 0.25rem; }
+    .muted { color: var(--cds-text-helper, #8d8d8d); }
+    .notice { color: var(--cds-support-warning, #f1c21b); }
+    .chip {
+        padding: 0.125rem 0.5rem;
+        background: var(--cds-tag-background-gray, #393939);
+        color: var(--cds-tag-color-gray, #c6c6c6);
+        border: 1px solid transparent; border-radius: 1rem;
+        font-size: 0.6875rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
+    }
+    .chip:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .chip.active {
+        background: var(--cds-layer-selected-01, #052FAD);
+        color: var(--cds-text-on-color, #ffffff);
+        border-color: var(--cds-focus, #052FAD);
+    }
+    .chip.clear { background: transparent; border-color: var(--cds-border-strong-01, #6f6f6f); }
+</style>