@industream/flowmaker-flowbox-ui-components 1.1.1 → 1.2.1

package/src/DCCatalogEntryPicker/LabelFacet.svelte

@@ -0,0 +1,97 @@
+<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('');
+
+    /** Cancels an in-flight labels fetch (e.g. client/url changes before it resolves). */
+    let abort = null;
+
+    /** Load labels once a client is available. */
+    $effect(() => {
+        if (client) loadLabels(client);
+    });
+
+    async function loadLabels(dc) {
+        abort?.abort();
+        const a = new AbortController();
+        abort = a;
+        loading = true;
+        error = '';
+        try {
+            const result = await dc.labels.get(undefined, a.signal);
+            if (a.signal.aborted) return;
+            labels = result.items ?? [];
+        } catch (err) {
+            if (a.signal.aborted) return;
+            error = err?.message ?? 'Failed to load labels';
+            labels = [];
+        } finally {
+            if (!a.signal.aborted) 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>

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -183,7 +183,7 @@
             {#if showLoadMore}
                 <div class="load-more" use:autoLoad>
                     {#if loadingMore}
-                        <div class="spinner"></div> <span>Loading more…</span>
+                        <div class="spinner"></div> <span>Loading more...</span>
                     {:else}
                         <button class="action-button" onclick={() => onLoadMore?.()}>
                             Load more ({remaining} remaining)
@@ -191,7 +191,7 @@
                     {/if}
                 </div>
                 {#if loadMoreError}
-                    <div class="load-more-error">{loadMoreError} — <button class="link-button" onclick={() => onLoadMore?.()}>retry</button></div>
+                    <div class="load-more-error">{loadMoreError} - <button class="link-button" onclick={() => onLoadMore?.()}>retry</button></div>
                 {/if}
             {/if}
         </div>

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;
+}