---
title: PivotViewer - Interactions
---

## Zoom

### Mouse Wheel

Scroll up to zoom in, scroll down to zoom out.

### Zoom Controls

Use the zoom slider or buttons in the toolbar:

- **Zoom In** button: Increase zoom level
- **Zoom Out** button: Decrease zoom level
- **Reset** button: Return to default zoom

### Programmatic Zoom

Access zoom controls through component state if needed.

## Pan

Click and drag anywhere in the collection view to pan around.

### Scroll Behavior

- Automatic scrolling when content exceeds viewport
- Smooth panning for natural feel
- Momentum scrolling on touch devices

## Filter

### Opening Filter Panel

Click the filter icon in the toolbar to open the filter panel.

### Categorical Filters

Check or uncheck values to include/exclude them:

```text
Status:
☑ Todo
☑ In Progress
☐ Done
```

### Range Filters

Adjust sliders to set minimum and maximum values:

```text
Price: [$0 ━━●━━━━━━━━ $1000]
```

### Search

Type in the search box to filter by text across specified fields:

```text
Search: [react components____]
```

### Clearing Filters

- Click individual filter's clear button
- Use "Clear All Filters" button

## Dimension Selection

Click dimension labels (axis labels) at the top to change grouping:

```text
[Status] | Priority | Assignee | Date
```

The selected dimension determines how items are organized into groups.

## Card Selection

Click any card to view its details:

1. Card is highlighted
2. Detail panel slides in from the right
3. Full information is displayed

### Closing Details

- Click the close button in detail panel
- Click outside the detail panel
- Select a different card

## View Modes

Toggle between:

- **Collection View**: Grid of cards grouped by dimension
- **Detail View**: Focus on selected item with full details

## Keyboard Shortcuts

Common shortcuts (if implemented):

- `Esc`: Close detail panel
- `Arrow keys`: Navigate between cards
- `+/-`: Zoom in/out
- `/`: Focus search box

## Touch Gestures

On touch devices:

- **Pinch**: Zoom in/out
- **Swipe**: Pan around collection
- **Tap**: Select card
- **Double-tap**: Quick zoom

## Example: Full Interaction Flow

1. **Start**: View all items grouped by Status
2. **Filter**: Open filters, select only "High" priority
3. **Group**: Click "Assignee" dimension to regroup
4. **Search**: Type "UI" to find UI-related items
5. **Zoom**: Zoom in to see more detail
6. **Pan**: Drag to view different groups
7. **Select**: Click a card to view details
8. **Action**: Edit task from detail panel
9. **Reset**: Clear filters to see all items again

## State Persistence

The component remembers:

- Current zoom level
- Scroll position
- Active dimension
- Applied filters
- Selected item

This provides a consistent experience as users interact with the data.

## Multi-step Filtering

Users can combine multiple filters:

1. Set status filter: "In Progress"
2. Set priority range: 5-10
3. Search for: "frontend"
4. Group by: "Assignee"

All filters work together to narrow down the view.

## Responsive Behavior

The component adapts to screen size:

- Adjusts card size for available space
- Collapses filter panel on mobile
- Touch-friendly controls on tablets
- Keyboard-optimized on desktop

## Performance During Interaction

- Smooth 60fps animations
- Instant filter updates (Web Worker)
- Progressive rendering for large datasets
- Optimized re-renders on state changes