Regulatory Rules Editor

The Regulatory Page (/regulatory) provides a visual node-graph editor for creating building regulatory rules. It uses ReactFlow for the graph UI and math.js for expression evaluation.

Visual Rule Editor

The editor allows admins to create rules as visual flowcharts:

┌─────────────┐     ┌────────────────┐     ┌──────────────┐
│   Input:    │────▶│  Comparison:   │────▶│   Output:    │
│ site.area   │     │  > 4000 sqm?   │     │  max_far     │
└─────────────┘     └───────┬────────┘     └──────────────┘
                       true │ false
                    ┌───────┴────────┐
                    │  Conditional   │
                    │  true: 2.5     │
                    │  false: 1.75   │
                    └────────────────┘

Node Types

Node	Description	Inputs	Outputs
Input	Reads a registered variable	—	Value
Constant	Fixed value	—	Value
Arithmetic	Math operation (+, -, *, /)	A, B	Result
Comparison	Compare values	A, B	Boolean
Conditional	If/then/else	Condition, True, False	Result
Math Function	min, max, round, etc.	Values	Result
Output	Writes a result variable	Value	—

Editing Workflow

1. Select or create a rule from the rule list
2. Drag nodes from the palette onto the canvas
3. Connect nodes by dragging edges between ports
4. Configure nodes — Set operation types, constant values, variable keys
5. Define parameters — Declare the rule's input and output variables
6. Save — Graph is serialized to JSON and stored in RegulatoryRule.graph

Variable Registry

Admins manage the global variable registry:

• Add variables — Define key, label, category (INPUT/OUTPUT), data type, unit
• Delete variables — Remove unused variables
• Variables use dot-notation keys: site.area, result.max_far, result.setback.front

Rule Metadata

Field	Description
Name	Human-readable rule name
Description	What the rule calculates
Authority	Governing body (BDA, BBMP, etc.)
Region	Geographic applicability
Regulatory Reference	By-law or regulation citation
Tags	Searchable categories

Technical Implementation

• ReactFlow 11 renders the node graph with custom node components
• math.js evaluates mathematical expressions in arithmetic nodes
• Graph serialization — ReactFlow's toObject() serializes nodes and edges to JSON
• Evaluation — Backend traverses the graph in topological order, evaluating each node