Advanced Model Tree Search

Earlier this year Tech Soft 3D conducted an internal hackathon. The winner of the second prize was this advanced search tool for HOOPS Communicator which is posted here.

The default HOOPS Communicator UI offers a fairly sophisticated model tree that makes it easy to navigate through product structure information, access node properties and offers separate tabs for Types and Layers (if applicable). It does not however offer a search capability for a more advanced query and filtering through the model data. This is what this class provides.


var myModelTreeSearch = ModelTreeSearch.create("searchtools", hwv, startnode);

Creates a new ModelTreeSearch Object and displays it. The first parameter is the id of the div that the UI should be created in (it is possible to have multiple search windows at the same time). The second parameter is the webviewer object. The third (optional) parameter is the startnode. It is the node from which the search will be performed.

Before the search window is initially displayed all model properties are extracted and put into an internal hash. That can take a few seconds for large models.

Call this function when the size of the surrounding div changes.

Find the ModelTreeSearch object by div name

Deletes the ModelTreeSearch window and removes it from the DOM

This is a UI driven component so most of the interactions will happen through mouse/keyboard interactions at runtime. It is somewhat reactive and will adjust to various sizes though the parent div should be at least 300px wide and 400px high. Through a separate CSS file you can modify some aspect of its styling but if you need more customization I suggest delving into the source code.

The functionality of this class should be largely self-explanatory. You can combine multiple search filters with either an “and” or “or” (but not mixed). To get around this limitation you can first perform a search and then click on the “Sel:” checkbox which will limit all future searches to the selected entities.

When searching for text with “has” the default is a substring search so a search for “screw” will find “front screw” as well as “back screw”. If you need a precise search surround the search string in double quotes. If you want to find all nodes that “do not” have the search string put a “-“ in front of the search term. You can also combine multiple text searches by putting a “,” between them.

Type has wall,-curtainwall
This will find all walls except for curtain walls.

“Node Chain” is a special property that performs the search on the complete path to a node. Its an easy way to filter the search by a certain floor in a building for example.

Below is the main code for the ModeltreeSearch class. It has no external dependencies except for the relevant HOOPS Web Viewer libraries as well as jQuery. Simply include the js and css file into your project with your other js files. It is important to note that this code is not production-ready and provided “as-is”. It is really meant as a starting point for your own development and as an example for some of the functionality and concepts used in HOOPS Communicator.

ModelTreeSearch.css (1.3 KB)
ModelTreeSearch.js (23.3 KB)

1 Like

I have updated the tool to now offer support for SpaceBoundary relationships in an IFC file. When adding a search filter you can now select SpaceBoundary as one of the options. If this option is selected the search will be performed on the relating SpaceBoundary elements of every node. See the image for an example of a search that finds all Wall elements that are part of the Kitchen or Bedroom spaces.

Adding this search filter will slow down the search a bit, especially for larger models. Also please make sure to update HOOPS Communicator to 2021 SP2 U1 (or higher) to get access to the new relationship functionality for IFC files.

Please leave a comment if you have any questions or suggestions.

ModelTreeSearch.js (24.4 KB)