Viewer Feature: Selective Loading

Model loading time is one of the most important if not the most important aspect of the Viewer. The loading time may depend on the size and/or complexity of the model. And in some cases, users may prefer to see just some features of their model instead of the whole model. To address these requirements, the Viewer development team has implemented a new feature known as selective loading.

What is Selective Loading?

Selective loading is a new feature available for SVF2 models that lets developers load just a subset of their designs into the Viewer based on a specific set of filters. The feature currently supports two types of filters:

Metadata filters - used to select elements that have a specific combination of properties defined for them
Spatial filters used to select elements based on their location within the model

Using this feature you can improve the performance of your application since the model loading time will be significantly faster, or you can implement "saved views" feature, allowing your users to load just a subset of their designs based on previously stored filters.

How Can I Use it?

Metadata Filters

Metadata filters are based on the Model Properties query language. There are two ways to specify a property:

Using a property hash (for example, s.props.p6637df3c) which is a unique ID generated from the property name, category, and potentially other attributes
Using a lookup syntax (for example, ?Base Constraint) which can be used when you are certain that there's exactly one property in your design metadata database with this name

Tip: you can find the hashes of all properties in your model using the (asynchronous) model.getPropertyHashes() method.

The following code sample loads all design elements with a specific combination of metadata:

viewer.loadDocumentNode(doc, viewable, {
    filter: {
        property_query: [
            {
                '$like': ['s.props.p6637df3c', "'%Concrete%'"] // "Structural Material" contains the word "Concrete"
            },
            // ... or ...
            {
                '?Base Constraint': "'Level 1'", // "Base Constraint" is set to "Level 1"
                // ... and ...
                '$gt': ['?Volume', 5.0] // "Volume" is greater than 5.0 units
            }
        ]
    }
});

Viewer combination with Property Values

Spatial Filters

The following code sample lets you load model elements enclosed within a specific axis-aligned bounding box:

viewer.loadDocumentNode(doc, viewable, {
    filter: {
        spatial_query: {
            '$encloses': [{ 'aabox': [-90, 50, -40, +90, +150, +40] }]
        }
    }
});

Viewer Enclosed Elements

Combined Filters

You can combine metadata and spatial filters into a single query as well. The following code sample loads design elements that are both enclosed within a specific axis-aligned bounding box, and also include the word "Concrete" in their "Structural Material" property:

viewer.loadDocumentNode(doc, viewable, {
    filter: {
        property_query: {
            '$like': ['s.props.p6637df3c', "'%Concrete%'"] // "Structural Material" contains the word "Concrete"
        },
        // ... and ...
        spatial_query: {
            '$encloses': [{ 'aabox': [-90, 50, -40, +90, +150, +40] }]
        }
    }
});

Combined filters