> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wuji.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

The Visualization View is the core workspace of Wuji Studio. After connecting a device, real-time data publishes through Topics. Use different panel types to view and analyze data.

## Enter Visualization

After connecting a device on the [Device Management](/en/docs/wuji-studio/device-connection) page, an **Enter Visualization** button appears in the Bottom action area. Click it to switch to the Visualization View and start viewing real-time data. You can also click the **Visualization** icon <svg width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{verticalAlign: 'middle', display: 'inline'}}><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M17 12h-2l-2 5-2-10-2 5H7" /></svg> in the Activity bar directly.

## Visualization View Overview

The four areas of the Visualization View are outlined in different colors. The table below covers what each area does and how to open or collapse it. The Panel area outlined in <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #FBBF24', borderRadius: '4px', verticalAlign: '-1px'}} /> is the default layout. To restore the default layout after changing it, right-click the current preset tab in the preset bar at the top (**Tactile Monitor** in the image below) and select **Reset to Default**. See [Troubleshooting > Restore the default layout](/en/docs/wuji-studio/troubleshooting#restore-the-default-layout).

<img src="https://mintcdn.com/wuji-0bbde051/GsT0bEnPZ_18e5HL/assets/source/images/en/wuji-studio/visualization-overview.png?fit=max&auto=format&n=GsT0bEnPZ_18e5HL&q=85&s=19fe2ac1b0c2a2a695e49a01b5c678eb" alt="Data Visualization" width="1438" height="898" data-path="assets/source/images/en/wuji-studio/visualization-overview.png" />

The Visualization View consists of the following areas:

| Area | How to Open | Description |
| - | - | - |
| Left Sidebar | Click the <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.122 13.878 1 12.5 1H3.5C2.122 1 1 2.122 1 3.5ZM12.5 14H7V2H12.5C13.327 2 14 2.673 14 3.5V12.5C14 13.327 13.327 14 12.5 14ZM2 3.5C2 2.673 2.673 2 3.5 2H6V14H3.5C2.673 14 2 13.327 2 12.5V3.5Z" /></svg> icon in the top-right corner to expand the <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #38BDF8', borderRadius: '4px', verticalAlign: '-1px'}} /> area | The left sidebar contains 2 panels:<ul><li>**Devices**: Shows connected device status</li><li>**Panel Settings**: Edits configuration of the currently selected panel (see [Panel types](/en/docs/wuji-studio/visualization/panel-types))</li></ul> |
| Panel area | The <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #FBBF24', borderRadius: '4px', verticalAlign: '-1px'}} /> area is always visible | Data visualization workspace with free drag-and-drop and split-view layout:<ul><li>Add panel: Click the **+** button in the workspace, select panel type</li><li>Remove panel: Click the close button on the panel title bar</li><li>Move panel: Drag the panel title bar to the target position</li><li>Split view: Drag a panel to the workspace edge for horizontal or vertical splitting</li><li>Resize: Drag the divider between panels</li></ul> |
| Right Sidebar | Click the <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M12.5 1H3.5C2.122 1 1 2.122 1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.122 13.878 1 12.5 1ZM2 12.5V3.5C2 2.673 2.673 2 3.5 2H9V14H3.5C2.673 14 2 13.327 2 12.5ZM14 12.5C14 13.327 13.327 14 12.5 14H10V2H12.5C13.327 2 14 2.673 14 3.5V12.5Z" /></svg> icon in the top-right corner to expand the <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #F472B6', borderRadius: '4px', verticalAlign: '-1px'}} /> area | The right sidebar contains 2 panels:<ul><li>**Variables**: Manages global variables in Studio</li><li>**Topics**: Browses available data Topics in a tree structure (see [Topic tree](#topic-tree))</li></ul> |
| Bottom bar | Click the <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M12.5 1H3.5C2.122 1 1 2.121 1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.121 13.878 1 12.5 1ZM14 12.5C14 13.327 13.327 14 12.5 14H3.5C2.673 14 2 13.327 2 12.5V11H14V12.5ZM14 10H2V3.5C2 2.673 2.673 2 3.5 2H12.5C13.327 2 14 2.673 14 3.5V10Z" /></svg> icon in the top-right corner to expand the <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #4ADE80', borderRadius: '4px', verticalAlign: '-1px'}} /> area | Collapsed by default. Contains 3 tabs:<ul><li>**RECORDING**: Data recording (see [Recording](/en/docs/wuji-studio/visualization/recording))</li><li>**PLAYER**: Data playback (see [Playback](/en/docs/wuji-studio/visualization/recording#data-playback))</li><li>**DEVICE LOG**: Device logs (see [Device logs](/en/docs/wuji-studio/visualization/device-logs))</li></ul> |

## Topic Tree

The **Topics** panel in the Right Sidebar displays all available data Topics. Topics are organized in a tree structure separated by `/` namespaces. When expanded, schema fields are shown hierarchically (separated by `.`), with support for array and struct nesting. Click a Topic to view its details, or drag it into a panel to subscribe to data.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.