@ulb-darmstadt/shacl-form 1.8.2 → 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.8.2",
+    "version": "1.8.4",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -55,7 +55,7 @@
         "@types/uuid": "^10.0.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "typescript": "^5.8.3",
-        "vite": "^7.0.4",
+        "vite": "^7.0.5",
         "vite-plugin-dts": "^4.5.4"
     },
     "dependencies": {
@@ -71,7 +71,7 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "@ro-kit/ui-widgets": "^0.0.29",
+        "@ro-kit/ui-widgets": "^0.0.32",
         "mdui": "^2.1.4"
     }
 }

package/src/constants.ts

@@ -18,6 +18,8 @@ export const RDF_PREDICATE_TYPE = DataFactory.namedNode(PREFIX_RDF + 'type')
 export const DCTERMS_PREDICATE_CONFORMS_TO = DataFactory.namedNode(PREFIX_DCTERMS + 'conformsTo')
 export const RDFS_PREDICATE_SUBCLASS_OF = DataFactory.namedNode(PREFIX_RDFS + 'subClassOf')
 export const OWL_PREDICATE_IMPORTS = DataFactory.namedNode(PREFIX_OWL + 'imports')
+export const SKOS_PREDICATE_BROADER = DataFactory.namedNode(PREFIX_SKOS + 'broader')
+export const SKOS_PREDICATE_NARROWER = DataFactory.namedNode(PREFIX_SKOS + 'narrower')
 export const SHACL_OBJECT_NODE_SHAPE = DataFactory.namedNode(PREFIX_SHACL + 'NodeShape')
 export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
 export const SHACL_PREDICATE_PROPERTY = DataFactory.namedNode(PREFIX_SHACL + 'property')

package/src/property.ts

@@ -294,6 +294,7 @@ function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable
     removeButton.classList.add('remove-button', 'clear')
     removeButton.title = 'Remove ' + label
     removeButton.dense = true
+    removeButton.icon = true
     removeButton.addEventListener('click', _ => {
         instance.classList.remove('fadeIn')
         instance.classList.add('fadeOut')

package/src/styles.css

@@ -13,7 +13,7 @@ shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persi
 shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
 .mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
 .property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
-.shacl-or-constraint > div { display: flex; flex-grow: 1; }
+.shacl-or-constraint > div { display: flex; flex-grow: 1; align-items: flex-start; }
 .shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
 .property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }
 .property-instance.linked label:after, label.linked:after { content: '\1F517'; font-size: 0.6em; padding-left: 6px; }
@@ -22,7 +22,7 @@ shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.per
 .editor:not([type='checkbox']) { flex-grow: 1; }
 textarea.editor { resize: vertical; }
 .lang-chooser { border: 0; background-color: #e9e9ed; padding: 2px 4px; align-self: flex-start; }
-.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 0.5em; color: red; cursor: help; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); color: red; cursor: help; }
 .validation-error::before { content: '\26a0' }
 .validation-error.node { left: -1em; }
 .invalid > .editor { border-color: red !important; }

package/src/util.ts

@@ -1,5 +1,5 @@
 import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3'
-import { DATA_GRAPH, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
+import { DATA_GRAPH, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER, SKOS_PREDICATE_NARROWER } from './constants'
 import { Term } from '@rdfjs/types'
 import { InputListEntry } from './theme'
 import { ShaclPropertyTemplate } from './property-template'
@@ -83,42 +83,62 @@ function findClassInstancesFromOwlImports(clazz: NamedNode, context: ShaclNode |
 }
 
 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) {
         const list = template.config.lists[template.shaclIn]
-        instances = list?.length ? list : []
+        return createInputListEntries(list?.length ? list : [], template.config.store, template.config.languages)
     } else {
         // find instances in the shapes graph
-        instances = template.config.store.getSubjects(RDF_PREDICATE_TYPE, clazz, SHAPES_GRAPH)
+        const instances = template.config.store.getSubjects(RDF_PREDICATE_TYPE, clazz, SHAPES_GRAPH)
         // find instances in the data graph
         instances.push(...template.config.store.getSubjects(RDF_PREDICATE_TYPE, clazz, DATA_GRAPH))
         // find instances in imported taxonomies
         findClassInstancesFromOwlImports(clazz, template, template.config.store, instances)
-    }
 
-    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)) {
-            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
-                    }
+        // initialize structures needed for building a class instance hierarchy
+        const nodes = new Map<string, InputListEntry>()   // URI -> InputListEntry
+        const childToParent = new Map<string, string>() // URI -> parentURI
+
+        // initialize all instances as InputListEntry's with no children
+        for (const instance of instances) {
+            nodes.set(instance.id, { value: instance, label: findLabel(template.config.store.getQuads(instance, null, null, null), template.config.languages), children: [] })
+        }
+
+        // record broader/narrower relationships (child -> parent)
+        for (const instance of instances) {
+            for (const parent of template.config.store.getObjects(instance, SKOS_PREDICATE_BROADER, null)) {
+                childToParent.set(instance.id, parent.id)
+                if (!nodes.has(parent.id)) {
+                    nodes.set(parent.id, { value: parent, label: findLabel(template.config.store.getQuads(parent, null, null, null), template.config.languages), children: [] })
                 }
-                if (!isChild) {
-                    entries.push(subClassIntance)                
+            }
+            for (const child of template.config.store.getObjects(instance, SKOS_PREDICATE_NARROWER, null)) {
+                childToParent.set(child.id, instance.id)
+                if (!nodes.has(child.id)) {
+                    nodes.set(child.id, { value: child, label: findLabel(template.config.store.getQuads(child, null, null, null), template.config.languages), children: [] })
                 }
             }
         }
+
+        // build hierarchy by nesting children under parents
+        for (const [child, parent] of childToParent.entries()) {
+            nodes.get(parent)?.children?.push(nodes.get(child)!)
+        }
+
+        // find root nodes (no parent relationship)
+        const roots: InputListEntry[] = []
+        for (const [uri, node] of nodes.entries()) {
+            if (!childToParent.has(uri)) {
+                roots.push(node)
+            }
+        }
+
+        // add sub class instances
+        for (const subClass of template.config.store.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
+            roots.push(...findInstancesOf(subClass as NamedNode, template))
+        }
+        return roots
     }
-    return entries
 }
 
 export function isURL(input: string): boolean {