New `Special Button` feature for record viewer #335

Merged

jsheunis merged 1 commit from special-buttons into main

2026-02-13 14:24:55 +00:00

jsheunis commented

2026-02-13 14:20:10 +00:00

Owner

New `Special Button` feature for record viewer

Records might have properties (via RDF statements) that are best viewed as a button to click on, e.g. a download URL or a link to an external homepage or similar. This new feature allows buttons to be rendered for configured 'special properties', where the configuration includes identifying the special property, how to find it (relative to the parent record), which exact value to find, and how to turn it into a link. For example:

component_config:
  NodeShapeViewer:
    specialButtons:
      DownloadUrl:
      slot: dlthings:characterized_by
      match:
          - key: rdf:type
          val: dlthings:Statement
          - key: rdf:predicate
          val: dcat:downloadUrl
      return: rdf:object
      template: '{return}'
      icon: mdi-download
      tooltip: Download

This configuration specifies the new config option specialButtons under component_config -> NodeShapeViewer. It configures the DownloadUrl special button:

slot: dlthings:characterized_by: start with the dlthings:characterized_by slot/property of the main record
for every related record referenced via the dlthings:characterized_by slot, match them against keys and values provided in the match list. This means: find the related record for which the rdf:type is dlthings:Statement AND for which the rdf:predicate is dcat:downloadUrl. The possibility of matching multiple records is supported.
for every matched record, return the rdf:object (multiple return values per matched record is not yet supported)
To ultimately get the link/href value(s), pass the returned value(s) together with the template into the already existing fillStringTemplate function that performs string serialization

The config should also contain an icon and tooltip in order to render a user-friendly button.

To achieve this, the main code changes include:

add the main work horse function to utils: findBlankNodeLink, this interprets the config and finds the relevant information
update NodeShapeViewer to call the new function if any specialButtons are configured
new comoponent SpecialButton is rendered from NodeShapeViewer; it fills the string template with matched values as input, and renders the buttons
the getIcon function was generlized and moved to utils, and removed from useWizard composable
SVGIcon component has updated styling to render an icon vertical center

NOTE: an additional unrelated change to NodeShapeViewer was also committed: this uses Promise.all instead of a for loop to call addRecordProperty in an attempt to shorten the amount of time needed to render a single record.

Sample configurations:

component_config:
  NodeShapeViewer:
    specialButtons:
      ORCID:
        slot: dcterms:identifier
        match:
          - key: rdf:type
            val: trr379ri:ORCID
        return: skos:notation
        template: 'https://orcid.org/{return}'
        icon: content:orcid-logo
        tooltip: Visit ORCID page
      DOI:
        slot: dcterms:identifier
        match:
          - key: rdf:type
            val: dlthings:DOI
        return: skos:notation
        template: 'https://doi.org/{return}'
        icon: content:doi-logo
        tooltip: Go to DOI
      DownloadUrl:
        slot: dlthings:characterized_by
        match:
          - key: rdf:type
            val: dlthings:Statement
          - key: rdf:predicate
            val: dcat:downloadUrl
        return: rdf:object
        template: '{return}'
        icon: mdi-download
        tooltip: Download

# New `Special Button` feature for record viewer Records might have properties (via RDF statements) that are best viewed as a button to click on, e.g. a download URL or a link to an external homepage or similar. This new feature allows buttons to be rendered for configured 'special properties', where the configuration includes identifying the special property, how to find it (relative to the parent record), which exact value to find, and how to turn it into a link. For example: ```yaml component_config: NodeShapeViewer: specialButtons: DownloadUrl: slot: dlthings:characterized_by match: - key: rdf:type val: dlthings:Statement - key: rdf:predicate val: dcat:downloadUrl return: rdf:object template: '{return}' icon: mdi-download tooltip: Download ``` This configuration specifies the new config option `specialButtons` under `component_config -> NodeShapeViewer`. It configures the `DownloadUrl` special button: - `slot: dlthings:characterized_by`: start with the `dlthings:characterized_by` slot/property of the main record - for every related record referenced via the `dlthings:characterized_by` slot, match them against keys and values provided in the `match` list. This means: find the related record for which the `rdf:type` is `dlthings:Statement` AND for which the `rdf:predicate` is `dcat:downloadUrl`. The possibility of matching multiple records is supported. - for every matched record, `return` the `rdf:object` (multiple return values per matched record is not yet supported) - To ultimately get the link/href value(s), pass the returned value(s) together with the `template` into the already existing `fillStringTemplate` function that performs string serialization The config should also contain an icon and tooltip in order to render a user-friendly button. To achieve this, the main code changes include: - add the main work horse function to utils: `findBlankNodeLink`, this interprets the config and finds the relevant information - update `NodeShapeViewer` to call the new function if any `specialButtons` are configured - new comoponent `SpecialButton` is rendered from `NodeShapeViewer`; it fills the string template with matched values as input, and renders the buttons - the `getIcon` function was generlized and moved to utils, and removed from `useWizard` composable - `SVGIcon` component has updated styling to render an icon vertical center NOTE: an additional unrelated change to `NodeShapeViewer` was also committed: this uses `Promise.all` instead of a for loop to call `addRecordProperty` in an attempt to shorten the amount of time needed to render a single record. ### Sample configurations: ```yaml component_config: NodeShapeViewer: specialButtons: ORCID: slot: dcterms:identifier match: - key: rdf:type val: trr379ri:ORCID return: skos:notation template: 'https://orcid.org/{return}' icon: content:orcid-logo tooltip: Visit ORCID page DOI: slot: dcterms:identifier match: - key: rdf:type val: dlthings:DOI return: skos:notation template: 'https://doi.org/{return}' icon: content:doi-logo tooltip: Go to DOI DownloadUrl: slot: dlthings:characterized_by match: - key: rdf:type val: dlthings:Statement - key: rdf:predicate val: dcat:downloadUrl return: rdf:object template: '{return}' icon: mdi-download tooltip: Download ```

jsheunis added 1 commit

2026-02-13 14:20:10 +00:00

New 'Special Button' feature for record viewer ce4eb01680

Records might have properties (via RDF statements) that are best viewed as a button to
click on, e.g. a download URL or a link to an external homepage or similar. This new
feature allows buttons to be rendered for configured 'special properties', where the
configuration includes identifying the special property, how to find it (relative to
the parent record), which exact value to find, and how to turn it into a link.
For example:

component_config:
  NodeShapeViewer:
    specialButtons:
      DownloadUrl:
      slot: dlthings:characterized_by
      match:
          - key: rdf:type
          val: dlthings:Statement
          - key: rdf:predicate
          val: dcat:downloadUrl
      return: rdf:object
      template: '{return}'
      icon: mdi-download
      tooltip: Download

This configuration specifies the new config option 'specialButtons' under 'component_config
-> NodeShapeViewer'. It configures the 'DownloadUrl' special button:

- 'slot: dlthings:characterized_by': start with the 'dlthings:characterized_by' slot/property
  of the main record
- for every related record referenced via the 'dlthings:characterized_by' slot, match them
  against keys and values provided in the 'match' list. This means: find the related record
  for which the 'rdf:type' is 'dlthings:Statement' AND for which the 'rdf:predicate' is
  'dcat:downloadUrl'. The possibility of matching multiple records is supported.
- for every matched record, 'return' the 'rdf:object' (multiple return values per matched
  record is not yet supported)
- To ultimately get the link/href value(s), pass the returned value(s) together with the
  'template' into the already existing 'fillStringTemplate' function that performs string
  serialization

The config should also contain an icon and tooltip in order to render a user-friendly button.

To achieve this, the main code changes include:
- add the main work horse function to utils: 'findBlankNodeLink', this interprets the config
  and finds the relevant information
- update 'NodeShapeViewer' to call the new function if any 'specialButtons' are configured
- new comoponent 'SpecialButton' is rendered from 'NodeShapeViewer'; it fills the string
  template with matched values as input, and renders the buttons
- the 'getIcon' function was generlized and moved to utils, and removed from 'useWizard'
  composable
- 'SVGIcon' component has updated styling to render an icon vertical center

NOTE: an additional unrelated change to 'NodeShapeViewer' was also committed: this uses
'Promise.all' instead of a for loop to call 'addRecordProperty' in an attempt to shorten
the amount of time needed to render a single record.

jsheunis merged commit bc62531e49 into main

2026-02-13 14:24:55 +00:00

jsheunis referenced this pull request from a commit

2026-02-13 14:24:56 +00:00

Merge pull request 'New `Special Button` feature for record viewer' (#335) from special-buttons into main