Understanding Panels in Zeus.ai

Quick Answer

Zeus.ai has two main panel areas: the Chat Bar (bottom-left) for quick interactions, and the workspace panel area for detailed views. Depending on the layout, panels can be resized, collapsed, docked, or floated.

The Two Panel Areas

1. The Chat Bar (Primary Controls)

Location: Bottom-left corner of the screen Appearance: Dark, glass-like panel with rounded corners Purpose: Your command center for AI chat and map controls

What's inside:

• AI chat input field
• Back button
• Zoom and map controls
• Help and profile access

How to use:

• Click the input field to start typing
• Click buttons for their functions
• The bar expands when you start chatting

2. The Secondary Panel (Detail Views)

Location: Usually beside the map on desktop, depending on layout Appearance: Larger panel with tabs at the top Purpose: Detailed information and lists

What's inside:

• Multiple tabs (Sites, Location Analytics, Zeus.ai Chat, Layers, Base Map, etc.)
• Tab content area
• Resize and dock controls

Opening and Closing the Secondary Panel

To Open the Secondary Panel

Method 1: Click a location marker

1. Find a location on the map
2. Click the marker (pin)
3. The panel opens with Location Analytics for that location

Method 2: Click the Sites button

1. Look for the store icon (🏪) in the chat bar
2. Click it
3. The Sites tab opens in the secondary panel

Method 3: Click Layers or Base Map

The single "Map Settings" button was replaced by two chat-bar buttons — one for each tab:

1. Click the layers icon (📚) in the chat bar to open the Layers tab (clustering, filters, data-layer toggles)
2. Click the map icon (🗺️) in the chat bar to open the Base Map tab (map theme, labels, base cartography)
3. The tab you clicked opens in the secondary panel

To Close/Collapse the Secondary Panel

• Collapse: Use the collapse or expand affordance shown on the docked panel edge
• Hide completely: Click the Sites (store) button in chat bar again to toggle off
• The panel remembers its state when you switch tabs

Resizing Panels

Resizing the Secondary Panel Width

1. Find the resize edge: Hover your mouse over the left edge of the secondary panel
2. Look for the cursor change: Your cursor becomes a resize arrow (↔️)
3. Drag to resize: Click and drag left to make it wider, right to make it narrower

Minimum and Maximum Sizes

Panel	Minimum Width	Notes
Primary (Chat Bar)	300px	Ensures chat input and controls remain usable
Secondary Panel	300px	Ensures tab content remains readable

Maximum widths are dynamic:

• Each panel can expand up to the available space minus the other panel's width
• Panels cannot overlap each other - they respect each other's boundaries
• You can resize up to about half the screen width when both panels are open

Docking and Undocking Panels

What is Docking?

• Docked: Panel is attached to the right edge of the screen
• Undocked: Panel floats freely over the map

To Undock a Panel (Make it Float)

1. Find the panel header or dock handle in the workspace panel
2. Click and drag the panel away from the edge
3. Release: The panel now floats freely over the map

To Dock a Panel (Attach it Back)

Method 1: Drag to Edge

1. Drag the floating panel toward the right edge
2. Look for the electric blue glow: An indicator appears along the edge showing where it will dock
3. Release: The panel snaps into place

Method 2: Click Pin Button

1. Look for the pin icon (push_pin) in the floating panel header
2. Click it to instantly dock the panel to the edge

Benefits of Each Mode

Docked	Undocked (Floating)
Clean, organized layout	See more of the map
Panel stays in place	Move panel anywhere
Easy to find	Position over specific areas

Floating Panel Boundaries

When floating, panels stay within the visible screen area with different rules for dragging vs resizing.

Dragging Boundaries:

Panels can be dragged to their dock edge to re-dock:

Edge	Primary Panel	Secondary Panel
Top	20px from viewport top	20px from viewport top
Left	Can reach left edge (docks there)	20px from viewport left
Right	20px from viewport right	Can reach right edge (docks there)
Bottom	Depends on layout mode	Depends on layout mode

Resize Boundaries:

When resizing, both panels respect 20px padding on all edges:

Edge	Both Panels
Top	20px from viewport top
Left	20px from viewport left
Right	20px from viewport right
Bottom	Depends on layout mode

• If you try to resize past a boundary, the resize stops at the boundary and the panel size adjusts accordingly

Navigator Mode vs Modern Mode:

In Navigator Mode (Multi-panel Layout), the chat bar is integrated into the top toolbar, so floating panels can get within 20px of the bottom of the screen.

In Modern Mode (Floating Layout), the chat bar floats at the bottom of the screen, so floating panels stay above it (approximately 120px from the bottom) to avoid overlap.

Collapsing Panels

Collapsing the Docked Panel

1. Find the edge controls on the docked panel
2. Collapse the panel using the current expand/collapse affordance
3. When collapsed: A slim edge control remains visible
4. Use the edge control to expand it again

Collapsing a Floating Panel

1. Click the header of the floating panel
2. Or click the chevron (expand_more) in the header
3. Panel collapses to just the header bar
4. Click again to expand

Peek Feature (Docked Panels)

• Hover over a collapsed panel to temporarily "peek" at its contents
• Move mouse away and it slides back to collapsed state
• Great for quick glances without fully expanding

Why Collapse?

• See more of the map temporarily
• Keep your panel configuration while maximizing map view
• Quick toggle without closing
• Peek feature lets you check content without committing to full view

Tabs Within the Secondary Panel

The secondary panel contains multiple tabs. Only one tab is visible at a time.

Available Tabs

Tab	Material Icon	Purpose
Sites	store	Browse and filter all locations
Location Analytics	analytics	View detailed insights for a selected location
Zeus.ai Chat	chat	Expanded view of your AI conversation
Layers	layers	Clustering, filters, and data-layer toggles
Base Map	map	Map theme, labels, base cartography

Switching Between Tabs

1. Look at the top of the panel: Tab buttons are displayed there
2. Click a tab: Content switches to that tab
3. The active tab is highlighted

Adding New Tabs

1. Click the + button in the tab bar
2. Select the tab type from the dropdown
3. New tab appears and becomes active

Panel Keyboard Shortcuts

Shortcut	Action
Escape	Close current panel/dialog
Tab	Move between interactive elements

Tips

• Panels remember their size when you close and reopen
• Use floating panels when you need to see map areas behind the docked position
• Collapse instead of close if you want to return to the same view

Troubleshooting

Panel Won't Open

• Try clicking a location marker on the map
• Click the Sites (🏪) button in the chat bar
• Refresh the page if it persists

Panel is Behind Something

• Check if another dialog is open
• Look for floating panels off-screen (resize your browser)
• Click directly on the panel to bring it to front

Can't Resize Panel

• Make sure you're dragging the edge, not the header
• Check that your cursor shows the resize arrow (↔️)
• Panels have minimum sizes they can't go below

Related Topics

• Understanding the Screen Layout
• Understanding Workspace Tabs
• Icon Guide