---
title: TimeMachine - Views
---

## Read Model View

Displays the state of the read model at each version as interactive cards.

### Features

- Property-by-property display
- Change highlighting
- Nested object navigation
- Timeline integration
- Hover preview

### Property Display

Properties are shown in a table format:

| Property | Value |
|----------|-------|
| name     | Product A |
| price    | $89.99 |
| status   | active |
| category | Electronics |

### Change Highlighting

When hovering over a timeline point or transitioning between versions, changed properties are highlighted:

- **Green highlight**: Value increased/added
- **Red highlight**: Value decreased/removed
- **Yellow highlight**: Value changed

### Nested Objects

Click object or array properties to drill down:

```text
Properties:
  name: "Product A"
  price: 89.99
  metadata: [Object] →    ← Click to expand
```

Navigating into metadata:

```text
metadata:
  created: "2024-01-01"
  updated: "2024-01-10"
  version: 3
```

Use breadcrumb navigation to return to parent level.

### Array Display

Arrays show item count and are expandable:

```text
tags: [Array of 3] →
```

Expanded view shows array items:

```text
tags:
  [0]: "electronics"
  [1]: "sale"
  [2]: "featured"
```

### Card Navigation

- Click nested objects/arrays to navigate deeper
- Use breadcrumbs to navigate back up
- Scroll within cards for long content
- Cards prevent version changes while scrolling

## Events View

Shows all events across all versions in chronological order.

### Event List

```text
Event Type          Timestamp
─────────────────  ──────────────
ProductCreated     2024-01-01 10:00
PriceUpdated       2024-01-05 14:30
ProductPublished   2024-01-10 09:15
StockUpdated       2024-01-12 16:45
```

### Event Details

Click any event to expand its full payload:

```json
PriceUpdated - 2024-01-05 14:30:00

Event Data:
{
  "oldPrice": 99.99,
  "newPrice": 89.99,
  "reason": "promotional discount"
}
```

### Filtering Events

Search or filter events by:

- Event type
- Date range
- Property changes
- Event payload content

### Event Timeline

Events are displayed chronologically, making it easy to:

- See the sequence of changes
- Identify patterns
- Find specific events
- Understand causality

### Event Correlation

Related events are grouped or linked:

```text
ProductCreated
  └─ PriceSet
  └─ CategoryAssigned
  └─ InitialStockSet
```

## View Switcher

Toggle between views using the switcher:

```text
[📦 Read Model] | [📋 Events]
```

### Read Model View

- Focus on current state
- Navigate through time
- See property changes
- Interactive exploration

### Events View

- Focus on what happened
- Chronological list
- Event details
- Audit trail

## Comparison View

(If implemented) Compare two versions side-by-side:

```text
Version 1 (2024-01-01)  |  Version 3 (2024-01-10)
─────────────────────── | ───────────────────────
name: Product A         |  name: Product A
price: 99.99           |  price: 89.99 ⚠️
status: draft          |  status: active ⚠️
```

## Best Practices

### Read Model View

1. **Start at beginning**: View initial state first
2. **Progress forward**: Watch evolution chronologically
3. **Focus on changes**: Pay attention to highlighted properties
4. **Explore nested data**: Drill into complex objects
5. **Use hover preview**: Quickly check nearby versions

### Events View

1. **Filter strategically**: Narrow down to relevant events
2. **Expand details**: Review event payloads for context
3. **Follow sequences**: Track related events
4. **Export if needed**: Save event history for analysis

### General

1. **Switch views**: Use both for complete understanding
2. **Take notes**: Document important changes
3. **Screenshot states**: Capture evidence for audits
4. **Test scenarios**: Replay events to validate logic