shacl-vue (alpha)

Appearance

Core Concepts ​

shacl-vue's functionality rests on several core concepts from its constituent technologies: SHACL, VueJS, and RDF-Ext.

SHACL ​

TIP

For a thorough understanding of SHACL, please refer to https://www.w3.org/TR/shacl/

The main concepts used from SHACL include the two types of shapes:

  • shapes about the focus node itself, called node shapes [sh:NodeShape]
  • shapes about the values of a particular property or path for the focus node, called property shapes [sh:PropertyShape]

In terms of user interfaces, a NodeShape would specify the schema for a complete form, while related PropertyShapes would specify the schemas for individual fields in a form. Knowing the details of these schemas, i.e. knowing how they validate graph data, allows us to generate appropriate UI components for capturing valid data.

The details of these concepts include:

  • targets specified for a NodeShape or a PropertyShape which can indicate e.g. which class a set of data would have to be validated against
  • nodeKind, which specifies which kind of RDF node the field would constitute, such as sh:IRI or sh:BlankNode.
  • datatype, which specifies what data type a field should have, e.g. string or datetime

In addition to specifications that can be used to render to correct field for a PropertyShape and provide the associated validation rules, a SHACL shapes graph can also contain information to construct the layout of a form and make it more user-friendly. These are known as non-validating property shape characteristics:

  • sh:name and sh:description can be included to make a field more intuitive to a user
  • sh:order can be used to provide order to the fields of a form
  • sh:group specified on a PropertyShape can tell the form builder which sh:PropertyGroup a field belongs to in terms of a grouping of themes or subsections in a form

Together, all of these concepts can be put together into a shapes graph in order to provide a full specification of a form and its fields, readily interpretable by a tool such as shacl-vue, and ready to validate data on entry.

INFO

Currently, shacl-vue does not yet support the full SHACL specification, only the basics. A complete list of supported SHACL features will follow. See https://www.w3.org/TR/shacl/#core-components for a complete list of SHACL's constraint components.

VueJS ​

shacl-vue is implemented using VueJS 3, specifically the Composition API.

The application makes extensive use of:

  • Vue Components to create standalone functional units that specify their own look and feel (<template>), their logic and state management code (<scritp setup>), additional JavaScript code (<script>), and any optional local styling (<style scoped>). These components are the main driver behind shacl-vue's ability to render different forms and fields based on the specifications in a SHACL schema.
  • Lifecycle hooks to run tasks during a component's life cycle, e.g. after creation or on mounting.
  • Provide / Inject to share states between parent and child components
  • Composables to manage generalizable and reusable code across components.
  • Vuetify as a framework for existing UI components. Of note is the generic v-input which acts as a wrapper for shacl-vue input components in order to standardize the API.

RDF-Ext ​

RDF-Ext is a

JavaScript library that extends the RDF/JS specs to handle RDF data in a developer-friendly way.

shacl-vue mainly uses RDF-Ext to:

  • read RDF data into the application's graph store, which is managed as a VueJS-reactive rdf.dataset()
  • add quads to the graphh store (rdf.dataset().add(quad))
  • traverse a graph in order to find specific nodes, using grapoi