`DCCatalogEntryPicker`

DCCatalogEntryPicker is the multi-select catalog-entry component.

It composes:

TagBrowser (table browse/search/select)
SelectedTags (selected summary + remove)

[NOTE!lightbulb/STATE OWNERSHIP] DCCatalogEntryPicker exposes state through bindings/callbacks, not imperative methods.

Props (complete)

Prop	Type	Default	Usage
`dcApiUrl`	`string`	`''`	DataCatalog base URL.
`sourceConnectionId`	`string`	`''`	Optional connection scope for entries.
`selectedIds`	`string[]` (bindable)	`[]`	Selected catalog entry ids.
`entries`	`CatalogEntry[]` (bindable)	`[]`	Loaded entries exposed to parent.
`columns`	`string[]`	`DEFAULT_COLUMNS`	Table columns for browser.
`selectedColumnsDisplay`	`string[]`	`DEFAULT_SELECTED_COLUMNS_DISPLAY`	Columns shown in selected-tags panel.
`emptyMessage`	`string`	`No entries found for this source connection.`	Empty table message.
`onSelectionChange`	`(ids: string[]) => void`	`null`	Called whenever selected ids change.
`onRemove`	`(id: string) => void`	`null`	Called when user removes one selected tag.

Exported methods

No imperative methods are exported by DCCatalogEntryPicker itself. Use bind:selectedIds/bind:entries + callbacks for control.

Internal data-loading behavior

Initial query loads MAX_ENTRIES + 1 (MAX_ENTRIES = 100) to detect size overflow.
If result size is <= 100 => client-side search mode.
If result size is > 100 => server-search mode.
- Search is debounced (1s).
- In-flight search requests are cancelled with AbortController.

[WARNING!monitoring/SCALING BEHAVIOR] In server mode, empty search query intentionally returns no rows; users must type to refine.

[WARNING!schedule/CONFIG INTEGRITY] If you persist selected IDs but stop syncing them to $values, UI and backend config drift can occur quickly.

Usage examples

1) Standard source + picker

<script>
  import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
  import { DCCatalogEntryPicker } from '@industream/flowmaker-flowbox-ui-components';

  const props = $props();
  const { values, validity, emit, jsonEnv } = flowMakerBridge(props);
  const dcConfig = jsonEnv('datacatalog');

  let selectedEntryIds = $state([]);
  let pickerEntries = $state([]);

  function onSelectionChange(ids) {
    selectedEntryIds = ids;
    $values.entryIds = ids.join(',');
    $validity.entryIds = ids.length === 0;
    emit('validity', $validity);
  }

  function onRemove(entryId) {
    selectedEntryIds = selectedEntryIds.filter(id => id !== entryId);
    $values.entryIds = selectedEntryIds.join(',');
    $validity.entryIds = selectedEntryIds.length === 0;
    emit('validity', $validity);
  }
</script>

<DCCatalogEntryPicker
  dcApiUrl={$dcConfig?.url}
  sourceConnectionId={$values?.sourceConnectionId}
  bind:selectedIds={selectedEntryIds}
  bind:entries={pickerEntries}
  columns={['name', 'sourceParams.topic', 'dataType', 'metadata.unit', 'labels']}
  selectedColumnsDisplay={['name', 'sourceParams.topic', 'dataType']}
  onSelectionChange={onSelectionChange}
  onRemove={onRemove}
  emptyMessage="No entries found for this source connection."
/>

2) Using loaded `entries` in parent logic

<script>
  let selectedIds = $state([]);
  let entries = $state([]);

  const selectedNames = $derived(
    entries.filter(e => selectedIds.includes(e.id)).map(e => e.name)
  );
</script>

<DCCatalogEntryPicker bind:selectedIds bind:entries dcApiUrl={$dcConfig?.url} />

Notes / warnings

columns are resolved through helper logic; unknown keys are ignored.
COLUMN_DEFS overrides are global mutable state for the runtime bundle.
In server-search mode users must type a query before rows appear.

Real usage references

/home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/mqtt-client/frontend/src/source/ConfigForm.svelte
/home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/modbus-tcp/frontend/src/source/ConfigForm.svelte
/home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/opc-ua-client/frontend/src/source/ConfigForm.svelte
/home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/datacatalog-mapper/frontend/src/default/ConfigForm.svelte

Reference

sdk/config/flowbox-ui-components/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

DCCatalogEntryPicker