Decision Node Editor

Overview

When building a workflow, admins can add a Decision node that branches based on a true/false condition. The Decision Node Editor is the modal interface where they compose that logic. It provides a natural-language query builder with type-aware operators, a catalog of available variables, and a preview mode to test the logic with sample data.

Interactive Preview

Click the Decision node to open the editor. Use the mock variables below to build a rule, then preview the result.

Variables available in this preview: user.name, user.email, user.age, user.dob, user.is_active, user.countries, application.id, application.created_at, application.status, profile.is_verified

Setup

The editor depends on four packages and requires two CSS imports.

import "react-querybuilder/dist/query-builder.css";
import "@/styles/queryBuilder.css";

Operator Reference

Operators are presented in natural language and are constrained by the selected variable's inferred type. Below are the operator sets available for each type. Operators are mapped internally to jsonLogic.

Note:Operators are deliberately natural-language (e.g., "more than" not ">") to reduce ambiguity and improve clarity for non-technical admins. Regex, startsWith, and endsWith are intentionally excluded from the initial set; they may be added later if needed.

All Types operators (is present / is missing) are defined in fixture data but are not wired into the component's OPERATORS map. They are not available in the current build.

Variable Catalog

Variables are provided by the Variables Manager as a flat list (no nested paths). They are displayed with their key and an optional tooltip showing the sample value. Type is inferred from the value when present.

Type Handling

Type is inferred automatically from a variable's sample value. The inferred type determines which operators are available. Below are the inference rules.

Query Builder UI

The core interface for composing rules. React Query Builder (Material UI skin) provides drag-and-drop rule composition, automatic type constraints, and grouping with AND/OR/NOT.

Decision Node Editor Modal

When an admin selects a Decision node on the Workflow Editor canvas, the full Decision Node Editor modal opens instead of a properties panel. This dedicated modal provides the rule builder interface in a focused, full-width dialog optimized for complex rule configuration.

Rule Builder Card

The Card-style container holds rules and combinator controls:

• Combinator row: AND/OR Select + Not Switch + "+ Rule" (contained primary) + "+ Group" (outlined)
• Not switch: Inverts the result of the group. When enabled, negates the entire group's boolean output. Example: if a group evaluates to true, NOT makes it false. In jsonLogic, this wraps the group in a not operator.
• Rule rows: Field Select (minWidth 130px) + Operator Select (minWidth 120px, flex 0.3) + Value TextField (flex 1) + Delete ×. Rows have a full 1px border, not a left-only accent.
• Preview button: Outlined button below the rule builder card; opens preview mode without closing the modal.

Modal interaction

• Modal opens when Decision node is clicked
• Save button disabled until form is dirty
• Preview button (below rule builder) switches to preview mode — header changes to "← Back | Preview: {title}", footer shows "Close preview" only
• Back button or "Close preview" returns to build mode without losing changes
• Cancel closes without saving; the component calls onClose() directly — any dirty confirmation must be handled by the parent
• Delete node removes the node from the workflow

Component API

DecisionNodeEditor is a self-contained dialog. All internal state resets when the dialog opens (keyed on node.id).

<DecisionNodeEditor
  open={selectedNode?.type === "Decision"}
  onClose={() => setSelectedNodeId(null)}
  onSave={({ title, jsonLogic }) => {
    updateNode(selectedNode.id, { label: title, jsonLogic });
    setSelectedNodeId(null);
  }}
  onDelete={() => {
    removeNode(selectedNode.id);
    setSelectedNodeId(null);
  }}
  node={selectedNode}
  variables={variables}
/>

JsonLogic & Validation

The builder exports logic as jsonLogic format. On save, the editor validates that the expression is boolean-producing. Existing jsonLogic can be imported back into the builder via parseJsonLogic().

Flat-to-nested conversion: Variables use dot-notation keys (e.g., user.age). Before evaluation, the component converts these to nested objects — { user: { age: 25 } } — via an internal flatToNested() helper. Any integration that evaluates jsonLogic outside the component must replicate this step, otherwise variable lookups will return undefined.

Preview Mode

Admins can toggle to Preview mode to test their logic with sample data. Input fields are auto-generated from variables and pre-filled with their sample values. Evaluation is live and responsive.

Type coercion: All test inputs are stored as strings (text fields). Before evaluation, inputs are coerced to their variable type: numbers via parseFloat(), booleans by checking === "true", arrays by splitting on comma and trimming whitespace. Datetime variables are not coerced — pass epoch ms as a string and the jsonLogic comparison will handle it numerically.

Error States

Target error states — these are not yet implemented in the component. The current build only disables Save when the form is clean. These states represent what validation should enforce when rule structure checking is added.

Constraints & Notes

Important limitations and considerations for the Decision Node Editor.

Code

{
  "title": "Age requirement",
  "jsonLogic": {
    ">": [
      { "var": "user.age" },
      18
    ]
  }
}

{
  "title": "Eligible student",
  "jsonLogic": {
    "and": [
      {
        ">": [
          { "var": "user.age" },
          18
        ]
      },
      {
        "in": [
          { "var": "user.country" },
          ["USA", "Canada"]
        ]
      }
    ]
  }
}

{
  "title": "Not eligible",
  "jsonLogic": {
    "not": {
      "and": [
        {
          ">=": [
            { "var": "user.age" },
            18
          ]
        },
        {
          "in": [
            { "var": "user.country" },
            ["USA", "Canada"]
          ]
        }
      ]
    }
  }
}

{
  "title": "Recent applicant",
  "jsonLogic": {
    "and": [
      {
        ">=": [
          { "var": "application.created_at" },
          1704067200000
        ]
      },
      {
        "<=": [
          { "var": "application.created_at" },
          1735689600000
        ]
      }
    ]
  }
}

// The variables prop must include a type field.
// Type is inferred by the Variables Manager before passing to the component.
const variables = [
  { key: "user.name",       value: "John Smith",           type: "string" },
  { key: "user.age",        value: 28,                     type: "number" },
  { key: "user.is_active",  value: true,                   type: "boolean" },
  { key: "user.dob",        value: "1996-05-15",           type: "datetime" },
  { key: "user.countries",  value: ["USA", "CA"],          type: "array" },
  { key: "profile.status",  value: null,                   type: "unknown" },
];

import jsonLogic from 'json-logic-js';

// Variables use dot-notation keys — must convert to nested objects first
function flatToNested(flat) {
  const result = {};
  for (const [key, value] of Object.entries(flat)) {
    const parts = key.split(".");
    let obj = result;
    for (let i = 0; i < parts.length - 1; i++) {
      if (!obj[parts[i]]) obj[parts[i]] = {};
      obj = obj[parts[i]];
    }
    obj[parts[parts.length - 1]] = value;
  }
  return result;
}

const logic = { ">": [{ "var": "user.age" }, 18] };
const flatInputs = { "user.age": 25 };

const result = jsonLogic.apply(logic, flatToNested(flatInputs));
// result: true — flatToNested converts { "user.age": 25 } to { user: { age: 25 } }