Canvas Overview

The visual strategy builder canvas is your workspace for creating trading strategies using a node-based interface. Build complex trading logic by dragging nodes from the palette, connecting them together, and configuring their properties.

What is the Canvas?

The canvas is an infinite workspace where you visually design trading strategies by connecting nodes. Each node performs a specific function (reading data, making comparisons, executing trades), and connections between nodes define how data flows through your strategy.

Canvas Interface Elements

The strategy builder canvas consists of several key interface elements:

Grid Background

The dotted grid helps you align nodes and visualize the workspace. Nodes automatically snap to grid points when you move them, ensuring clean layouts. The grid adapts to your zoom level for optimal visibility.

Minimap (Bottom Right)

The minimap shows an overview of your entire strategy, especially useful for large, complex strategies. The highlighted rectangle represents your current viewport.

Click and drag to navigate to different areas
See your entire strategy layout at a glance
Purple dots represent nodes in your strategy

Node Palette (Left Sidebar)

The collapsible palette contains all available node types organized by category:

Data Sources: Feature, Static Value, Input nodes
Logic: Comparison, AND, OR, NOT operators
Math: Add, Subtract, Multiply, Divide, functions
Output: buy_signal, sell_signal, position_size
Super Nodes: Reusable sub-strategies
Comments: Documentation nodes

Validation Panel (Bottom)

The bottom panel displays real-time validation feedback as you build your strategy:

Shows configuration errors (missing required outputs, invalid connections)
Highlights nodes with errors in red borders
Must resolve all errors before saving or backtesting
Click on error messages to jump to problematic nodes

Adding Nodes to Canvas

There are two ways to add nodes to your strategy canvas:

Method 1: Drag and Drop from Palette

Locate Node Type: Find the desired node in the left palette (e.g., "Feature" under Data Sources)
Click and Hold: Click on the node type and hold the mouse button down
Drag to Canvas: Move your mouse to the desired position on the canvas
Release to Drop: Release the mouse button to place the node
Snap to Grid: The node automatically snaps to the nearest grid point

Pro Tip: Double-click on a newly added node to immediately open its configuration panel and set properties. This workflow is faster than adding, selecting, and then configuring.

Navigate large strategies efficiently with these controls:

Pan (Move Around)

Mouse: Click and drag on empty canvas space
Trackpad: Two-finger swipe gesture
Space + Drag: Hold Space key and drag anywhere

Zoom In/Out

Mouse Wheel: Scroll up/down to zoom
Trackpad: Pinch gesture to zoom
Keyboard: Ctrl + Plus/Minus keys
Fit View: Press "F" to fit entire strategy

Select Nodes

Single Select: Click on a node
Multi-Select: Ctrl + Click multiple nodes
Box Select: Drag from empty space to create selection box
Deselect All: Click on empty canvas

Move Nodes

Single Node: Click and drag the node
Multiple Nodes: Select multiple, then drag any selected node
Arrow Keys: Select node, use arrows for fine-tuning
Delete: Select node(s) and press Delete/Backspace

Keyboard Shortcuts

Navigation & View

F - Fit view to all nodes
Space + Drag - Pan canvas
Ctrl + Scroll - Zoom in/out

Editing

Ctrl + Z - Undo last action
Ctrl + Y - Redo action
Delete - Delete selected node(s)
Ctrl + A - Select all nodes

Saving Your Strategy

Manual Save

Ensure all validation errors are resolved (bottom panel shows no errors)
Click the "Save" button in the top toolbar
Wait for the success notification
Your strategy is now persisted and ready for backtesting

Important: The Save button is disabled if your strategy has validation errors. Fix all errors in the validation panel before saving.

Auto-Save Feature: MangoLabs automatically saves your strategy every 30 seconds while you work, preventing data loss. You'll see a subtle notification when auto-save completes. Manual saves are still recommended before closing the editor.

Understanding the Validation Panel

The bottom validation panel provides real-time feedback as you build:

All Clear (No Errors)

When the panel shows "Strategy Valid" in green, your strategy is correctly configured and ready to save/backtest.

Warnings (Optional Issues)

Yellow warnings indicate potential issues that won't prevent saving but might affect strategy performance:

Disconnected nodes (not contributing to final output)
Unused features or data sources
Missing comments or documentation

Errors (Must Fix)

Red errors must be resolved before saving. Common errors include:

Missing required outputs (buy_signal, sell_signal)
Type mismatches (connecting incompatible data types)
Incomplete node configuration (missing feature selection)
Circular dependencies in node graph

Canvas Best Practices

Organize with Comments

Use Comment nodes to group related logic and document your strategy's reasoning. Future you (and collaborators) will thank you.

Keep It Clean

Use the grid to align nodes vertically and horizontally. A clean layout makes debugging and modification much easier. Left-to-right data flow is conventional.

Test Incrementally

Don't build your entire strategy at once. Add a few nodes, ensure they're connected correctly, save, then continue building. This makes it easier to identify issues.

Use Super Nodes for Reusability

If you find yourself recreating the same logic across strategies, save it as a Super Node. This promotes consistency and saves time.

Navigation