Visual View

The Visual View is a freeform canvas board builder that lets you assemble dashboards, Obeya room walls, and information radiators by placing widgets on an infinite canvas. Unlike the structured grid of the main dashboard, the visual view gives you complete freedom over positioning, sizing, and composition.

Accessing the Visual View

Navigate to any project and select the Visual tab in the project header. The URL follows the pattern:

/{workspaceSlug}/{projectSlug}/visual

The server resolves the workspace and project slugs to an internal project ID before rendering, so you never see raw IDs in the URL.

Canvas Basics

Pan and Zoom

• Pan — click and drag on the empty canvas background to move your viewport.
• Zoom in — scroll wheel up, or click the + button (ZoomIn icon) in the zoom toolbar.
• Zoom out — scroll wheel down, or click the - button (ZoomOut icon) in the zoom toolbar.
• Fit to screen — click the Maximize icon to reset pan and zoom so all widgets are visible.

The zoom range is 25% to 300%, with a step of 10% per scroll tick. These limits are defined as MIN_ZOOM = 0.25 and MAX_ZOOM = 3.0 in the component constants.

Grid Snapping

Toggle snap-to-grid with the grid icon (LayoutGrid) in the toolbar. When enabled, widgets align to an invisible grid as you drag or resize them, making it easy to create clean, evenly spaced layouts.

Toggle grid lines with the 3x3 grid icon (Grid3X3) to display visual grid guides on the canvas background. Grid lines are purely visual and do not affect widget behavior.

Widget Palette

The left sidebar contains the Widget Palette — a categorized list of widget types you can add to the canvas. Click a widget type to place a new instance at the center of your current viewport.

Available Widget Types

Widget	Description
Sticky Note	A colored note for text annotations, reminders, or labels. Choose from multiple group colors defined in GROUP_COLORS.
KPI Card	Displays a single KPI value with its name, unit, and traffic-light alert status (green/amber/red).
KPI Chart	A trend chart showing historical KPI values over time.
HSE Cross	A safety cross (HSE) visualization showing daily safety status for the current month.
Action List	A compact list of open actions for the board with status and assignee.
Text	A rich-text block for headings, paragraphs, or formatted content.
Image	An uploaded or linked image for logos, photos, or diagrams.

Working with Widgets

Moving Widgets

Click and drag any widget to reposition it on the canvas. If snap-to-grid is enabled, the widget snaps to the nearest grid intersection when released. The canvas uses CSS absolute positioning within a transform group for pan/zoom.

Resizing Widgets

Each widget has resize handles on its edges and corners. Drag a handle to change the widget's width and height. Minimum dimensions are enforced per widget type to prevent widgets from becoming too small to be useful.

Configuring Widgets

Double-click a widget (or click the gear icon) to open the Widget Config Dialog. Configuration options depend on the widget type:

• Sticky Note — edit text content and select a color from the GROUP_COLORS palette.
• KPI Card — select which KPI definition to display from the project's KPI list.
• KPI Chart — choose the KPI and configure the time range for the trend line.
• HSE Cross — configure the safety metric source.
• Action List — filter by action status or assignee.
• Text — edit content with the rich text editor.
• Image — upload a file or enter a URL.

Deleting Widgets

Select a widget and press Delete or click the trash icon in the widget toolbar to remove it from the canvas.

Persistence

Canvas state — including all widget positions, sizes, types, configurations, and viewport pan/zoom — is saved in two layers:

1. localStorage — immediate local cache keyed by probeya-visual-canvas-v2-{projectId}. This provides instant restoration when you revisit the page, even before server data loads.
2. Server (JSONB) — a debounced save (500 ms after the last change) persists the full canvas state to the database via the boards.saveCanvasLayout tRPC mutation.

Automatic saving

You do not need to manually save. Every drag, resize, add, or delete triggers an automatic save after a short debounce. The localStorage layer ensures your work is preserved even if you close the browser before the server save completes.

Architecture

The visual view uses HTML/CSS positioning rather than Canvas or WebGL rendering. The architecture consists of:

• Outer container — flex layout with the Widget Palette sidebar on the left and the canvas area on the right.
• Canvas container — overflow hidden, clips the canvas to the viewport.
• Transform group — a <div> with CSS transform: translate(x, y) scale(zoom) for pan and zoom.
• CanvasWidget components — absolutely positioned within the transform group.

Use Cases

• Obeya Room Walls — recreate a physical Obeya room digitally with KPI cards, action lists, and sticky notes arranged in SQCDP categories.
• Shift Handover Boards — display real-time KPIs and open actions for the incoming shift.
• Information Radiators — build large-screen dashboards for shopfloor TVs using the Andon integration.
• Project War Rooms — assemble all critical project metrics in one visual space during intense delivery phases.

Tips

Performance

The visual view uses HTML/CSS positioning rather than Canvas or WebGL. This keeps the implementation simple and accessible but means very large boards (100+ widgets) may see reduced performance on low-end devices.

• Use consistent widget sizes and grid snapping for a clean, professional layout.
• Combine KPI Cards in a row for an at-a-glance SQCDP summary.
• Place sticky notes as section headers to organize your canvas into zones.
• Use the Fit to Screen button after adding multiple widgets to ensure they are all visible.

Troubleshooting

Problem	Solution
Widgets not saving	Check your network connection. The server save requires connectivity. Local changes are cached in localStorage as a backup.
Canvas feels slow	Reduce the number of widgets. HTML/CSS rendering is optimized for moderate layouts (under 100 widgets).
Widget snapping to wrong position	Toggle snap-to-grid off for fine-grained placement, then re-enable when you want alignment.
Zoom too close or too far	Use the Maximize button to fit all widgets to screen, then zoom to the desired level.

Next Steps

• Board View — manage items in a structured Kanban layout.
• Dashboard — the configurable grid-based organization dashboard.
• Timeline View — plan work on a Gantt-style timeline.