@industream/flowmaker-flowbox-ui-components 0.0.12 → 0.0.13

package/dist/DCCatalogEntry.svelte

@@ -2,11 +2,6 @@
     import { DataCatalogClient } from '@industream/datacatalog-client';
     import type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
 
-    interface FilterOptions {
-        searchtext?: string | null;   // Case-insensitive LIKE %text% filter on entry name
-        datasetfilter?: string | null; // Filter entries by sourceParams.dataset
-    }
-
     interface Props {
         id?: string;
         dcapiurl?: string;
@@ -14,9 +9,8 @@
         datatypefilter?: DataType | DataType[] | null;
         namefilter?: string | string[] | null;
         initialselection?: string | null;
-        onentryselect?: (entry: CatalogEntry | null) => void;
-        onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
-        onsearchmiss?: (text: string) => void;  // Called when searchtext matches nothing
+        onentryselect?: (entry: CatalogEntry) => void;
+        onitemsloaded?: (entries: CatalogEntry[]) => void;
     }
 
     let {
@@ -27,8 +21,7 @@
         namefilter = null,
         initialselection = null,
         onentryselect = null,
-        onitemsloaded = null,
-        onsearchmiss = null
+        onitemsloaded = null
     }: Props = $props();
 
     let catalogEntries = $state<CatalogEntry[]>([]);
@@ -38,13 +31,6 @@
     let error = $state<string | null>(null);
     let dropdownRef = $state<HTMLElement | null>(null);
 
-    // Active dynamic filters (set via setFilters method)
-    let activeSearchtext: string | null = null;
-    let activeDatasetfilter: string | null = null;
-    let autoSelectedId: string | null = null;
-    let searchMissText = $state<string | null>(null);
-    let multipleMatchText = $state<string | null>(null);
-
     // Load catalog entries when component mounts or dcapiurl/sourcetypefilter changes
     $effect(() => {
         // Read sourcetypefilter to establish dependency tracking
@@ -54,6 +40,11 @@
         }
     });
 
+    // Apply client-side filters when entries or filters change
+    $effect(() => {
+        filteredEntries = applyFilters(catalogEntries);
+    });
+
     // Inject styles into shadow DOM to fix trigger-label width
     $effect(() => {
         if (dropdownRef) {
@@ -69,10 +60,11 @@
         }
     });
 
-    function applyBaseFilters(entries: CatalogEntry[]): CatalogEntry[] {
+    function applyFilters(entries: CatalogEntry[]): CatalogEntry[] {
         let result = entries;
 
         // Filter by source type name (from sourceConnection.sourceType.name)
+        // Note: Server-side filtering is now done via API, this is just for additional client-side filtering if needed
         if (sourcetypefilter && sourcetypefilter.length > 0) {
             const sourceTypeNames = Array.isArray(sourcetypefilter) ? sourcetypefilter : [sourcetypefilter];
             result = result.filter(entry =>
@@ -92,54 +84,6 @@
         return result;
     }
 
-    function applyDynamicFilters(entries: CatalogEntry[], { skipSearch = false } = {}): CatalogEntry[] {
-        let result = entries;
-
-        if (activeDatasetfilter) {
-            result = result.filter(entry =>
-                entry.sourceParams?.dataset === activeDatasetfilter
-            );
-        }
-
-        if (!skipSearch && activeSearchtext?.trim()) {
-            const needle = activeSearchtext.trim().toLowerCase();
-            result = result.filter(entry =>
-                entry.name?.toLowerCase().includes(needle)
-            );
-        }
-
-        return result;
-    }
-
-    function runFilters() {
-        const base = applyBaseFilters(catalogEntries);
-        let result = applyDynamicFilters(base);
-
-        // Search-miss fallback: drop search filter and notify consumer
-        if (result.length === 0 && activeSearchtext?.trim()) {
-            searchMissText = activeSearchtext.trim();
-            multipleMatchText = null;
-            result = applyDynamicFilters(base, { skipSearch: true });
-            onsearchmiss?.(activeSearchtext.trim());
-        } else {
-            searchMissText = null;
-            multipleMatchText = (result.length > 1 && activeSearchtext?.trim()) ? activeSearchtext.trim() : null;
-        }
-
-        filteredEntries = result;
-
-        // Auto-select / auto-clear only when dynamic filters are active
-        if (activeSearchtext?.trim() || activeDatasetfilter) {
-            if (result.length === 1 && result[0].id !== autoSelectedId) {
-                autoSelectedId = result[0].id;
-                select(result[0]);
-            } else if (result.length !== 1) {
-                autoSelectedId = null;
-                select(null);
-            }
-        }
-    }
-
     async function loadCatalogEntries() {
         loading = true;
         error = null;
@@ -160,13 +104,8 @@
 
             const result = await client.catalogEntries.get(filters);
             catalogEntries = result.items || [];
-            // Apply base filters synchronously so initialselection works
-            filteredEntries = applyBaseFilters(catalogEntries);
-
-            // Re-apply dynamic filters if any are active
-            if (activeSearchtext || activeDatasetfilter) {
-                runFilters();
-            }
+            // Apply filters synchronously so initialselection works
+            filteredEntries = applyFilters(catalogEntries);
 
             // Auto-select initial selection if provided
             if (initialselection) {
@@ -177,7 +116,7 @@
                 }
             }
 
-            onitemsloaded?.(filteredEntries, catalogEntries);
+            onitemsloaded?.(filteredEntries);
         } catch (e) {
             console.error('Failed to load catalog entries:', e);
             error = e.message || 'Failed to load catalog entries';
@@ -199,29 +138,20 @@
         }
     }
 
-    // Set dynamic filters and re-run filter logic. Call with {} to clear all dynamic filters.
-    export function setFilters(opts: FilterOptions) {
-        activeSearchtext = opts.searchtext ?? null;
-        activeDatasetfilter = opts.datasetfilter ?? null;
-        runFilters();
-    }
-
-    // Programmatically select a catalog entry (pass null to clear)
-    export function select(idOrEntry: string | CatalogEntry | null) {
-        if (!idOrEntry) {
-            selectedValue = '';
-            if (dropdownRef) dropdownRef.value = '';
-            onentryselect?.(null);
-            return;
-        }
+    // Exposed method to programmatically select a catalog entry
+    export function select(idOrEntry: string | CatalogEntry) {
         const id = typeof idOrEntry === 'string' ? idOrEntry : idOrEntry?.id;
         if (!id) return;
 
         const entry = filteredEntries.find(ce => ce.id === id);
         if (entry) {
             selectedValue = id;
-            if (dropdownRef) dropdownRef.value = id;
-            onentryselect?.(entry);
+            if (dropdownRef) {
+                dropdownRef.value = id;
+            }
+            if (onentryselect) {
+                onentryselect(entry);
+            }
         }
     }
 
@@ -239,13 +169,6 @@
     export function getAllEntries(): CatalogEntry[] {
         return catalogEntries;
     }
-
-    // Reload entries from the API, optionally auto-selecting an entry by ID after reload
-    export function reload(selectAfterReload?: string) {
-        loadCatalogEntries().then(() => {
-            if (selectAfterReload) select(selectAfterReload);
-        });
-    }
 </script>
 
 {#if loading}
@@ -285,42 +208,8 @@
             </cds-dropdown-item>
         {/each}
     </cds-dropdown>
-    {#if searchMissText}
-        <div class="search-miss search-miss-muted">
-            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
-                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
-            </svg>
-            <span>No match for "{searchMissText}" — showing all entries</span>
-        </div>
-    {/if}
-    {#if multipleMatchText}
-        <div class="search-miss search-miss-muted">
-            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
-                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
-            </svg>
-            <span>Multiple entries found for "{multipleMatchText}" — please make a selection</span>
-        </div>
-    {/if}
 {/if}
 
 <style>
-    .search-miss {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 0.75rem;
-        margin-top: 0.25rem;
-        font-size: 0.875rem;
-        background: var(--cds-support-warning, #f1c21b);
-        color: #161616;
-    }
-
-    .search-miss-muted {
-        background: var(--cds-layer-02, #e0e0e0);
-        color: var(--cds-text-secondary, #525252);
-    }
-
-    .search-miss svg {
-        flex-shrink: 0;
-    }
+    /* Styles moved to inline for shadow DOM compatibility */
 </style>

package/dist/DCCatalogEntry.svelte.d.ts

@@ -1,8 +1,4 @@
 import type { CatalogEntry, DataType } from '@industream/datacatalog-client/dto';
-interface FilterOptions {
-    searchtext?: string | null;
-    datasetfilter?: string | null;
-}
 interface Props {
     id?: string;
     dcapiurl?: string;
@@ -10,17 +6,14 @@ interface Props {
     datatypefilter?: DataType | DataType[] | null;
     namefilter?: string | string[] | null;
     initialselection?: string | null;
-    onentryselect?: (entry: CatalogEntry | null) => void;
-    onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
-    onsearchmiss?: (text: string) => void;
+    onentryselect?: (entry: CatalogEntry) => void;
+    onitemsloaded?: (entries: CatalogEntry[]) => void;
 }
 declare const DCCatalogEntry: import("svelte").Component<Props, {
-    setFilters: (opts: FilterOptions) => void;
-    select: (idOrEntry: string | CatalogEntry | null) => void;
+    select: (idOrEntry: string | CatalogEntry) => void;
     getSelection: () => CatalogEntry | null;
     getEntries: () => CatalogEntry[];
     getAllEntries: () => CatalogEntry[];
-    reload: (selectAfterReload?: string) => void;
 }, "">;
 type DCCatalogEntry = ReturnType<typeof DCCatalogEntry>;
 export default DCCatalogEntry;

package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    /**
+     * 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.
+     *
+     * Column keys reference the COLUMN_DEFS registry in columns.ts:
+     *   'name'     → CatalogEntry.name              (text)
+     *   'dataType' → CatalogEntry.dataType           (pill)
+     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
+     *   'unit'     → CatalogEntry.metadata.unit       (pill)
+     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     *
+     * @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 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 { 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 TagBrowser from './TagBrowser.svelte';
+    import SelectedTags from './SelectedTags.svelte';
+
+    interface Props {
+        dcApiUrl?: string;
+        sourceConnectionId?: string;
+        selectedIds?: string[];
+        entries?: CatalogEntry[];
+        columns?: string[];
+        selectedColumnsDisplay?: string[];
+        emptyMessage?: string;
+        onSelectionChange?: (ids: string[]) => void;
+        onRemove?: (id: string) => void;
+    }
+
+    let {
+        dcApiUrl = '',
+        sourceConnectionId = '',
+        selectedIds = $bindable([]),
+        entries = $bindable([]),
+        columns = DEFAULT_COLUMNS,
+        selectedColumnsDisplay = DEFAULT_SELECTED_COLUMNS_DISPLAY,
+        emptyMessage = 'No entries found for this source connection.',
+        onSelectionChange = null,
+        onRemove = null
+    }: Props = $props();
+
+    let loading = $state(false);
+    let error = $state('');
+
+    $effect(() => {
+        if (dcApiUrl && sourceConnectionId) {
+            loadEntries(dcApiUrl, sourceConnectionId);
+        } else {
+            entries = [];
+            error = '';
+        }
+    });
+
+    async function loadEntries(apiUrl: string, connId: string) {
+        loading = true;
+        error = '';
+        try {
+            const client = new DataCatalogClient({ baseUrl: apiUrl });
+            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
+            entries = result.items ?? [];
+        } catch (err: any) {
+            error = err.message ?? 'Failed to load catalog entries';
+            entries = [];
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<TagBrowser
+    {entries}
+    bind:selectedIds
+    {columns}
+    {loading}
+    {error}
+    {emptyMessage}
+    {onSelectionChange}
+/>
+
+{#if selectedIds.length > 0}
+    <SelectedTags
+        {entries}
+        bind:selectedIds
+        columns={selectedColumnsDisplay}
+        {onRemove}
+    />
+{:else}
+    <small class="helper-text warning">Select at least one tag to monitor</small>
+{/if}
+
+<style>
+    .helper-text {
+        color: var(--cds-text-secondary, #525252);
+        font-size: 0.75rem;
+        margin-top: 0.25rem;
+    }
+    .helper-text.warning {
+        color: var(--cds-support-warning, #f1c21b);
+    }
+</style>

package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+interface Props {
+    dcApiUrl?: string;
+    sourceConnectionId?: string;
+    selectedIds?: string[];
+    entries?: CatalogEntry[];
+    columns?: string[];
+    selectedColumnsDisplay?: string[];
+    emptyMessage?: string;
+    onSelectionChange?: (ids: string[]) => void;
+    onRemove?: (id: string) => void;
+}
+declare const DCCatalogEntryPicker: import("svelte").Component<Props, {}, "entries" | "selectedIds">;
+type DCCatalogEntryPicker = ReturnType<typeof DCCatalogEntryPicker>;
+export default DCCatalogEntryPicker;

package/dist/DCCatalogEntryPicker/SelectedTags.svelte

@@ -0,0 +1,150 @@
+<script>
+    import { DEFAULT_SELECTED_COLUMNS_DISPLAY, resolveColumn, resolveValue } from './picker-column-helpers';
+
+    let {
+        entries = [],
+        selectedIds = $bindable([]),
+        columns = DEFAULT_SELECTED_COLUMNS_DISPLAY,
+        onRemove = null
+    } = $props();
+
+    let expanded = $state(true);
+
+    /** Resolved column descriptors — maps each column key to its label, resolver and render type */
+    const columnDescriptors = $derived(
+        columns
+            .map(k => { const resolved = resolveColumn(k); return resolved ? { key: k, ...resolved } : null; })
+            .filter(Boolean)
+    );
+
+    const selectedEntries = $derived(() => {
+        const idSet = new Set(selectedIds);
+        return entries.filter(e => idSet.has(e.id));
+    });
+
+    const selectedCount = $derived(selectedIds.length);
+
+    $effect(() => {
+        if (selectedCount === 0) {
+            expanded = false;
+        } else if (selectedCount > 0 && !expanded) {
+            expanded = true;
+        }
+    });
+
+    function handleRemove(id) {
+        onRemove?.(id);
+    }
+</script>
+
+<div class="selected-tags">
+    <button class="panel-header" aria-expanded={expanded} onclick={() => expanded = !expanded}>
+        <svg class="chevron" class:chevron-expanded={expanded} viewBox="0 0 16 16" width="16" height="16">
+            <path d="M11 8L6 13V3z" fill="currentColor"></path>
+        </svg>
+        <span class="panel-title">Selected Tags ({selectedCount})</span>
+    </button>
+
+    {#if expanded}
+        <div class="panel-body">
+            {#if selectedEntries().length === 0}
+                <div class="empty-message">No tags selected</div>
+            {:else}
+                <div class="tag-list">
+                    {#each selectedEntries() as entry (entry.id)}
+                        <div class="tag-row">
+                            <div class="tag-info">
+                                {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
+                                    {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {#if index === 0}
+                                        <!-- First column: bold primary label -->
+                                        <span class="tag-primary">{val ?? '-'}</span>
+                                    {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
+                                        {#each val as label (label.id)}
+                                            <span class="meta-item">{label.name}</span>
+                                        {/each}
+                                    {:else if columnDescriptor.type === 'code'}
+                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                    {:else}
+                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                    {/if}
+                                {/each}
+                            </div>
+                            <button
+                                class="remove-button"
+                                title="Remove {entry.name}"
+                                aria-label="Remove {entry.name}"
+                                onclick={() => handleRemove(entry.id)}
+                            >
+                                <svg viewBox="0 0 16 16" width="14" height="14"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z" fill="currentColor"></path></svg>
+                            </button>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .selected-tags {
+        border: 1px solid var(--cds-border-subtle-01, #393939);
+        background: var(--cds-layer-01, #262626);
+    }
+    .panel-header {
+        display: flex; align-items: center; gap: 0.5rem;
+        width: 100%; padding: 0.5rem 0.75rem;
+        background: var(--cds-layer-02, #2e2e2e); border: none;
+        color: var(--cds-text-primary, #f4f4f4);
+        font-size: 0.8125rem; font-weight: 600;
+        cursor: pointer; text-align: left; transition: background-color 0.15s;
+    }
+    .panel-header:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .chevron {
+        color: var(--cds-text-secondary, #c6c6c6);
+        transition: transform 0.15s ease; flex-shrink: 0;
+    }
+    .chevron-expanded { transform: rotate(90deg); }
+    .panel-title { flex: 1; }
+    .panel-body { max-height: 200px; overflow-y: auto; }
+    .empty-message {
+        padding: 1rem; text-align: center;
+        color: var(--cds-text-helper, #8d8d8d); font-size: 0.8125rem;
+    }
+    .tag-row {
+        display: flex; align-items: center; gap: 0.5rem;
+        padding: 0.375rem 0.75rem;
+        border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        transition: background-color 0.1s;
+    }
+    .tag-row:last-child { border-bottom: none; }
+    .tag-row:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .tag-info {
+        flex: 1; display: flex; align-items: center; gap: 0.75rem;
+        min-width: 0; overflow: hidden;
+    }
+    .tag-primary {
+        font-weight: 600; font-size: 0.8125rem;
+        color: var(--cds-text-primary, #f4f4f4);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        flex-shrink: 0; max-width: 12rem;
+    }
+    .tag-code {
+        font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem;
+        color: var(--cds-text-secondary, #c6c6c6);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
+    }
+    .meta-item {
+        padding: 0.0625rem 0.375rem;
+        background: var(--cds-tag-background-gray, #393939);
+        color: var(--cds-tag-color-gray, #c6c6c6);
+        font-size: 0.6875rem; border-radius: 1rem;
+    }
+    .remove-button {
+        background: transparent; border: none;
+        color: var(--cds-text-secondary, #c6c6c6);
+        cursor: pointer; padding: 0.25rem;
+        transition: color 0.15s; flex-shrink: 0;
+    }
+    .remove-button:hover { color: var(--cds-support-error, #fa4d56); }
+</style>

package/dist/DCCatalogEntryPicker/SelectedTags.svelte.d.ts

@@ -0,0 +1,18 @@
+export default SelectedTags;
+type SelectedTags = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SelectedTags: import("svelte").Component<{
+    entries?: any[];
+    selectedIds?: any[];
+    columns?: typeof DEFAULT_SELECTED_COLUMNS_DISPLAY;
+    onRemove?: any;
+}, {}, "selectedIds">;
+type $$ComponentProps = {
+    entries?: any[];
+    selectedIds?: any[];
+    columns?: typeof DEFAULT_SELECTED_COLUMNS_DISPLAY;
+    onRemove?: any;
+};
+import { DEFAULT_SELECTED_COLUMNS_DISPLAY } from './picker-column-helpers';