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

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -0,0 +1,210 @@
+<script>
+    import { DEFAULT_COLUMNS, resolveColumn, resolveValue, resolveSearchText } from './picker-column-helpers';
+
+    let {
+        entries = [],
+        selectedIds = $bindable([]),
+        columns = DEFAULT_COLUMNS,
+        loading = false,
+        error = '',
+        emptyMessage = 'No entries found for this source connection.',
+        onSelectionChange = null
+    } = $props();
+
+    let searchQuery = $state('');
+
+    /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
+    const columnDescriptors = $derived(
+        columns
+            .map(k => { const col = resolveColumn(k); return col ? { key: k, ...col } : null; })
+            .filter(Boolean)
+    );
+
+    const filtered = $derived(() => {
+        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)));
+
+    function toggleEntry(id) {
+        selectedIds = selectedIds.indexOf(id) >= 0
+            ? selectedIds.filter(s => s !== id)
+            : [...selectedIds, id];
+        onSelectionChange?.(selectedIds);
+    }
+
+    function selectAll() {
+        const merged = new Set(selectedIds);
+        filtered().forEach(e => merged.add(e.id));
+        selectedIds = [...merged];
+        onSelectionChange?.(selectedIds);
+    }
+
+    function deselectAll() {
+        const visibleSet = new Set(filtered().map(e => e.id));
+        selectedIds = selectedIds.filter(id => !visibleSet.has(id));
+        onSelectionChange?.(selectedIds);
+    }
+
+    function toggleAll() {
+        allVisibleSelected ? deselectAll() : selectAll();
+    }
+</script>
+
+<div class="tag-browser">
+    <div class="toolbar">
+        <div class="search-wrapper">
+            <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
+                <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
+            </svg>
+            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+        </div>
+        <div class="toolbar-actions">
+            <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
+            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+        </div>
+    </div>
+
+    {#if loading}
+        <div class="state-message"><div class="spinner"></div> <span>Loading catalog entries...</span></div>
+    {:else if error}
+        <div class="state-message error-state">
+            <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>{error}</span>
+        </div>
+    {:else if entries.length === 0}
+        <div class="state-message empty-state"><span>{emptyMessage}</span></div>
+    {:else}
+        <div class="table-container">
+            <table class="entry-table">
+                <!-- Table headers: one checkbox column + one column per columnDescriptor -->
+                <thead>
+                    <tr>
+                        <th class="col-checkbox"><input type="checkbox" title="Toggle all visible" checked={allVisibleSelected} onchange={toggleAll} /></th>
+                        {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
+                            <th>{columnDescriptor.label}</th>
+                        {/each}
+                    </tr>
+                </thead>
+
+                <!-- Table body: one row per filtered catalog entry, cells rendered by column type -->
+                <tbody>
+                    {#each filtered() as entry (entry.id)}
+                        {@const isSelected = selectedIds.includes(entry.id)}
+                        <tr class:selected={isSelected} onclick={() => toggleEntry(entry.id)}>
+                            <td class="col-checkbox"><input type="checkbox" checked={isSelected} onclick={(e) => e.stopPropagation()} onchange={() => toggleEntry(entry.id)} /></td>
+
+                            <!-- Render each column cell according to its type (text, code, pill, labels) -->
+                            {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
+                                {@const val = resolveValue(entry, columnDescriptor.key)}
+                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                    {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
+                                        {#each val as label (label.id)}
+                                            <span class="label-pill">{label.name}</span>
+                                        {/each}
+                                    {:else if columnDescriptor.type === 'code'}
+                                        <code>{val ?? '-'}</code>
+                                    {:else if columnDescriptor.type === 'pill'}
+                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                    {:else}
+                                        {val ?? '-'}
+                                    {/if}
+                                </td>
+                            {/each}
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        {#if filtered().length !== entries.length}
+            <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .tag-browser { gap: 0.5rem; }
+    .toolbar { gap: 0.5rem; }
+    .search-wrapper { position: relative; display: flex; align-items: center; }
+    .search-icon { position: absolute; left: 0.75rem; color: var(--cds-text-secondary, #525252); pointer-events: none; }
+    .search-input {
+        width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        background: var(--cds-field-01, #353535); border: none;
+        border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.875rem;
+        outline: none; transition: border-color 0.15s;
+    }
+    .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
+    .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
+    .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
+    .action-button {
+        padding: 0.25rem 0.75rem; background: transparent;
+        border: 1px solid var(--cds-border-strong-01, #6f6f6f);
+        color: var(--cds-text-primary, #f4f4f4); font-size: 0.75rem;
+        cursor: pointer; transition: background-color 0.15s;
+    }
+    .action-button:hover:not(:disabled) { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .action-button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .state-message {
+        display: flex; align-items: center; justify-content: center;
+        gap: 0.5rem; padding: 2rem;
+        color: var(--cds-text-secondary, #c6c6c6); font-size: 0.875rem;
+    }
+    .error-state { color: var(--cds-support-error, #fa4d56); }
+    .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .spinner {
+        width: 1rem; height: 1rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .table-container {
+        max-height: 400px; overflow-y: auto;
+        border: 1px solid var(--cds-border-subtle-01, #393939);
+    }
+    .entry-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+    .entry-table thead { position: sticky; top: 0; z-index: 1; }
+    .entry-table th {
+        background: var(--cds-layer-02, #262626);
+        color: var(--cds-text-secondary, #c6c6c6);
+        font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
+        letter-spacing: 0.02em; padding: 0.5rem;
+        text-align: left; border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        white-space: nowrap;
+    }
+    .entry-table td {
+        padding: 0.375rem 0.5rem;
+        border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
+        color: var(--cds-text-primary, #f4f4f4);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .entry-table tbody tr { cursor: pointer; transition: background-color 0.1s; }
+    .entry-table tbody tr:nth-child(even) { background: var(--cds-layer-01, #262626); }
+    .entry-table tbody tr:nth-child(odd) { background: var(--cds-layer-02, #2e2e2e); }
+    .entry-table tbody tr:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .entry-table tbody tr.selected { background: var(--cds-layer-selected-01, #3d3d3d); }
+    .entry-table tbody tr.selected:hover { background: var(--cds-layer-selected-hover-01, #4c4c4c); }
+    .col-checkbox { width: 2rem; text-align: center; }
+    .col-checkbox input[type="checkbox"] { cursor: pointer; accent-color: var(--cds-interactive, #0f62fe); }
+    code {
+        font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
+        color: var(--cds-text-secondary, #c6c6c6);
+    }
+    .pill, .label-pill {
+        display: inline-block; 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; margin-right: 0.25rem;
+    }
+    .filter-info {
+        font-size: 0.75rem; color: var(--cds-text-helper, #8d8d8d);
+        text-align: center; padding: 0.25rem;
+    }
+</style>

package/src/DCCatalogEntryPicker/picker-column-helpers.ts

@@ -0,0 +1,126 @@
+/**
+ * Catalog entry column system.
+ *
+ * Declarative column definitions that drive both the TagBrowser table
+ * and the SelectedTags panel. Consumers pass an array of column keys
+ * (e.g. ['name', 'sourceParams.nodeId', 'dataType']) to control display.
+ *
+ * ── Static column keys ──────────────────────────────────────────────
+ *
+ *   Key        | Label       | Source                | Render
+ *   -----------|-------------|-----------------------|--------
+ *   'name'     | Name        | CatalogEntry.name      | text
+ *   'dataType' | Data Type   | CatalogEntry.dataType  | pill
+ *   'labels'   | Labels      | CatalogEntry.labels[]  | labels
+ *
+ * ── Dynamic column keys (dot-path) ──────────────────────────────────
+ *
+ *   Any key starting with 'sourceParams.' or 'metadata.' resolves the
+ *   corresponding sub-property at runtime. No pre-registration needed.
+ *
+ *   Key                      | Label      | Source                           | Render
+ *   -------------------------|------------|----------------------------------|--------
+ *   'sourceParams.nodeId'    | Node ID    | CatalogEntry.sourceParams.nodeId  | code
+ *   'sourceParams.topic'     | Topic      | CatalogEntry.sourceParams.topic   | code
+ *   'metadata.unit'          | Unit       | CatalogEntry.metadata.unit        | pill
+ *   'metadata.description'   | Description| CatalogEntry.metadata.description | text
+ *   ... any other sub-key    | (auto)     | ...                               | (auto)
+ *
+ * Render types:
+ *   - 'text'   : plain text cell (truncated, with title tooltip)
+ *   - 'code'   : monospace <code> cell
+ *   - 'pill'   : small badge/pill (only rendered when value is truthy)
+ *   - 'labels' : iterates Label[] array, renders each as a pill
+ *
+ * sourceParams.* keys default to 'code' rendering.
+ * metadata.* keys default to 'pill' rendering.
+ * Override by adding an explicit entry in COLUMN_DEFS.
+ */
+
+import type { CatalogEntry, Label } from '@industream/datacatalog-client/dto';
+
+/** How a cell should be rendered */
+export type ColumnType = 'text' | 'code' | 'pill' | 'labels';
+
+export interface ColumnDef {
+    label: string;
+    resolve: (entry: CatalogEntry) => unknown;
+    type: ColumnType;
+}
+
+/**
+ * Static column definitions for top-level CatalogEntry fields.
+ * For sourceParams / metadata sub-properties, use dot-path keys instead
+ * (see {@link resolveColumn}).
+ */
+export const COLUMN_DEFS: Record<string, ColumnDef> = {
+    name:     { label: 'Name',      resolve: (e) => e.name,     type: 'text' },
+    dataType: { label: 'Data Type', resolve: (e) => e.dataType, type: 'pill' },
+    labels:   { label: 'Labels',    resolve: (e) => e.labels ?? [], type: 'labels' },
+};
+
+/** Default columns for the tag browser table */
+export const DEFAULT_COLUMNS: string[] = ['name', 'dataType', 'labels'];
+
+/** Default columns for the selected tags display panel */
+export const DEFAULT_SELECTED_COLUMNS_DISPLAY: string[] = ['name', 'dataType', 'labels'];
+
+/**
+ * Capitalize a dot-path sub-key into a human-readable label.
+ * e.g. 'nodeId' → 'Node Id', 'pollInterval' → 'Poll Interval'
+ */
+const humanize = (key: string): string =>
+    key.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase()).trim();
+
+/**
+ * Resolve a column definition for any key — static or dot-path.
+ *
+ * Static keys are looked up in COLUMN_DEFS.
+ * Dot-path keys (sourceParams.*, metadata.*) are resolved dynamically:
+ *   - sourceParams.* → renders as 'code'
+ *   - metadata.*     → renders as 'pill'
+ */
+export const resolveColumn = (key: string): ColumnDef | undefined => {
+    if (COLUMN_DEFS[key]) return COLUMN_DEFS[key];
+
+    if (key.startsWith('sourceParams.')) {
+        const prop = key.slice('sourceParams.'.length);
+        return {
+            label: humanize(prop),
+            resolve: (e) => (e.sourceParams as Record<string, unknown>)?.[prop],
+            type: 'code',
+        };
+    }
+
+    if (key.startsWith('metadata.')) {
+        const prop = key.slice('metadata.'.length);
+        return {
+            label: humanize(prop),
+            resolve: (e) => (e.metadata as Record<string, unknown>)?.[prop],
+            type: 'pill',
+        };
+    }
+
+    return undefined;
+};
+
+/**
+ * Resolve a single column value from a catalog entry.
+ */
+export const resolveValue = (entry: CatalogEntry, key: string): unknown =>
+    resolveColumn(key)?.resolve(entry);
+
+/**
+ * Build a lowercase search string from all active column values.
+ * Used by TagBrowser's search filter.
+ */
+export const resolveSearchText = (entry: CatalogEntry, keys: string[]): string =>
+    keys
+        .map((key) => {
+            const val = resolveValue(entry, key);
+            if (val == null) return '';
+            if (Array.isArray(val)) return val.map((v: Label) => v.name ?? v).join(' ');
+            return String(val);
+        })
+        .join(' ')
+        .toLowerCase();

package/src/index.ts

@@ -4,5 +4,7 @@ export type { SourceConnection } from './DCSourceConnection.svelte';
 export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';
 export type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
 
-
+export { default as DCCatalogEntryPicker } from './DCCatalogEntryPicker/DCCatalogEntryPicker.svelte';
+export type { ColumnDef, ColumnType } from './DCCatalogEntryPicker/picker-column-helpers';
+export { COLUMN_DEFS, DEFAULT_COLUMNS, DEFAULT_SELECTED_COLUMNS_DISPLAY, resolveColumn, resolveValue, resolveSearchText } from './DCCatalogEntryPicker/picker-column-helpers';