@ulb-darmstadt/shacl-form 1.10.0 → 1.10.2

package/dist/loader.d.ts

@@ -3,11 +3,10 @@ import { Config } from './config';
 export declare class Loader {
     private config;
     private loadedExternalUrls;
+    private loadedClasses;
     constructor(config: Config);
     loadGraphs(): Promise<void>;
     importRDF(input: string | Promise<string>, store: Store, graph?: NamedNode): Promise<void>;
-    fetchRDF(url: string): Promise<string>;
-    fetchOwlImports(store: Store): Promise<PromiseSettledResult<void>[] | undefined>;
-    fetchClassInstances(store: Store): Promise<void[] | undefined>;
     toURL(id: string): string | null;
+    fetchRDF(url: string): Promise<string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.10.0",
+    "version": "1.10.2",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",

package/src/config.ts

@@ -101,7 +101,7 @@ export class Config {
 
     set store(store: Store) {
         this._store = store
-        this.lists = extractLists(store)
+        this.lists = extractLists(store, { ignoreErrors: true })
         this.groups = []
         store.forSubjects(subject => {
             this.groups.push(subject.id)

package/src/form.ts

@@ -44,6 +44,8 @@ export class ShaclForm extends HTMLElement {
     private initialize() {
         clearTimeout(this.initDebounceTimeout)
         this.initDebounceTimeout = setTimeout(async () => {
+            // set loading attribute on element so that hosting app can apply special css rules
+            this.setAttribute('loading', '')
             // remove all child elements from form and show loading indicator
             this.form.replaceChildren(document.createTextNode(this.config.attributes.loading))
             try {
@@ -116,6 +118,7 @@ export class ShaclForm extends HTMLElement {
                 errorDisplay.innerText = String(e)
                 this.form.replaceChildren(errorDisplay)
             }
+            this.removeAttribute('loading')
         }, 200)
     }
 
@@ -159,8 +162,8 @@ export class ShaclForm extends HTMLElement {
         }
 
         this.config.store.deleteGraph(this.config.valuesGraphId || '')
-        this.shape?.toRDF(this.config.store)
         if (this.shape) {
+            this.shape.toRDF(this.config.store)
             // add node target for validation. this is required in case of missing sh:targetClass in root shape
             this.config.store.add(new Quad(this.shape.shaclSubject, DataFactory.namedNode(PREFIX_SHACL + 'targetNode'), this.shape.nodeId, this.config.valuesGraphId))
         }

package/src/loader.ts

@@ -1,5 +1,5 @@
-import { Store, Quad, NamedNode, DataFactory, StreamParser, Term } from 'n3'
-import { DATA_GRAPH, DCTERMS_PREDICATE_CONFORMS_TO, OWL_PREDICATE_IMPORTS, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_NODE, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
+import { Store, Quad, NamedNode, DataFactory, StreamParser } from 'n3'
+import { DATA_GRAPH, DCTERMS_PREDICATE_CONFORMS_TO, OWL_PREDICATE_IMPORTS, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
 import { Config } from './config'
 import { isURL } from './util'
 import { RdfXmlParser } from 'rdfxml-streaming-parser'
@@ -15,6 +15,7 @@ const loadedClassesCache: Record<string, Promise<string>> = {}
 export class Loader {
     private config: Config
     private loadedExternalUrls: string[] = []
+    private loadedClasses: string[] = []
 
     constructor(config: Config) {
         this.config = config
@@ -23,29 +24,25 @@ export class Loader {
     async loadGraphs() {
         // clear local caches
         this.loadedExternalUrls = []
+        this.loadedClasses = []
         this.config.prefixes = {}
 
+
         const promises: Promise<void>[] = []
-        const store = new Store()
+        const store =  new Store()
         promises.push(this.importRDF(this.config.attributes.shapes ? this.config.attributes.shapes : this.config.attributes.shapesUrl ? this.fetchRDF(this.config.attributes.shapesUrl) : '', store, SHAPES_GRAPH))
-        // load data graph
         promises.push(this.importRDF(this.config.attributes.values ? this.config.attributes.values : this.config.attributes.valuesUrl ? this.fetchRDF(this.config.attributes.valuesUrl) : '', store, DATA_GRAPH))
         await Promise.all(promises)
-        await this.fetchOwlImports(store)
-        await this.fetchClassInstances(store)
 
         // if shapes graph is empty, but we have the following triples:
         // <valueSubject> a <uri> or <valueSubject> dcterms:conformsTo <uri>
         // or if we have data-shape-subject set on the form,
         // then try to load the referenced object(s) into the shapes graph
-        if (store.countQuads(null, null, null, SHAPES_GRAPH) === 0) {
-            const shapeCandidates = new Set<Term>()
-            if (this.config.attributes.valuesSubject) {
-                store.forObjects((object) => shapeCandidates.add(object), this.config.attributes.valuesSubject, DCTERMS_PREDICATE_CONFORMS_TO, DATA_GRAPH)
-            }
-            if (this.config.attributes.shapeSubject) {
-                shapeCandidates.add(DataFactory.namedNode(this.config.attributes.shapeSubject))
-            }
+        if (store.countQuads(null, null, null, SHAPES_GRAPH) === 0 && this.config.attributes.valuesSubject) {
+            const shapeCandidates = [
+                // ...store.getObjects(this.config.attributes.valuesSubject, RDF_PREDICATE_TYPE, DATA_GRAPH),
+                ...store.getObjects(this.config.attributes.valuesSubject, DCTERMS_PREDICATE_CONFORMS_TO, DATA_GRAPH)
+            ]
             const promises: Promise<void>[] = []
             for (const uri of shapeCandidates) {
                 const url = this.toURL(uri.value)
@@ -71,6 +68,33 @@ export class Loader {
                 const parser = guessContentType(input) === 'xml' ? new RdfXmlParser() : new StreamParser()
                 parser.on('data', (quad: 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)))
+                        }
+                    }
+                    // check if this is an sh:class predicate and invoke class instance provider
+                    if (this.config.classInstanceProvider && (SHACL_PREDICATE_CLASS.equals(quad.predicate) || SHACL_PREDICATE_TARGET_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))
+                        }
+                    }
                 })
                 .on('error', (error) => {
                     console.warn('failed parsing graph', graph, error.message)
@@ -111,78 +135,6 @@ export class Loader {
         }
     }
 
-    async fetchRDF(url: string): Promise<string> {
-        // try to load from cache first
-        if (url in loadedURLCache) {
-            console.log('--- cache hit', url)
-            return loadedURLCache[url]
-        }
-        let proxiedURL = url
-        // if we have a proxy configured, then load url via proxy
-        if (this.config.attributes.proxy) {
-            proxiedURL = this.config.attributes.proxy + encodeURIComponent(url)
-        }
-        const promise = fetch(proxiedURL, {
-            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
-    }
-
-    async fetchOwlImports(store: Store) {
-        if (this.config.attributes.ignoreOwlImports === null) {
-            const urls = new Set<string>()
-            // find all triples in all graphs of the form <s> <sh:class> <:className>
-            store.forObjects((url) => {
-                urls.add(url.value)
-            }, null, OWL_PREDICATE_IMPORTS, null)
-
-            const dependencies: Promise<void>[] = []
-            for (const url of urls) {
-                const convertedURL = this.toURL(url)
-                // import url only once
-                if (convertedURL) {
-                    // import into separate graph
-                    dependencies.push(this.importRDF(this.fetchRDF(convertedURL), store, DataFactory.namedNode(convertedURL)))
-                }
-            }
-            return Promise.allSettled(dependencies)
-        }
-    }
-
-    async fetchClassInstances(store: Store) {
-        if (this.config.classInstanceProvider) {
-            const classNames = new Set<string>()
-            // find all triples in all graphs of the form <s> <sh:class> <:className>
-            store.forObjects((clazz) => {
-                classNames.add(clazz.value)
-            }, null, SHACL_PREDICATE_CLASS, null)
-            // find all triples in all graphs of the form <s> <sh:node> <o> and <o> <sh:targetClass> <:className>
-            store.forObjects((node) => {
-                store.forObjects((clazz) => {
-                    classNames.add(clazz.value)
-                }, node, SHACL_PREDICATE_TARGET_CLASS, null)
-            }, null, SHACL_PREDICATE_NODE, null)
-
-            const dependencies: Promise<void>[] = []
-            for (const className of classNames) {
-                let promise: Promise<string>
-                // check if class is in module scope cache
-                if (className in loadedClassesCache) {
-                    console.log('--- class cache hit', className)
-                    promise = loadedClassesCache[className]
-                } else {
-                    promise = this.config.classInstanceProvider(className)
-                    loadedClassesCache[className] = promise
-                }
-                dependencies.push(this.importRDF(promise, store, SHAPES_GRAPH))
-            }
-            return Promise.all(dependencies)
-        }
-    }
-
     toURL(id: string): string | null {
         if (isURL(id)) {
             return id
@@ -203,6 +155,25 @@ export class Loader {
         }
         return null
     }
+
+    async fetchRDF(url: string): Promise<string> {
+        // try to load from cache first
+        if (url in loadedURLCache) {
+            return loadedURLCache[url]
+        }
+        let proxiedURL = url
+        // if we have a proxy configured, then load url via proxy
+        if (this.config.attributes.proxy) {
+            proxiedURL = this.config.attributes.proxy + encodeURIComponent(url)
+        }
+        const promise = fetch(proxiedURL, {
+            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
+    }
 }
 
 /* Can't rely on HTTP content-type header, since many resources are delivered with text/plain */

package/src/property-template.ts

@@ -115,17 +115,15 @@ export class ShaclPropertyTemplate {
         if (!this.label && !this.shaclAnd) {
             this.label = this.path ? removePrefixes(this.path, this.config.prefixes) : 'unknown'
         }
-        // resolve extended shapes
-        if (this.node || this.shaclAnd) {
-            if (this.node) {
-                this.extendedShapes.push(this.node)
-            }
-            if (this.shaclAnd) {
-                const list = this.config.lists[this.shaclAnd]
-                if (list?.length) {
-                    for (const node of list) {
-                        this.extendedShapes.push(node as NamedNode)
-                    }
+        // register extended shapes
+        if (this.node) {
+            this.extendedShapes.push(this.node)
+        }
+        if (this.shaclAnd) {
+            const list = this.config.lists[this.shaclAnd]
+            if (list?.length) {
+                for (const node of list) {
+                    this.extendedShapes.push(node as NamedNode)
                 }
             }
         }

package/src/property.ts

@@ -19,14 +19,13 @@ export class ShaclProperty extends HTMLElement {
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
         super()
         this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
+        this.container = this
         if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
             const collapsible = new RokitCollapsible()
             collapsible.classList.add('collapsible', 'shacl-group');
             collapsible.open = config.attributes.collapse === 'open';
             collapsible.label = this.template.label;
             this.container = collapsible
-        } else {
-            this.container = this
         }
 
         if (this.template.order !== undefined) {
@@ -35,7 +34,6 @@ export class ShaclProperty extends HTMLElement {
         if (this.template.cssClass) {
             this.classList.add(this.template.cssClass)
         }
-
         if (config.editMode && !parent.linked) {
             this.addButton = this.createAddButton()
             this.container.appendChild(this.addButton)

package/src/serialize.ts

@@ -49,7 +49,9 @@ export function toRDF(editor: Editor): Literal | NamedNode | undefined {
     let languageOrDatatype: NamedNode<string> | string | undefined = editor.shaclDatatype
     let value: number | string = editor.value
     if (value) {
-        if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
+        if (value.startsWith('<') && value.endsWith('>') && value.indexOf(':') > -1) {
+            return DataFactory.namedNode(value.substring(1, value.length - 1))
+        } else if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
             return DataFactory.namedNode(value)
         } else if (editor.dataset.link) {
             return JSON.parse(editor.dataset.link)

package/src/themes/default.ts

@@ -220,8 +220,10 @@ export class DefaultTheme extends Theme {
             } else {
                 if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
                     li.dataset.value = entry.value.value
+                } else if (entry.value instanceof NamedNode) {
+                    li.dataset.value = '<' + entry.value.value + ">"
                 } else {
-                    // this is needed for typed rdf literals
+                    // this is needed for typed rdf literals e.g. "ex"^^xsd:anyUri
                     li.dataset.value = (entry.value as N3Term).id
                 }
                 li.innerText = entry.label ? entry.label : entry.value.value