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

package/dist/DCCatalogEntry.svelte

@@ -2,6 +2,11 @@
     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;
@@ -9,8 +14,9 @@
         datatypefilter?: DataType | DataType[] | null;
         namefilter?: string | string[] | null;
         initialselection?: string | null;
-        onentryselect?: (entry: CatalogEntry) => void;
-        onitemsloaded?: (entries: CatalogEntry[]) => void;
+        onentryselect?: (entry: CatalogEntry | null) => void;
+        onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
+        onsearchmiss?: (text: string) => void;  // Called when searchtext matches nothing
     }
 
     let {
@@ -21,7 +27,8 @@
         namefilter = null,
         initialselection = null,
         onentryselect = null,
-        onitemsloaded = null
+        onitemsloaded = null,
+        onsearchmiss = null
     }: Props = $props();
 
     let catalogEntries = $state<CatalogEntry[]>([]);
@@ -31,18 +38,22 @@
     let error = $state<string | null>(null);
     let dropdownRef = $state<HTMLElement | null>(null);
 
-    // Load catalog entries when component mounts or dcapiurl changes
+    // 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
+        const _sourceTypeFilter = sourcetypefilter;
         if (dcapiurl) {
             loadCatalogEntries();
         }
     });
 
-    // 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) {
@@ -58,11 +69,10 @@
         }
     });
 
-    function applyFilters(entries: CatalogEntry[]): CatalogEntry[] {
+    function applyBaseFilters(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 =>
@@ -82,6 +92,54 @@
         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;
@@ -102,9 +160,13 @@
 
             const result = await client.catalogEntries.get(filters);
             catalogEntries = result.items || [];
-            // Apply filters synchronously so initialselection works
-            filteredEntries = applyFilters(catalogEntries);
-            console.log('Loaded catalog entries:', catalogEntries);
+            // Apply base filters synchronously so initialselection works
+            filteredEntries = applyBaseFilters(catalogEntries);
+
+            // Re-apply dynamic filters if any are active
+            if (activeSearchtext || activeDatasetfilter) {
+                runFilters();
+            }
 
             // Auto-select initial selection if provided
             if (initialselection) {
@@ -115,7 +177,7 @@
                 }
             }
 
-            onitemsloaded?.(filteredEntries);
+            onitemsloaded?.(filteredEntries, catalogEntries);
         } catch (e) {
             console.error('Failed to load catalog entries:', e);
             error = e.message || 'Failed to load catalog entries';
@@ -127,33 +189,39 @@
 
     function handleSelect(e: CustomEvent) {
         const selectedId = e.detail?.item?.value || e.target?.value;
-        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
         selectedValue = selectedId;
 
         if (selectedId && onentryselect) {
             const selected = filteredEntries.find(ce => ce.id === selectedId);
-            console.log('Found selected:', selected);
             if (selected) {
                 onentryselect(selected);
             }
         }
+    }
 
+    // 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();
     }
 
-    // Exposed method to programmatically select a catalog entry
-    export function select(idOrEntry: string | CatalogEntry) {
+    // 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;
+        }
         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;
-            }
-            if (onentryselect) {
-                onentryselect(entry);
-            }
+            if (dropdownRef) dropdownRef.value = id;
+            onentryselect?.(entry);
         }
     }
 
@@ -171,6 +239,13 @@
     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}
@@ -210,8 +285,42 @@
             </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>
-    /* Styles moved to inline for shadow DOM compatibility */
+    .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;
+    }
 </style>

package/dist/DCCatalogEntry.svelte.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",

package/src/DCCatalogEntry.svelte

@@ -2,6 +2,11 @@
     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;
@@ -9,8 +14,9 @@
         datatypefilter?: DataType | DataType[] | null;
         namefilter?: string | string[] | null;
         initialselection?: string | null;
-        onentryselect?: (entry: CatalogEntry) => void;
-        onitemsloaded?: (entries: CatalogEntry[]) => void;
+        onentryselect?: (entry: CatalogEntry | null) => void;
+        onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
+        onsearchmiss?: (text: string) => void;  // Called when searchtext matches nothing
     }
 
     let {
@@ -21,7 +27,8 @@
         namefilter = null,
         initialselection = null,
         onentryselect = null,
-        onitemsloaded = null
+        onitemsloaded = null,
+        onsearchmiss = null
     }: Props = $props();
 
     let catalogEntries = $state<CatalogEntry[]>([]);
@@ -31,18 +38,22 @@
     let error = $state<string | null>(null);
     let dropdownRef = $state<HTMLElement | null>(null);
 
-    // Load catalog entries when component mounts or dcapiurl changes
+    // 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
+        const _sourceTypeFilter = sourcetypefilter;
         if (dcapiurl) {
             loadCatalogEntries();
         }
     });
 
-    // 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) {
@@ -58,11 +69,10 @@
         }
     });
 
-    function applyFilters(entries: CatalogEntry[]): CatalogEntry[] {
+    function applyBaseFilters(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 =>
@@ -82,6 +92,54 @@
         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;
@@ -102,9 +160,13 @@
 
             const result = await client.catalogEntries.get(filters);
             catalogEntries = result.items || [];
-            // Apply filters synchronously so initialselection works
-            filteredEntries = applyFilters(catalogEntries);
-            console.log('Loaded catalog entries:', catalogEntries);
+            // Apply base filters synchronously so initialselection works
+            filteredEntries = applyBaseFilters(catalogEntries);
+
+            // Re-apply dynamic filters if any are active
+            if (activeSearchtext || activeDatasetfilter) {
+                runFilters();
+            }
 
             // Auto-select initial selection if provided
             if (initialselection) {
@@ -115,7 +177,7 @@
                 }
             }
 
-            onitemsloaded?.(filteredEntries);
+            onitemsloaded?.(filteredEntries, catalogEntries);
         } catch (e) {
             console.error('Failed to load catalog entries:', e);
             error = e.message || 'Failed to load catalog entries';
@@ -127,33 +189,39 @@
 
     function handleSelect(e: CustomEvent) {
         const selectedId = e.detail?.item?.value || e.target?.value;
-        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
         selectedValue = selectedId;
 
         if (selectedId && onentryselect) {
             const selected = filteredEntries.find(ce => ce.id === selectedId);
-            console.log('Found selected:', selected);
             if (selected) {
                 onentryselect(selected);
             }
         }
+    }
 
+    // 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();
     }
 
-    // Exposed method to programmatically select a catalog entry
-    export function select(idOrEntry: string | CatalogEntry) {
+    // 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;
+        }
         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;
-            }
-            if (onentryselect) {
-                onentryselect(entry);
-            }
+            if (dropdownRef) dropdownRef.value = id;
+            onentryselect?.(entry);
         }
     }
 
@@ -171,6 +239,13 @@
     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}
@@ -210,8 +285,42 @@
             </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>
-    /* Styles moved to inline for shadow DOM compatibility */
+    .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;
+    }
 </style>