Smart Component Logic View

A Smart Component is a reusable piece of logic or UI that you can embed in any module across your workspace. It reads inputs, performs computations and state changes, and returns outputs every time a module uses it. Smart Component Logic View displays a component's internal logic as ordered chains so you can follow exactly what the component does: which values it reads, which steps it runs, and what it returns. Logic View is read-only and is available for Logic Smart Components and Query Smart Components.

Opening Logic View

There are two ways to open Logic View.

From the Smart Component Library:

1. Select   Library in the global header.

2. Select   Smart Components.

3. Select a component from the list to open it in the Smart Component Editor.

4. Select Logic in the view tabs.

Logic Smart Components and Query Smart Components open directly in Logic View. UI Smart Components open in UI View by default. Select Logic in the view tabs to switch.

From a module:

1. In the Module Builder, select a Smart Component on the canvas.

2. In the Properties panel, select   Open in Library at the top of the component strip.

3. The component opens in the Smart Component Editor. Select Logic in the view tabs.

Data and Chains Panel

The left panel, titled Data & Chains, lists all the values a component works with and the chains that define its behavior. It has five collapsible sections. Each section has a search box.

Each value row in the panel has a button that opens a value detail panel showing more information about that value. The label on the button changes based on the type of value.

From Inputs

The From Inputs section lists values the host module passes in when it uses the component. In Query Smart Components, this section is labeled Parameters.

Each input row shows the input name and how many chains use it. Select the See rules & source button on a row to open the value detail panel for that input.

The value detail panel for an input shows:

• The input's data type.

• Used By: the chains that read this input, with the chain name and how the chain uses the value.

State

The State section lists internal values that stay in memory between renders. In Query Smart Components, this section is labeled Form Collections.

Each state row shows the value name and how many chains use it. Select the See rules & source button on a row to open the value detail panel.

The value detail panel for a state value shows:

• The value's data type.

• Used By: the chains that read or write this value.

Computed

The Computed section lists values that are derived from other values in the component. In Query Smart Components, this section is labeled Result.

Each computed value row shows the value name, a short description of its source, and how many chains use it. Select the See how it is computed button on a row to open the value detail panel.

The value detail panel for a computed value shows:

• Result of Computation: the value's data type.

• How It Works:

  • Uses: the inputs and other values this computation reads, with the role each plays.

  • The Rule: the expression or formula that produces the value.

  • Used By: the chains that use this computed value and how they use it.

Outputs

The Outputs section lists values the component sends back to the host module. This section appears only in Logic Smart Components. Output rows do not have a value detail panel button.

Chains

The Chains section lists every chain in the component. Each row shows a numbered locator tag (a teal square), the chain name, and the number of values it uses.

Select a chain row to focus that chain on the canvas. All other chains are hidden until you select the canvas background to return to the full view.

Chain Canvas

The center of Logic View is the chain canvas. Chains appear as vertical columns. Each column maps to one  and has a fixed width. The canvas pans horizontally. Nothing is draggable.

Numbered locator tags (teal squares: 1, 2, 3...) appear in chain column headers and in the Chains section of the panel. The number on the tag matches the row in the panel to the column on the canvas.

Chain Anatomy

Each chain column has four parts, from top to bottom. Select a label in the diagram to jump to its description.

IO shelf: The values this chain reads at the start. Labeled Reads for render chains and Uses for all other chain types. Each row shows the value's origin type (Input, Computed, and so on) and its name.

Narration band: A plain-language sentence between the IO shelf and the body that describes what triggers this chain and what it sets out to do.

Body: The ordered steps of the chain, including computations, state writes, calls to helper functions, and conditions. Some simple chains have no body steps and go directly from the narration band to the terminal.

Terminal: The chain's final action. A terminal is one of three types: Renders, Notifies, or Returns an outcome. The terminal card shows what value or structure the chain produces.

Chain Controls

Each chain column header contains five controls to the right of the locator tag.

Chain Types

The type of a chain depends on when it runs.

Right-Side Panels

Three panels can open on the right side of the canvas. Only one panel is open at a time.

Select a bolt badge in the UI panel to open Logic View with that chain focused and the UI panel still open.

Canvas Interactions

Keyboard Navigation

The canvas has one tab stop. After the canvas has focus, use arrow keys to move between cards and chains.

These three shortcuts are active when the canvas has focus and are customizable in Settings.

Query Smart Components

Query Smart Components use the same Logic View as Logic Smart Components. A Query Smart Component has one chain: an Invoke chain that shows the MQL query pipeline as ordered stages.

Each stage card shows:

• The stage name (for example, $match, $lookup, or $group).

• The values it reads and the fields it produces.

• For $lookup: both collections involved, the join keys, and a sub-pipeline panel connected by a dashed line.

The Parameters section in the panel lists query parameters defined with :name tokens in the query source.