- Vue 74.7%
- JavaScript 23.9%
- Python 1%
- Shell 0.3%
Stephan Heunis
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.
|
||
|---|---|---|
| .forgejo/workflows | ||
| .github/workflows | ||
| docs | ||
| public | ||
| src | ||
| tests | ||
| tools | ||
| .browserslistrc | ||
| .codespellrc | ||
| .editorconfig | ||
| .gitignore | ||
| .npmignore | ||
| .prettierignore | ||
| .prettierrc | ||
| index.html | ||
| index.js | ||
| jsconfig.json | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| vite.config.app.mjs | ||
| vite.config.lib.mjs | ||
shacl-vue
THIS REPOSITORY IS UNDER CONTINUOUS DEVELOPMENT
Overview
shacl-vue is a web-based user interface for entering, editing, and viewing linked (meta)data using a VueJS application driven by the Shapes Constraint Language (SHACL).
Think of it as an automatic builder that you just have to feed with a model of your data. If you have a SHACL schema, or a schema in a format that can be exported to SHACL, then you're good to go. No need to build custom forms for data entry, no need to struggle with post-entry data validation, no need to create a catalog application that renders all the entered data. shacl-vue does all of this automatically.
shacl-vue is built with VueJS 3, Vuetify frontend components, and Vite build tools, and was heavily inspired by the WC3 Draft: Form Generation using SHACL and DASH. For reading, manipulating, and writing RDF data (including SHACL), the package uses libraries compatible with the RDF/JS specifications (see also: https://github.com/rdfjs-base)
Links
- For an example of a deployed
shacl-vueinstance, see the metadata annotation tool of the TRR379 Research Consortium - Refer to the documentation for more information.
Installation and usage
shacl-vue can be installed from npm:
npm install shacl-vue
Use as a library
The npm package currently provides the named export ShaclVue:
import { ShaclVue } from 'shacl-vue'
This is the main configurable VueJS component that is used to render all functionality of shacl-vue. It can be instantiated inside a VueJS application as follows:
<template>
<ShaclVue :configUrl="myconfig"></ShaclVue>
</template>
<script setup>
const myconfig = 'config.json';
</script>
Here, config.json is used to configure the properties of the specific shacl-vue deployment. See examples here, and here.
For the above to work, the VueJS application will have to install Vuetify and the ShaclVue might need to be registered explicitly.
Use as a standalone site
The build steps of shacl-vue produce both the library as well as a set of static files that can be served as a standalone site. The abovementioned metadata annotation tool of the TRR379 Research Consortium deploys shacl-vue in this manner, and its source code can be viewed here.
To use shacl-vue to deploy a standalone site, follow the build steps below. In addition, a deployment-specific confi file should be provided.
Local development and building
The shacl-vue source code can be cloned for local development, testing, or building. First clone the repository:
git clone https://hub.psychoinformatics.de/datalink/shacl-vue.git
cd shacl-vue
Then create a local NodeJS virtual environment, e.g with micromamba:
micromamba create -n <my-env-name> nodejs
micromamba activate <my-env-name>
Then install the application:
npm install .
Local rendering during development
To serve the application locally in order to test it in the browser, run:
npm run dev
Build steps
To build the library (output at /dist/lib):
npm run build:lib
To build the standalone site, i.e. VueJS application (output at /dist/app):
npm run build:app
To build both the library and the standalone site:
npm run build
Testing
Testing remains a primary TODO for this package, although a minimal test is in place to check whether the named exports can be imported into a new project. Testing is done with Vitest.
npm run test
Dependency on shacl-tulip
In an effort to generalize shacl-vue for improved use by and interoperability with other applications, the underlying functionality was factored out and packaged as the shacl-tulip library (like "shacl-vue-lib"). shacl-tulip provides the main (derived) classes for handling RDF data and related form data. It is completely independent of VueJS, yet class constructors allow passing reactive objects as arguments, which shacl-tulip handles seamlessly. It also focuses purely on library-level functionality (including utilities that were previously part of shacl-vue), and contains no frontend code. shacl-vue imports shacl-tulip classes and uses them mainly in its composable code.
Access to external webservices
Unless configured to connect to specific API endpoints (see Service API integration docs), a client accessing a bundled shacl-vue deployment does not load any external resources. All required resources are loaded from the server where the bundled application is hosted.
Acknowledgements
This work was funded, in part, by
- Deutsche Forschungsgemeinschaft (DFG, German Research Foundation) under grant TRR 379 (546006540, Q02 project)
- Deutsche Forschungsgemeinschaft (DFG, German Research Foundation) under grant SFB 1451 (431549029, INF project)
- MKW-NRW: Ministerium für Kultur und Wissenschaft des Landes Nordrhein-Westfalen under the Kooperationsplattformen 2022 program, grant number: KP22-106A