# Visualization Tab

The Visualization tab displays cell crops from `crops.zarr` in a grid, with traces plotted alongside. Workspace must be set and validated on the landing page first.

## Prerequisites

1. **Set workspace on landing page**: Select a folder that contains `crops.zarr` (typically your processing output directory).
2. Click **Load** to validate. The workspace must pass validation before navigating to Visualization.
3. Once validated, click **Visualization** to open the tab.

## Workflow Overview

1. **Workspace** – Set and validate on landing (folder with `crops.zarr`)
2. **Select position** – Choose which position to view
3. **Select channel** – Choose which channel’s crops to display
4. **Browse frames** – Use the frame slider to step through time
5. **Inspect crops and traces** – View the crop grid and trace plot

## Step-by-Step Guide

### 1. Set Workspace (Landing Page)

1. On the landing page, click **Browse** next to Workspace Folder.
2. Select the output directory that contains `crops.zarr` (same as the Processing “Save Directory”).
3. Click **Load** to validate. A “Workspace valid” message confirms the setup.
4. Click the **Visualization** card to open the tab.

### 2. Select Position and Channel

The Visualization page shows:

- **Position** – Dropdown of position IDs from `crops.zarr`.
- **Channel** – Dropdown of channel names (e.g. `pc_ch_0`, `fl_ch_1`).
- **Frame** – Slider or controls to move through time frames.

Use the dropdowns to pick the position and channel to inspect.

### 3. View Crops and Traces

- **Crops grid**: A paginated grid of cell crops for the chosen position, channel, and frame. Use the page controls to browse cells.
- **Traces plot**: Plots traces for the visible crops at the current frame. Traces are loaded from `traces/position_{id}.csv`.

Crop images are streamed via WebSocket from the backend. The trace plot updates when you change the page or frame.

## Output Structure

The workspace folder should contain:

```
output_dir/
├── crops.zarr/          # Per-cell crops and metadata
├── raw.zarr/            # Raw frames and intermediate arrays
├── traces/              # Per-position trace CSVs
│   ├── position_0.csv
│   └── ...
└── processing_config.yaml
```

## Tips

- Ensure the workspace path includes `crops.zarr` and `traces/` from a completed processing run.
- If you see “Set workspace and source on the landing page”, return to the root and run Load after selecting the workspace folder.
- Use the frame controls to move through time and inspect cell behavior.

## Troubleshooting

**“Set workspace and source on the landing page”**
- Go to the landing page, select the workspace folder, and click Load.
- Confirm validation succeeds before reopening Visualization.

**“crops.zarr not found”**
- Ensure the selected folder is the processing output directory (the one containing `crops.zarr`).
- Run Processing first to create `crops.zarr` and `traces/`.

**Crops or traces don’t load**
- Check that Processing completed successfully for the chosen position.
- Verify the backend API is running (default `http://localhost:8765`).

## Next Steps

- Use the **Analysis** tab to compare samples and fit models to merged trace data.
- See [Merge Workflow](merge-workflow.md) for combining multiple samples before analysis.