@ulb-darmstadt/shacl-form 1.6.2 → 1.6.3

package/src/group.ts

@@ -0,0 +1,35 @@
+import { PREFIX_RDFS } from './constants'
+import { Config } from './config'
+import { findObjectValueByPredicate } from './util'
+
+export function createShaclGroup(groupSubject: string, config: Config): HTMLElement {
+    const group = document.createElement('div')
+    group.dataset['subject'] = groupSubject
+    group.classList.add('shacl-group')
+    let name = groupSubject
+    const quads = config.shapesGraph.getQuads(groupSubject, null, null, null)
+    const label = findObjectValueByPredicate(quads, "label", PREFIX_RDFS, config.languages)
+    if (label) {
+        name = label
+    }
+    const order = findObjectValueByPredicate(quads, "order")
+    if (order) {
+        group.style.order = order
+    }
+    const header = document.createElement('h1')
+    header.innerText = name
+    group.appendChild(header)
+
+    if (config.attributes.collapse !== null) {
+        group.classList.add('collapsible')
+        if (config.attributes.collapse === 'open') {
+            group.classList.add('open')
+        }
+        header.classList.add('activator')
+        header.addEventListener('click', () => {
+            group.classList.toggle('open')
+        })
+
+    }
+    return group
+}

package/src/loader.ts

@@ -0,0 +1,172 @@
+import { Store, Parser, Quad, Prefixes, NamedNode, DataFactory } from 'n3'
+import { toRDF } from 'jsonld'
+import { DCTERMS_PREDICATE_CONFORMS_TO, OWL_PREDICATE_IMPORTS, RDF_PREDICATE_TYPE, SHACL_PREDICATE_CLASS, SHAPES_GRAPH } from './constants'
+import { Config } from './config'
+import { isURL } from './util'
+
+// cache external data in module scope (and not in Loader instance) to avoid requesting
+// them multiple times, e.g. when more than one shacl-form element is on the page
+// that import the same resources
+const loadedURLCache: Record<string, Promise<string>> = {}
+const loadedClassesCache: Record<string, Promise<string>> = {}
+let sharedShapesGraph: Store | undefined
+
+export class Loader {
+    private config: Config
+    private loadedExternalUrls: string[] = []
+    private loadedClasses: string[] = []
+
+    constructor(config: Config) {
+        this.config = config
+    }
+
+    async loadGraphs() {
+        // clear local caches
+        this.loadedExternalUrls = []
+        this.loadedClasses = []
+
+        let shapesStore = sharedShapesGraph
+        const valuesStore = new Store()
+        this.config.prefixes = {}
+
+        const promises = [ this.importRDF(this.config.attributes.values ? this.config.attributes.values : this.config.attributes.valuesUrl ? this.fetchRDF(this.config.attributes.valuesUrl) : '', valuesStore, undefined, new Parser({ blankNodePrefix: '' })) ]
+        if (!shapesStore) {
+            shapesStore = new Store()
+            promises.push(this.importRDF(this.config.attributes.shapes ? this.config.attributes.shapes : this.config.attributes.shapesUrl ? this.fetchRDF(this.config.attributes.shapesUrl) : '', shapesStore, SHAPES_GRAPH))
+        }
+        await Promise.all(promises)
+
+        // if shapes graph is empty, but we have the following triples:
+        // <valueSubject> a <uri> or <valueSubject> dcterms:conformsTo <uri>
+        // then try to load the referenced object into the shapes graph
+        if (!sharedShapesGraph && shapesStore?.size == 0 && this.config.attributes.valuesSubject) {
+            const shapeCandidates = [
+                ...valuesStore.getObjects(this.config.attributes.valuesSubject, RDF_PREDICATE_TYPE, null),
+                ...valuesStore.getObjects(this.config.attributes.valuesSubject, DCTERMS_PREDICATE_CONFORMS_TO, null)
+            ]
+            const promises: Promise<void>[] = []
+            for (const uri of shapeCandidates) {
+                const url = this.toURL(uri.value)
+                if (url && this.loadedExternalUrls.indexOf(url) < 0) {
+                    this.loadedExternalUrls.push(url)
+                    promises.push(this.importRDF(this.fetchRDF(url), shapesStore, SHAPES_GRAPH))
+                }
+            }
+            try {
+                await Promise.allSettled(promises)
+            } catch (e) {
+                console.warn(e)
+            }
+        }
+
+        this.config.shapesGraph = shapesStore
+        this.config.dataGraph = valuesStore
+    }
+    
+    async importRDF(input: string | Promise<string>, store: Store, graph?: NamedNode, parser?: Parser) {
+        const p = parser || new Parser()
+        const parse = async (text: string) => {
+            const dependencies: Promise<void>[] = []
+            await new Promise((resolve, reject) => {
+                p.parse(text, (error: Error, quad: Quad, prefixes: Prefixes) => {
+                    if (error) {
+                        return reject(error)
+                    }
+                    if (quad) {
+                        store.add(new Quad(quad.subject, quad.predicate, quad.object, graph))
+                        // check if this is an owl:imports predicate and try to load the url
+                        if (this.config.attributes.ignoreOwlImports === null && OWL_PREDICATE_IMPORTS.equals(quad.predicate)) {
+                            const url = this.toURL(quad.object.value)
+                            // import url only once
+                            if (url && this.loadedExternalUrls.indexOf(url) < 0) {
+                                this.loadedExternalUrls.push(url)
+                                // import into separate graph
+                                dependencies.push(this.importRDF(this.fetchRDF(url), store, DataFactory.namedNode(url), parser))
+                            }
+                        }
+                        // check if this is an sh:class predicate and invoke class instance provider
+                        if (this.config.classInstanceProvider && SHACL_PREDICATE_CLASS.equals(quad.predicate)) {
+                            const className = quad.object.value
+                            // import class definitions only once
+                            if (this.loadedClasses.indexOf(className) < 0) {
+                                let promise: Promise<string>
+                                // check if class is in module scope cache
+                                if (className in loadedClassesCache) {
+                                    promise = loadedClassesCache[className]
+                                } else {
+                                    promise = this.config.classInstanceProvider(className)
+                                    loadedClassesCache[className] = promise
+                                }
+                                this.loadedClasses.push(className)
+                                dependencies.push(this.importRDF(promise, store, graph, parser))
+                            }
+                        }
+                        return
+                    }
+                    if (prefixes) {
+                        this.config.registerPrefixes(prefixes)
+                    }
+                    resolve(null)
+                })
+            })
+            try {
+                await Promise.allSettled(dependencies)
+            } catch (e) {
+                console.warn(e)
+            }
+        }
+
+        if (input instanceof Promise) {
+            input = await input
+        }
+        if (input) {
+            try {
+                // check if input is JSON
+                // @ts-ignore, because result of toRDF is a string and not an object
+                input = await toRDF(JSON.parse(input), { format: 'application/n-quads' }) as string
+            } catch(_) {
+                // NOP, it wasn't JSON
+            }
+            await parse(input)
+        }
+    }
+
+    async fetchRDF(url: string): Promise<string> {
+        // try to load from cache first
+        if (url in loadedURLCache) {
+            return loadedURLCache[url]
+        }
+        const promise = fetch(url, {
+            headers: {
+                'Accept': 'text/turtle, application/trig, application/n-triples, application/n-quads, text/n3, application/ld+json'
+            },
+        }).then(resp => resp.text())
+        loadedURLCache[url] = promise
+        return promise
+    }
+
+    toURL(id: string): string | null {
+        if (isURL(id)) {
+            return id
+        }
+        if (this.config.prefixes) {
+            const splitted = id.split(':')
+            if (splitted.length === 2) {
+                const prefix = this.config.prefixes[splitted[0]]
+                if (prefix) {
+                    // need to ignore type check. 'prefix' is a string and not a NamedNode<string> (seems to be a bug in n3 typings)
+                    // @ts-ignore
+                    id = id.replace(`${splitted[0]}:`, prefix)
+                    if (isURL(id)) {
+                        return id
+                    }
+                }
+            }
+        }
+        return null
+    }
+}
+
+export function setSharedShapesGraph(graph: Store) {
+    sharedShapesGraph = graph
+}

package/src/node.ts

@@ -0,0 +1,167 @@
+import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
+import { Term } from '@rdfjs/types'
+import { PREFIX_SHACL, RDF_PREDICATE_TYPE, OWL_PREDICATE_IMPORTS } from './constants'
+import { ShaclProperty } from './property'
+import { createShaclGroup } from './group'
+import { v4 as uuidv4 } from 'uuid'
+import { createShaclOrConstraint } from './constraints'
+import { Config } from './config'
+
+export class ShaclNode extends HTMLElement {
+    parent: ShaclNode | undefined
+    shaclSubject: NamedNode
+    nodeId: NamedNode | BlankNode
+    targetClass: NamedNode | undefined
+    owlImports: NamedNode[] = []
+    config: Config
+
+    constructor(shaclSubject: NamedNode, config: Config, valueSubject: NamedNode | BlankNode | undefined, parent?: ShaclNode, nodeKind?: NamedNode, label?: string) {
+        super()
+
+        this.parent = parent
+        this.config = config
+        this.shaclSubject = shaclSubject
+        let nodeId: NamedNode | BlankNode | undefined = valueSubject
+        if (!nodeId) {
+            // if no value subject given, create new node id with a type depending on own nodeKind or given parent property nodeKind
+            if (!nodeKind) {
+                const spec = config.shapesGraph.getObjects(shaclSubject, `${PREFIX_SHACL}nodeKind`, null)
+                if (spec.length) {
+                    nodeKind = spec[0] as NamedNode
+                }
+            }
+            // if nodeKind is not set, but a value namespace is configured or if nodeKind is sh:IRI, then create a NamedNode
+            if ((nodeKind === undefined && config.attributes.valuesNamespace) || nodeKind?.id === `${PREFIX_SHACL}IRI`) {
+                // no requirements on node type, so create a NamedNode and use configured value namespace
+                nodeId = DataFactory.namedNode(config.attributes.valuesNamespace + uuidv4())
+            } else {
+                // otherwise create a BlankNode
+                nodeId = DataFactory.blankNode(uuidv4())
+            }
+        }
+        this.nodeId = nodeId
+
+        // check if the form already contains the node/value pair to prevent recursion
+        const id = JSON.stringify([shaclSubject, valueSubject])
+        if (valueSubject && config.renderedNodes.has(id)) {
+            // node/value pair is already rendered in the form, so just display a reference
+            if (label && config.attributes.collapse === null) {
+                const labelElem = document.createElement('label')
+                labelElem.innerText = label
+                this.appendChild(labelElem)
+            }
+            const anchor = document.createElement('a')
+            anchor.innerText = valueSubject.id
+            anchor.classList.add('ref-link')
+            anchor.onclick = () => {
+                // if anchor is clicked, scroll referenced shacl node into view
+                this.config.form.querySelector(`shacl-node[data-node-id='${this.nodeId.id}']`)?.scrollIntoView()
+            }
+            this.appendChild(anchor)
+            this.style.flexDirection = 'row'
+        } else {
+            if (valueSubject) {
+                config.renderedNodes.add(id)
+            }
+            this.dataset.nodeId = this.nodeId.id
+            const quads = config.shapesGraph.getQuads(shaclSubject, null, null, null)
+            let list: Term[] | undefined
+
+            if (this.config.attributes.showNodeIds !== null) {
+                const div = document.createElement('div')
+                div.innerText = `id: ${this.nodeId.id}`
+                div.classList.add('node-id-display')
+                this.appendChild(div)
+            }
+
+            for (const quad of quads) {
+                switch (quad.predicate.id) {
+                    case `${PREFIX_SHACL}property`:
+                        let parentElement: HTMLElement = this
+                        // check if property belongs to a group
+                        const groupRef = config.shapesGraph.getQuads(quad.object as Term, `${PREFIX_SHACL}group`, null, null)
+                        if (groupRef.length > 0) {
+                            const groupSubject = groupRef[0].object.value
+                            if (config.groups.indexOf(groupSubject) > -1) {
+                                // check if group element already exists, otherwise create it
+                                let group = this.querySelector(`:scope > .shacl-group[data-subject='${groupSubject}']`) as HTMLElement
+                                if (!group) {
+                                    group = createShaclGroup(groupSubject, config)
+                                    this.appendChild(group)
+                                }
+                                parentElement = group
+                            } else {
+                                console.warn('ignoring unknown group reference', groupRef[0], 'existing groups:', config.groups)
+                            }
+                        }
+                        // delay creating/appending the property until we finished parsing the node.
+                        // This is needed to have possible owlImports parsed before creating the property.
+                        setTimeout(() => {
+                            const property = new ShaclProperty(quad.object as NamedNode | BlankNode, this, config, valueSubject)
+                            // do not add empty properties (i.e. properties with no instances). This can be the case e.g. in viewer mode when there is no data for the respective property.
+                            if (property.childElementCount > 0) {
+                                parentElement.appendChild(property)
+                            }
+                        })
+                        break;
+                    case `${PREFIX_SHACL}and`:
+                        // inheritance via sh:and
+                        list = config.lists[quad.object.value]
+                        if (list?.length) {
+                            for (const shape of list) {
+                                this.prepend(new ShaclNode(shape as NamedNode, config, valueSubject, this))
+                            }
+                        }
+                        else {
+                            console.error('list not found:', quad.object.value, 'existing lists:', config.lists)
+                        }
+                        break;
+                    case `${PREFIX_SHACL}node`:
+                        // inheritance via sh:node
+                        this.prepend(new ShaclNode(quad.object as NamedNode, config, valueSubject, this))
+                        break;
+                    case `${PREFIX_SHACL}targetClass`:
+                        this.targetClass = quad.object as NamedNode
+                        break;
+                    case OWL_PREDICATE_IMPORTS.id:
+                        this.owlImports.push(quad.object as NamedNode)
+                        break;
+                    case `${PREFIX_SHACL}or`:
+                        list = config.lists[quad.object.value]
+                        if (list?.length) {
+                            this.appendChild(createShaclOrConstraint(list, this, config))
+                        }
+                        else {
+                            console.error('list not found:', quad.object.value, 'existing lists:', config.lists)
+                        }
+                        break;
+                }
+            }
+
+            if (label) {
+                const header = document.createElement('h1')
+                header.innerText = label
+                this.prepend(header)
+            }
+        }
+    }
+
+    toRDF(graph: Store, subject?: NamedNode | BlankNode): (NamedNode | BlankNode) {
+        if (!subject) {
+            subject = this.nodeId
+        }
+        for (const shape of this.querySelectorAll(':scope > shacl-node, :scope > .shacl-group > shacl-node, :scope > shacl-property, :scope > .shacl-group > shacl-property')) {
+            (shape as ShaclNode | ShaclProperty).toRDF(graph, subject)
+        }
+        if (this.targetClass) {
+            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass)
+        }
+        // if this is the root shacl node, check if we should add one of the rdf:type or dcterms:conformsTo predicates
+        if (this.config.attributes.generateNodeShapeReference && !this.parent) {
+            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject)
+        }
+        return subject
+    }
+}
+
+window.customElements.define('shacl-node', ShaclNode)

package/src/plugin.ts

@@ -0,0 +1,60 @@
+import { ShaclPropertyTemplate } from './property-template'
+import { Term } from '@rdfjs/types'
+
+// store plugins in module scope so that they apply to all shacl-form elements
+const plugins: Record<string, Plugin> = {}
+
+export function registerPlugin(plugin: Plugin) {
+    if (plugin.predicate === undefined && plugin.datatype === undefined) {
+        console.warn('not registering plugin because it does neither define "predicate" nor "datatype"', plugin)
+    } else {
+        plugins[`${plugin.predicate}^${plugin.datatype}`] = plugin
+    }
+}
+
+export function listPlugins(): Plugin[] {
+    return Object.entries(plugins).map((value: [_: string, plugin: Plugin]) => { return value[1] })
+}
+
+export function findPlugin(predicate: string | undefined, datatype: string | undefined): Plugin | undefined {
+    // first try to find plugin with matching predicate and datatype
+    let plugin = plugins[`${predicate}^${datatype}`]
+    if (plugin) {
+        return plugin
+    }
+    // now prefer predicate over datatype
+    plugin = plugins[`${predicate}^${undefined}`]
+    if (plugin) {
+        return plugin
+    }
+    // last, try to find plugin with matching datatype
+    return plugins[`${undefined}^${datatype}`]
+}
+
+export type PluginOptions = {
+    predicate?: string
+    datatype?: string
+}
+
+export abstract class Plugin {
+    predicate: string | undefined
+    datatype: string | undefined
+    stylesheet: CSSStyleSheet | undefined
+
+    constructor(options: PluginOptions, css?: string) {
+        this.predicate = options.predicate
+        this.datatype = options.datatype
+        if (css) {
+            this.stylesheet = new CSSStyleSheet()
+            this.stylesheet.replaceSync(css)
+        }
+    }
+
+    abstract createEditor(template: ShaclPropertyTemplate, value?: Term): HTMLElement
+
+    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+        return template.config.theme.createViewer(template.label, value, template)
+    }
+}
+
+export type ClassInstanceProvider = (clazz: string) => Promise<string>

package/src/plugins/file-upload.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginOptions } from '../plugin'
+import { ShaclPropertyTemplate } from '../property-template'
+
+export class FileUploadPlugin extends Plugin {   
+  	onChange: (event: Event) => void
+    fileType: string | undefined
+
+    constructor(options: PluginOptions, onChange: (event: Event) => void, fileType?: string) {
+        super(options)
+      	this.onChange = onChange
+        this.fileType = fileType
+    }
+
+    createEditor(template: ShaclPropertyTemplate): HTMLElement {
+        const required = template.minCount !== undefined && template.minCount > 0
+        const editor = template.config.theme.createFileEditor(template.label, null, required, template)
+      	editor.addEventListener('change', event => {
+          event.stopPropagation()
+          this.onChange(event)
+        })
+        if (this.fileType) {
+          editor.querySelector('input[type="file"]')?.setAttribute('accept', this.fileType)
+        }
+        return editor
+    }
+}

package/src/plugins/fixed-list.ts

@@ -0,0 +1,19 @@
+import { Plugin, PluginOptions } from '../plugin'
+import { Term } from '@rdfjs/types'
+
+import { ShaclPropertyTemplate } from '../property-template'
+import { InputListEntry } from '../theme'
+
+export class FixedListPlugin extends Plugin {
+    entries: InputListEntry[]
+    
+    constructor(options: PluginOptions, entries: InputListEntry[]) {
+        super(options)
+        this.entries = entries
+    }
+
+    createEditor(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
+        const required = template.minCount !== undefined && template.minCount > 0
+        return template.config.theme.createListEditor(template.label, value || null, required, this.entries, template)
+    }
+}