@industream/flowmaker-flowbox-ui-components Overview

Reusable Svelte 5 components focused on DataCatalog-backed configuration UX.

Exported components

  • DCSourceConnection
  • DCCatalogEntry
  • DCCatalogEntryPicker

See exports in sdk/config/flowbox-ui-components/src/index.ts.

Package and compatibility notes

  • Package: @industream/flowmaker-flowbox-ui-components
  • Current package version in repo: 1.0.1
  • Peer dependencies include:
    • svelte@^5
    • @industream/datacatalog-client@1.9.1

Design model

  • Components are API-backed selectors for DataCatalog entities.
  • They support both declarative prop usage and imperative instance methods (bind:this) for advanced workflows.
  • Typical FlowMaker forms wire component selection to $values, then emit validity via $validity.

Important implementation remarks

  • DCSourceConnection loads only when dcapiurl is set and sourcetypefilter !== null.
  • DCCatalogEntry supports dynamic runtime filters through setFilters({ searchtext, datasetfilter }).
  • DCCatalogEntryPicker automatically switches between client filtering and server search mode when result volume exceeds 100 entries.

Real usage examples

  • MQTT source picker workflow: /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/mqtt-client/frontend/src/source/ConfigForm.svelte
  • OPC-UA tag selection with picker: /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/opc-ua-client/frontend/src/source/ConfigForm.svelte
  • Modbus custom picker columns: /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/modbus-tcp/frontend/src/source/ConfigForm.svelte
  • PostgreSQL single-entry selection: /home/dja/dsd/dev/boxes-repo/flowmaker-workers/workers/postgres-client/frontend/src/default/ConfigForm.svelte

Reference

  • sdk/config/flowbox-ui-components/README.md
  • sdk/config/flowbox-ui-components/src/