Model Elements page overview

Use the Model Elements page to browse model elements and their related data.

To fetch, group, and filter model elements, see Fetching model elements.

Figure: Model Elements page

Callout	Section	Description
1	Model icon	To access the Model Elements page, hover over Model icon, then in the drawer, click Model Elements.
2	Fetch pane	Fetch model elements based on their element category and type. You can also fetch elements with telemetry data only.
3	Group and Filter pane	Group and filter the fetched elements, as well as apply color tags to the fetched elements in the elements list.
4	Model Elements pane	View the model elements in more detail. Click a model element to view its related items in the Related Items pane.

Changing models

With multi-model support enabled, you can change models from the Models pane. For more information, see multi-model support.

From the models selector, select the model, then click CHANGE MODELS.

Figure: Models pane and selector in Model Elements page

Callout	Description
A	Model selector
B	CHANGE MODEL button

Opening the Model Elements page

In this scenario, the user interacts with the interface in the following sequence:

1. The user hovers over the Model icon in the Navigation view and the Navigation drawer opens to display the Model Elements and Navigator buttons. See the code walkthrough.
2. The user clicks the Model Elements button in the navigation drawer and the Model Elements page mounts. See the code walkthrough.

The following sections break down these actions to understand the data flow and the React components, user config sections, and scripts used to achieve this:

Model icon hover opens navigation drawer

The configuration that enables this user interface transition is defined in the "groupedPages" section of a given user config, such as the project admin user config at scripts/NextScriptEngine/userconfigs/iaf_dbm_projadmin_uc.exp.

The first property of the groupedPages entry is the icon in the navigation view:

"groupedPages": {  "2D/3D": {    "icon": "inv-icon-svg inv-icon-assets", //icon library reference    "position": 1, //order for icon to appear in the menu order     "pages": [      //definition of the page buttons to appear in the navigation drawer    ]  },  ...}

When the user hovers over the navigation view icon, a drawer opens and displays the page buttons defined in the "pages" array:

"groupedPages": {  "2D/3D": {    "icon": "inv-icon-svg inv-icon-assets",    "position": 1,    "pages": [      {        "page": "Navigator",        "handler": "navigator"      },      {        "page": "Model Elements",        "handler": "modelelems"      }    ]  },  ...}

These handlers reference the page handlers defined in the "handler" section of a given user config, in this case, the "modelelems" handler. The Model Elements button text and icon are defined in handlers.modelelems.title and handlers.modelelems.icon properties:

"handlers": {  "modelelems": {    "title": "Model Elements",    "icon": "fas fa-building fa-2x", //icon library reference    ...  },  ...}

Model Elements button mounts the Model Elements page

When the user clicks the Model Elements button, its handler triggers. The groupedPage "pages.handler" value points to the "modelelems" handler defined in the "handler" section of a given user config.

The handler mounts the component at the path defined in handlers.modelelems.pageComponent at the path defined in handlers.modelelems.path:

"handlers": {  "modelelems": {    "title": "Model Elements",    "icon": "fas fa-building fa-2x",     "shortName": "model",    "description": "Model Element View",    "pageComponent": "entities/EntityView", //component reference in the ipaCore.components folder    "path": "/modelelems", //routing path    ...  },  ...}