Model Explorer Viewer Example

Table of Contents

• Preview
• What It Demonstrates
• User Flow
• Key Files
  • User Interface Components
  • Core Logic Classes

The Model Explorer Viewer builds on the structure viewer and adds a property panel for selected model or drawing tree nodes. It is a reference for applications that need hierarchy navigation and basic property inspection.

Preview

What It Demonstrates

Use this example to study inspection workflows:

• reuse the structure viewer's loading, tree, visibility, and selection logic;
• listen to selected structure nodes;
• display names, types, instance transformations, and drawing-specific values in a side panel when available;
• keep the property panel empty until a compatible selection exists.

The shared ModelExplorerViewer intentionally adds no new core state beyond ModelStructureViewer; the extra value is in the React property panel and its selection-to-properties mapping.

User Flow

1. Load a model.
2. Select a node in the tree or pick geometry in the viewport.
3. Review the properties shown for the selected item.
4. Change the selection to inspect another element without reloading the model.

Key Files

User Interface Components

Source	Description
ModelExplorerViewer react/src/pages/model-explorer-viewer/ModelExplorerViewer.tsx	Main page component. It combines structure panel, viewport, and property panel in a three-pane splitter.
PropertyPanel react/src/pages/model-explorer-viewer/ui/property-panel/PropertyPanel.tsx	Displays general properties of selected model and drawing tree nodes, plus instance transformations and drawing-specific values where available.
ModelStructureContainer react/src/features/model-structure-container/ModelStructureContainer.tsx	Supplies the model tree that drives the selected-node list.
DrawingStructureContainer react/src/features/drawing-structure-container/DrawingStructureContainer.tsx	Supplies drawing tree selection when the viewer is in drawing mode.
PropertyTable react/src/common/ui/property-table/PropertyTable.tsx	Renders property rows in a reusable table format.

Core Logic Classes

Source	Description
ModelExplorerViewer shared/src/viewers/model-explorer-viewer/ModelExplorerViewer.ts	Names the example-specific shared viewer and inherits structure, selection, and visibility behavior from ModelStructureViewer.
ModelStructureViewer shared/src/viewers/model-structure-viewer/ModelStructureViewer.ts	Supplies the tree/scene synchronization used by the explorer.
Tree events shared/src/common/tree/Tree.ts	Emit nodeSelectStateChanged, which the React page listens to before updating PropertyPanel.
Model and drawing structure nodes shared/src/features/model/structure/ and shared/src/features/drawing/structure/	Carry the model or drawing data that the property panel inspects.