- Vue 74.7%
- JavaScript 23.9%
- Python 1%
- Shell 0.3%
Stephan Heunis
7cdde78878
This work is in response to the identified need for kick-starting the user-based entry of domain-specific
knowledge into a 'shacl-vue' metadata system, so that a critical mass for continued use of the system is
available soon after deploying it for the first time. The new 'ShaclVueStarter' component is designed to
encourage users to enter minimal records in a quick, intuitive, and interactive way. It has the following
features:
1. It serves as a new variant of the main entrypoint of a 'shacl-vue' deployment. This requires the
specification of a Vite-recognizable environment variable, 'VITE_SHACLVUE_VARIANT' that influences
whether the application is built with the (default) 'ShaclVue' component or the new 'ShaclVueStarter'
component. An example command for building the starter app:
VITE_SHACLVUE_VARIANT=starter npm run build:app
If the environment variable is not specified, the default application will be built.
2. Instead of making only a single class selectable at a time, 'ShaclVueStarter' shows all record types
(aka classes), and many records per class. The user can scroll down the main view through all classes,
and relevant records can be scrolled within each class 'card'. The left-hand-side pane now shows the
list of classes with added checkboxes, which allows including/exluding classes from being displayed in
the main view.
3. A 'ShaclVueStarter' deployment uses the new '_classes' option of the 'wizard_selection' configuration
to specify a wizard that will be shown for all classes. This allows the use of a generic 'add new record'
wizard that only asks for a display name and description, with example config:
AddRecordWizard:
name: Add New Record Wizard
tooltip: Add a new record
icon: mdi-plus-circle-outline
description: Add the display name and description and then hit *Save*
inputs:
- prop: name
name: Display name
description: The display name of the new record
type: text
placeholder: 'My record title'
required: true
- prop: description
name: Description
description: The description of the new record
type: text-paragraph
placeholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...'
template: content:add-record
4. Text search functionality provides the same UX as before, however the search now happens across all
records, i.e. not only on a single class-level.
5. Unnecessary detail and functionality from the default 'ShaclVue' application are not available in the
starter application. This mainly means the record viewer is minimalistic, containing just the display
name and a mini menu button with options to edit the record (which will open the established form) and
view the record RDF.
New/updated functionality to support all of the above:
- New 'ShaclVueStarter', 'ShaclVueRecordsMini', and 'NodeShapeViewerMini' components
- 'App.vue' now dynamically loads the main entrypoint components and uses 'component :is=' to render the
component that is selected based on the 'VITE_SHACLVUE_VARIANT' value
- 'ShaclVueStarter' uses a new 'getFirstPages()' function during app startup in order to fetch the first
page from the dumpthings backend for all classes. This allows getting upfront info about number of
records, and some actual records, to display on the main view that shows all classes and their records.
- In 'ShaclVueStarter', the 'selectType' is only called once on app startup, using the 'Thing' class as
the selected type.
- 'ShaclVueStarter' has a new computed variable, 'itemsByClass', which takes all filtered records as input
and groups them by class. This reactive ref is provided as the input of records to 'ShaclVueRecordsMini'
per class.
- As with 'ShaclVueRecords', 'ShaclVueRecordsMini' emits an event when the user scrolls to the bottom of
the list of records. However, 'ShaclVueStarter' has a new function that listens for this event and will
then fetch the next page of records for that specific class.
- 'NodeShapeViewerMini' has the simplistic rendering of a record display name and menu options.
|
||
|---|---|---|
| .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