PMI Explorer Viewer Example

Table of Contents

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

The PMI Explorer Viewer displays Product Manufacturing Information from MTKWEB files. It keeps the model structure and PMI structure side by side, lets users enable PMI from selected model nodes, applies saved views, and exposes semantic PMI information.

Preview

PMI Explorer Viewer

What It Demonstrates

Use this example when a model carries PMI:

• build a model structure and a PMI structure in the same viewport;
• select which model nodes should contribute PMI;
• toggle model and PMI visibility independently through trees;
• apply PMI saved views, including camera restoration and PMI visibility;
• display semantic PMI components and attributes for selected PMI elements.

Unlike the base viewer, PMIExplorerViewer owns separate model and PMI structures plus separate highlight managers. This keeps model geometry, graphical PMI, and semantic PMI selection independent.

User Flow

1. Load a model that contains PMI.
2. Enable PMI for model nodes that have PMI data.
3. Browse the generated PMI tree.
4. Select saved views to restore camera and PMI visibility.
5. Select PMI elements to inspect semantic information.

Key Files

User Interface Components

Source	Description
PMIExplorerViewer react/src/pages/pmi-explorer-viewer/PMIExplorerViewer.tsx	Main page component. It renders the model tree, PMI source buttons, highlight mode selector, saved-view selector, PMI tree, semantic panel, and viewport.
SemanticInformationPanel react/src/pages/pmi-explorer-viewer/ui/SemanticInformationPanel.tsx	Shows semantic PMI rows for selected PMI elements with semantic components or attributes.
NoRepresentationMarker react/src/pages/pmi-explorer-viewer/ui/NoRepresentationMarker.tsx	Marks model parts that have no visual representation.
NoGraphicalPMIMarker react/src/pages/pmi-explorer-viewer/ui/NoGraphicalPMIMarker.tsx	Marks PMI elements that have semantic data but no graphical PMI geometry.
Tree react/src/common/ui/tree/Tree.tsx	Renders both the model tree and PMI tree, with different node icons, title renderers, checkability rules, and filters.
SemanticInformationRowCollector react/src/pages/pmi-explorer-viewer/semantic-information/SemanticInformationRowCollector.ts	Visits semantic PMI components and attributes to produce table rows.

Core Logic Classes

Source	Description
PMIExplorerViewer shared/src/viewers/pmi-explorer-viewer/PMIExplorerViewer.ts	Loads the model, builds model and PMI structures, manages PMI source nodes, saved views, PMI visibility, and camera restoration.
PMIStructureBuilder shared/src/features/pmi/structure/PMIStructureBuilder.ts	Builds PMI tree nodes and graphical PMI objects from enabled model nodes.
PMIStructure and PMI nodes shared/src/features/pmi/structure/PMIStructure.ts	Store PMI roots, groups, elements, saved-view names, and PMI element naming helpers.
PMIHighlightManager shared/src/features/pmi/interaction/PMIHighlightManager.ts	Maps PMI intersections and PMI tree nodes to highlight state.
ModelStructureBuilder and ModelHighlightManager shared/src/features/model/	Build and highlight the product model shown alongside PMI.
shared/src/features/pmi/	Contains PMI structure building, highlight mapping, and PMI tree node types.