rendering "hop links" for a predicate - view-a-LOD/Valeros GitHub Wiki

Sometimes, the information you want to show to the user is not directly available on the root node, but instead one (or more) hops away.

To prevent the need for creating custom render components for all these cases, we include a "hop link" (components/features/node/node-render-components/predicate-render-components/hop-components/hop-link) component.

As an example, in MDTO, the mdto:betrokkene predicate typically refers to a mdto:BetrokkeneGegevens node, which then refers to an mdto:Actor node that contains the actor's name.

To render the Actor's name instead of the mdto:BetrokkeneGegevens GUID, add a HopLinkComponent entry to the renderComponents/[RenderMode.ByPredicate] field in config/settings.ts:

{
    component: HopLinkComponent,
    predicates: ['http://www.nationaalarchief.nl/mdto#betrokkene'],
    hopLinkSettings: {
        preds: ['http://www.nationaalarchief.nl/mdto#Actor'],
    }
}

Note that to render nodes more than one hop away from the root node, you can simply add more predicates in the preds field in sequential order (see Hop Image for an example).

If you want visually hide the hop from the user, simply add a showHops: false parameter to the hopLinkSettings:

hopLinkSettings: {  
	preds: ['http://www.nationaalarchief.nl/mdto#Actor'],
	showHops: false,
}