@ulb-darmstadt/shacl-form 1.8.0 → 1.8.2

package/src/themes/material.ts

@@ -1,12 +1,13 @@
 import { ShaclPropertyTemplate } from '../property-template'
 import { Term } from '@rdfjs/types'
-import { Button, TextField, Select, MenuItem, Checkbox } from 'mdui'
+import { Button, TextField, Checkbox } from 'mdui'
 import { Theme } from '../theme'
 import { InputListEntry, Editor } from '../theme'
-import { Literal } from 'n3'
+import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './material.css?raw'
-import { PREFIX_XSD } from '../constants'
+import { PREFIX_SHACL, PREFIX_XSD, XSD_DATATYPE_STRING } from '../constants'
+import { RokitSelect } from '@ro-kit/ui-widgets'
 
 export class MaterialTheme extends Theme {
     constructor() {
@@ -29,6 +30,8 @@ export class MaterialTheme extends Theme {
         }
         if (template?.nodeKind) {
             editor.dataset.nodeKind = template.nodeKind.value
+        } else if (value instanceof NamedNode) {
+            editor.dataset.nodeKind = PREFIX_SHACL + 'IRI'
         }
         if (template?.hasValue || template?.readonly) {
             editor.disabled = true
@@ -92,47 +95,45 @@ export class MaterialTheme extends Theme {
     }
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
-        const editor = new Select()
-        editor.variant = 'outlined'
-        editor.label = label
-        editor.helper = template?.description?.value
+        const editor = new RokitSelect()
         editor.clearable = true
-        // @ts-ignore
-        const result = this.createDefaultTemplate('', null, required, editor, template)
-        let addEmptyOption = true
-    
-        for (const item of listEntries) {
-            const option = new MenuItem()
-            let itemValue = ''
-            if (typeof item.value === 'string') {
-                itemValue = item.value
+        const result = this.createDefaultTemplate(label, null, required, editor, template)
+        const ul = document.createElement('ul')
+        let isFlatList = true
+
+        const appendListEntry = (entry: InputListEntry, parent: HTMLUListElement) => {
+            const li = document.createElement('li')
+            if (typeof entry.value === 'string') {
+                li.dataset.value = entry.value
+                li.innerText = entry.label ? entry.label : entry.value
             } else {
-                // this is needed for typed rdf literals
-                itemValue = (item.value as N3Term).id
-            }
-            const itemLabel = item.label ? item.label : itemValue
-            option.value = itemValue
-            option.textContent = itemLabel || itemValue
-            // if (value && value.value === itemValue) {
-            //     option.selected = true
-            // }
-            if (item.indent) {
-                for (let i = 0; i < item.indent; i++) {
-                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+                if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
+                    li.dataset.value = entry.value.value
+                } else {
+                    // this is needed for typed rdf literals
+                    li.dataset.value = (entry.value as N3Term).id
                 }
+                li.innerText = entry.label ? entry.label : entry.value.value
             }
-            if (itemValue === '') {
-                addEmptyOption = false
-                option.ariaLabel = 'blank'
+            parent.appendChild(li)
+            if (entry.children?.length) {
+                isFlatList = false
+                const ul = document.createElement('ul')
+                li.appendChild(ul)
+                for (const child of entry.children) {
+                    appendListEntry(child, ul)
+                }
             }
-            editor.appendChild(option)
         }
-        if (addEmptyOption) {
-            // add an empty element
-            const empty = new MenuItem()
-            empty.ariaLabel = 'blank'
-            editor.prepend(empty)
+
+        for (const item of listEntries) {
+            appendListEntry(item, ul)
+        }
+        if (!isFlatList) {
+            editor.collapse = true
         }
+
+        editor.appendChild(ul)
         if (value) {
             editor.value = value.value
         }

package/src/util.ts

@@ -1,5 +1,5 @@
 import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3'
-import { DATA_GRAPH, OWL_OBJECT_NAMED_INDIVIDUAL, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER } from './constants'
+import { DATA_GRAPH, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
 import { Term } from '@rdfjs/types'
 import { InputListEntry } from './theme'
 import { ShaclPropertyTemplate } from './property-template'
@@ -53,10 +53,10 @@ export function findLabel(quads: Quad[], languages: string[]): string {
     findObjectValueByPredicate(quads, 'name', PREFIX_FOAF, languages)
 }
 
-export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[] {
+export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[]): InputListEntry[] {
     const entries: InputListEntry[] = []
     for (const subject of subjects) {
-        entries.push({ value: subject, label: findLabel(shapesGraph.getQuads(subject, null, null, null), languages), indent: indent })
+        entries.push({ value: subject, label: findLabel(shapesGraph.getQuads(subject, null, null, null), languages), children: [] })
     }
     return entries
 }
@@ -82,7 +82,7 @@ function findClassInstancesFromOwlImports(clazz: NamedNode, context: ShaclNode |
     }
 }
 
-export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent = 0): InputListEntry[] {
+export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate): InputListEntry[] {
     let instances: Term[]
     // if template has sh:in, then just use that as class instances
     if (template.shaclIn) {
@@ -97,16 +97,24 @@ export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplat
         findClassInstancesFromOwlImports(clazz, template, template.config.store, instances)
     }
 
-    const entries = createInputListEntries(instances, template.config.store, template.config.languages, indent)
+    const entries = createInputListEntries(instances, template.config.store, template.config.languages)
     // build inheritance tree only if sh:in is not defined
     if (template.shaclIn === undefined) {
+        // find sub classes via rdfs:subClassOf
         for (const subClass of template.config.store.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
-            entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
-        }
-        if (template.config.store.getQuads(clazz, RDF_PREDICATE_TYPE, OWL_OBJECT_NAMED_INDIVIDUAL, null).length > 0) {
-            entries.push(...createInputListEntries([ clazz ], template.config.store, template.config.languages, indent))
-            for (const subClass of template.config.store.getSubjects(SKOS_PREDICATE_BROADER, clazz, null)) {
-                entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
+            const subClassIntances = findInstancesOf(subClass as NamedNode, template)
+            for (const subClassIntance of subClassIntances) {
+                let isChild = false
+                // check if found sub class also is an instance of its super class. if yes, add it to the children of the InputListEntry.
+                for (const entry of entries) {
+                    if (template.config.store.countQuads(subClassIntance.value, RDF_PREDICATE_TYPE, entry.value, null) > 0) {
+                        entry.children!.push(subClassIntance)
+                        isChild = true
+                    }
+                }
+                if (!isChild) {
+                    entries.push(subClassIntance)                
+                }
             }
         }
     }

package/dist/node-template.d.ts

@@ -1,17 +0,0 @@
-import { BlankNode, NamedNode, Quad } from 'n3';
-import { Config } from './config';
-import { Term } from '@rdfjs/types';
-export declare class ShaclNodeTemplate {
-    properties: (NamedNode | BlankNode)[];
-    node: NamedNode | undefined;
-    shaclAnd: string | undefined;
-    shaclOr: Term[] | undefined;
-    shaclXone: Term[] | undefined;
-    targetClass: NamedNode | undefined;
-    owlImports: NamedNode[];
-    config: Config;
-    extendedShapes: NamedNode[];
-    constructor(quads: Quad[], config: Config);
-    merge(quads: Quad[]): ShaclNodeTemplate;
-    clone(): ShaclNodeTemplate;
-}

package/src/node-template.ts

@@ -1,82 +0,0 @@
-import { BlankNode, NamedNode, Quad } from "n3"
-import { Config } from "./config"
-import { OWL_PREDICATE_IMPORTS, PREFIX_SHACL } from "./constants";
-import { Term } from "@rdfjs/types";
-
-const mappers: Record<string, (template: ShaclNodeTemplate, term: Term) => void> = {
-    [`${PREFIX_SHACL}property`]:     (template, term) => { template.properties.push(term as (BlankNode | NamedNode)) },
-    [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
-    [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
-    [`${PREFIX_SHACL}targetClass`]:  (template, term) => { template.targetClass = term as NamedNode },
-    [`${PREFIX_SHACL}or`]:           (template, term) => {
-        const list = template.config.lists[term.value]
-        if (list?.length) {
-            template.shaclOr = list
-        } else {
-            console.error('list for sh:or not found:', term.value, 'existing lists:', template.config.lists)
-        }
-    },
-    [`${PREFIX_SHACL}xone`]:         (template, term) => {
-        const list = template.config.lists[term.value]
-        if (list?.length) {
-            template.shaclXone = list
-        } else {
-            console.error('list for sh:xone not found:', term.value, 'existing lists:', template.config.lists)
-        }
-    },
-    [OWL_PREDICATE_IMPORTS.id]:      (template, term) => { template.owlImports.push(term as NamedNode) }
-}
-
-export class ShaclNodeTemplate {
-    properties: (NamedNode | BlankNode)[] = []
-    node: NamedNode | undefined
-    shaclAnd: string | undefined    
-    shaclOr: Term[] | undefined
-    shaclXone: Term[] | undefined
-    targetClass: NamedNode | undefined
-
-    owlImports: NamedNode[] = []
-    config: Config
-    extendedShapes: NamedNode[] = []
-
-    constructor(quads: Quad[], config: Config) {
-        this.config = config
-        this.merge(quads)
-    }
-
-    merge(quads: Quad[]): ShaclNodeTemplate {
-        for (const quad of quads) {
-            mappers[quad.predicate.id]?.call(this, this, quad.object)
-        }
-        // 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)
-                    }
-                }
-            }
-        }
-        return this
-    }
-
-    clone(): ShaclNodeTemplate {
-        const copy = Object.assign({}, this)
-        // arrays are not cloned but referenced, so create them manually
-        copy.owlImports = [ ...this.owlImports ]
-        if (this.shaclOr) {
-            copy.shaclOr = [ ...this.shaclOr ]
-        }
-        if (this.shaclXone) {
-            copy.shaclXone = [ ...this.shaclXone ]
-        }
-        copy.merge = this.merge.bind(copy)
-        copy.clone = this.clone.bind(copy)
-        return copy
-    }
-}