Skip to content

Viewer Panel Introduction

The Viewer Panel is your primary interface for working with BIM elements. It embeds directly into your BIM viewer and provides real-time access to element data.

What is the Viewer Panel?

The Viewer Panel is a React-based application that:

  • Connects to your BIM viewer (Desite MD, Trimble Connect, etc.)
  • Syncs element selection between the viewer and Enjade
  • Displays and edits element properties
  • Tracks all changes with version history
  • Supports batch operations for multiple elements

Panel Layout

Screenshot Placeholder

TODO: Add screenshot of viewer panel layout

Viewer Panel Layout Placeholder

The complete viewer panel showing header with project selector, tab bar (Properties | History | Batch), main content area with element properties, and footer with connection status

The viewer panel has a clear hierarchical layout:

┌────────────────────────────────────────────┐
│  Header (Project selector, Search, Status) │
├────────────────────────────────────────────┤
│  Tab Bar (Properties | History | Batch)    │
├────────────────────────────────────────────┤
│                                            │
│  Main Content Area                         │
│  - Element properties                      │
│  - Type assignments                        │
│  - Classification info                     │
│                                            │
├────────────────────────────────────────────┤
│  Footer (Connection status, Actions)       │
└────────────────────────────────────────────┘

Key Features

Real-time Sync

When you select an element in your BIM viewer, the panel automatically:

  1. Detects the selection change
  2. Fetches element data from Enjade
  3. Displays properties and metadata
  4. Highlights the element in the viewer

Property Editing

Edit element properties directly in the panel:

  • Text, number, and date fields
  • Dropdown selections
  • Multi-select options
  • Custom property types

Version History

Every change is tracked:

  • See who changed what and when
  • Compare versions
  • Understand the evolution of data

Type Assignments

Assign elements to:

  • Abstract Types - Conceptual categorization
  • Class Types - Technical classification
  • Specifications - Detailed requirements

Getting Started

  1. Select a project from the header dropdown
  2. Select an element in your BIM viewer
  3. View properties in the Properties tab
  4. Make changes and save

Connection Status

The panel shows connection status in the header:

Status Meaning
🟢 Connected Synced with viewer and backend
🟡 Connecting Establishing connection
🔴 Disconnected No connection - check network

Screenshot Placeholder

TODO: Add screenshot of connection status indicators

Connection Status Placeholder

The panel header showing different connection status states with visual indicators

Next Steps