- Vue 74.7%
- JavaScript 23.9%
- Python 1%
- Shell 0.3%
Stephan Heunis
d050912ea5
Before this the WizardEditor only supported a single level of inputs of basic types,
meaning no arrays, no objects, and no recursion. The DOI metadata import use case
quickly showed that the previous state was not sufficient at all.
This commit introduces support for arrays, objects, indefinite recursion, and buttons.
Arrays are configured by input key-value 'multi_valued: true'. Objects are configured
by input type 'object' and can receive its child-level input specification via its own
'inputs' key. Buttons are configured by input type 'button' and can specify which
function to run via the 'on_click.call' option. If in addition the 'on_click.plugin'
is provided, the function to call will be retrieved from the context of the provided
(and presumably autoregistered) plugin.
Additional support is also provided for rendering a custom component inside the
WizardEditor component, as opposed to the current approach of rendering each input
based on config specification. The component feature was also introduced when it became
clear that the complexity of the DOI metadata import use case could not be achieved using
the standard input specification use case. Custom components are specified via the root
'component' key for a given wizard spec, and its value should be provided in the format
'plugin_name:component_name'.
Here is an example wizard configuration using all new options:
DOIImportWizard:
name: DOI Import Wizard
component: doi:DOIFetcher
inputs:
- prop: doi
type: text
required: true
- prop: import
type: button
on_click:
plugin: doi
call: importMetadata
- prop: title
type: text
required: true
- prop: abstract
type: text-paragraph
- prop: authors
type: object
multi_valued: true
inputs:
- prop: pid
type: text
- prop: given_name
type: text
- prop: family_name
type: text
- prop: role
type: text
multi_valued: true
template: content:DOIImportWizardTemplate
To support the new input specifications, the WizardEditor was refactored into a set of
self-contained components that support recursion.
Finally, the WizardEditor also supports the rendering of a custom component instead of
configured inputs. When a component is specified, it will be rendered instead of all
specified inputs. It is important to note that these inputs that will be used for the
template-filling procedure of the wizard should all still be specified, as they are used
by the WizardEditor to manage state between parent/child components and between the wizard
and the templating mechanism.
|
||
|---|---|---|
| .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