Skip to content

Rendering nodes and labels

Simon edited this page Jul 11, 2024 · 6 revisions

Nodes are typically rendered using the node-link component (components/node/node-link). Basic usage:

<app-node-link [url]="id" />

This is a "smart" component, in the sense that it retrieves its own label if no label is passed through the label input property (see the Label retrieval and caching section below). Of course, you can also set the node's label explicitly:

<app-node-link [url]="id" [label]="label" />

If you want to render a node and its label, but do not want to make it clickable, use the disabled property:

<app-node-link [url]="id" [disabled]="true" />

Label highlighting

By default, node labels are highlighted when there's an exact match with the search service's (services/search.service.ts) query string (queryStr).

You can turn off this behavior through the node-link component's shouldHighlight property:

<app-node-link [url]="id" [shouldHighlight]="false" />

Tip

If you want to change highlighting functionality (e.g., making use of a fuzzy match) see the node-label component's (components/node/node-label) getLabelWithHighlightsHtml function for the implementation.

Label retrieval and caching

To prevent excessive triple store label requests for each single rendered node, node label requests are batched and locally cached during the user's session.

All node labels are retrieved from the node-link component's cachedLabel getter, through the cache service (services/cache.service.ts).

In the cache service, an async loop checks every X ms (X is configurable in config/config.ts) if there are new labels to retrieve in the cacheQueuedLabelsInBatch function.

All retrieved labels are stored in the service's labels dictionary object, and rendered by components that need them such as node-link.