Issue 537 UI widgets #572
Open
Issue 537 UI widgets #572
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Note that accessibility review will probably advise us to replace |
smessie
reviewed
Sep 16, 2025
Comment on lines
+836
to
+837
| In this case the component would filter out any instances of the class that do not conform to the specified node shape. | ||
| In the following example, the auto-complete would only show countries that are have <code>true</code> as their value |
There was a problem hiding this comment.
Suggested change
| In this case the component would filter out any instances of the class that do not conform to the specified node shape. | |
| In the following example, the auto-complete would only show countries that are have <code>true</code> as their value | |
| In this case, the component would filter out any instances of the class that do not conform to the specified node shape. | |
| In the following example, the auto-complete would only show countries that have <code>true</code> as their value |
| <p> | ||
| <b>Score:</b> | ||
| 1 if the value is an IRI. | ||
| 0 otherwise |
There was a problem hiding this comment.
Suggested change
| 0 otherwise | |
| 0 otherwise. |
Comment on lines
+861
to
+862
| a read-only editor that displays the blank node similar to <a href="#BlankNodeViewer">BlankNodeViewer</a> | ||
| yet allows the surrounding user interface to at least provide a delete button. |
There was a problem hiding this comment.
Suggested change
| a read-only editor that displays the blank node similar to <a href="#BlankNodeViewer">BlankNodeViewer</a> | |
| yet allows the surrounding user interface to at least provide a delete button. | |
| a read-only editor that displays the blank node, similar to <a href="#BlankNodeViewer">shui:BlankNodeViewer</a>, | |
| yet allows the surrounding user interface to at least provide a delete button. |
| <h4>shui:DetailsEditor</h4> | ||
| <p> | ||
| <b>Score:</b> | ||
| <code>null</code> for non-literals, i.e. it can be selected manually via <code>shui:editor</code>. |
There was a problem hiding this comment.
Suggested change
| <code>null</code> for non-literals, i.e. it can be selected manually via <code>shui:editor</code>. | |
| <code>null</code> for non-literals, i.e., it can be selected manually via <code>shui:editor</code>. |
Comment on lines
+991
to
+992
| This widget requires that the surrounding property (ex:weight above) declares sh:nodeKind sh:BlankNode | ||
| and also has a sh:node constraint that points at a node shape that declares the properties that shall be editable. |
There was a problem hiding this comment.
Suggested change
| This widget requires that the surrounding property (ex:weight above) declares sh:nodeKind sh:BlankNode | |
| and also has a sh:node constraint that points at a node shape that declares the properties that shall be editable. | |
| This widget requires that the surrounding property (<code>ex:weight</code> above) declares <code>sh:nodeKind sh:BlankNode</code> | |
| and also has a <code>sh:node</code> constraint that points at a node shape that declares the properties that shall be editable. |
There was a problem hiding this comment.
Just a comma, missing from @smessie's suggestion
Suggested change
| This widget requires that the surrounding property (ex:weight above) declares sh:nodeKind sh:BlankNode | |
| and also has a sh:node constraint that points at a node shape that declares the properties that shall be editable. | |
| This widget requires that the surrounding property (<code>ex:weight</code>, above) declares <code>sh:nodeKind sh:BlankNode</code> | |
| and also has a <code>sh:node</code> constraint that points at a node shape that declares the properties that shall be editable. |
| The only example of such a viewer in SHACL UI is <a href="#ValueTableViewer"><code>shui:ValueTableViewer</code></a>, which displays | ||
| all values of a property as an HTML table. | ||
| In those cases, the notions of generic add and delete buttons do not apply. | ||
| Such viewers are called <em>Multi Viewers</em> and are declared instance of <code>shui:MultiViewer</code> instead of <code>shui:SingleViewer</code>. |
There was a problem hiding this comment.
Suggested change
| Such viewers are called <em>Multi Viewers</em> and are declared instance of <code>shui:MultiViewer</code> instead of <code>shui:SingleViewer</code>. | |
| Such viewers are called <em>Multi Viewers</em> and are declared instances of <code>shui:MultiViewer</code> instead of <code>shui:SingleViewer</code>. |
| <p> | ||
| In this example we have used a <code>sh:values</code> rule to infer the values of the first column. | ||
| In this case, the values are simply pointing back to the focus node of each row, using <code>sh:this</code>. | ||
| Note that <code>dash:applicableToClass</code> or <code>sh:targetClass</code> are needed to get this inference correctly. |
|
|
||
| ex:ConceptTableShape | ||
| a sh:NodeShape ; | ||
| dash:applicableToClass skos:Concept ; |
| sh:path skos:altLabel ; | ||
| sh:description "The third column shows the alternative labels." ; | ||
| sh:name "alt labels" ; | ||
| sh:or dash:StringOrLangString ; |
| </p> | ||
| <img src="images/viewers/ValueTableViewer.png" /> | ||
| <p> | ||
| In this example we have used a <code>sh:values</code> rule to infer the values of the first column. |
There was a problem hiding this comment.
Suggested change
| In this example we have used a <code>sh:values</code> rule to infer the values of the first column. | |
| In this example, we have used a <code>sh:values</code> rule to infer the values of the first column. |
edmondchuc
reviewed
Sep 22, 2025
| typing "Nig" then "Niger" and "Nigeria" would show up as possible choices. | ||
| </p> | ||
| <img src="images/editors/AutoCompleteEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
edmondchuc
reviewed
Sep 22, 2025
| In the following example, the auto-complete would only show countries that are have <code>true</code> as their value | ||
| for <code>ex:sovereign</code>. | ||
| </p> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
edmondchuc
reviewed
Sep 22, 2025
| Also displays the current value (such as <code>"1"^^xsd:boolean</code>), but only allows to switch to true or false. | ||
| </p> | ||
| <img src="images/editors/BooleanSelectEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| a calendar-like date picker. | ||
| </p> | ||
| <img src="images/editors/DatePickerEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| a calendar-like date picker including a time selector. | ||
| </p> | ||
| <img src="images/editors/DateTimePickerEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| This is particularly useful for some types of blank nodes that only make sense to be edited in the context of their parent resource. | ||
| </p> | ||
| <img src="images/editors/DetailsEditor.png" width="782" height="364" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| a drop-down editor for enum fields (based on the <code>sh:in</code> list, in that order). | ||
| </p> | ||
| <img src="images/editors/EnumSelectEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| a multi-line text area to enter the value of a literal and a drop-down to select a language. | ||
| </p> | ||
| <img src="images/editors/TextAreaWithLangEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| an input field to enter the value of a literal, without the ability to change language or datatype. | ||
| </p> | ||
| <img src="images/editors/TextFieldEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| which is mandatory unless <code>xsd:string</code> is among the permissible datatypes. | ||
| </p> | ||
| <img src="images/editors/TextFieldWithLangEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| an input field to enter the URI of a resource, e.g. as value of <code>rdfs:seeAlso</code> or to enter the URL of an image on the web. | ||
| </p> | ||
| <img src="images/editors/URIEditor.png" /> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
| In this case, the values are simply pointing back to the focus node of each row, using <code>sh:this</code>. | ||
| Note that <code>dash:applicableToClass</code> or <code>sh:targetClass</code> are needed to get this inference correctly. | ||
| </p> | ||
| <pre class="example-shapes"> |
There was a problem hiding this comment.
Suggested change
| <pre class="example-shapes"> | |
| <pre class="example"> |
TallTed
reviewed
Sep 22, 2025
| <b>Rendering:</b> | ||
| an auto-complete field to enter the label of instances of the class specified for the property. | ||
| For example, if the <code>sh:class</code> of the property is <code>ex:Country</code> and the user starts | ||
| typing "Nig" then "Niger" and "Nigeria" would show up as possible choices. |
There was a problem hiding this comment.
Suggested change
| typing "Nig" then "Niger" and "Nigeria" would show up as possible choices. | |
| typing "Nig", then "Niger" and "Nigeria" would show up as possible choices. |
TallTed
reviewed
Sep 22, 2025
Comment on lines
+834
to
+837
| Implementations may also want to support the combination of <code>sh:class</code> with additional <code>sh:node</code> | ||
| constraints to further narrow down the set of valid values. | ||
| In this case the component would filter out any instances of the class that do not conform to the specified node shape. | ||
| In the following example, the auto-complete would only show countries that are have <code>true</code> as their value |
There was a problem hiding this comment.
Suggested change
| Implementations may also want to support the combination of <code>sh:class</code> with additional <code>sh:node</code> | |
| constraints to further narrow down the set of valid values. | |
| In this case the component would filter out any instances of the class that do not conform to the specified node shape. | |
| In the following example, the auto-complete would only show countries that are have <code>true</code> as their value | |
| Implementations may want to also support the combination of <code>sh:class</code> with <code>sh:node</code> | |
| constraints to further narrow the set of valid values. | |
| In this case, the component would filter out any instances of the class that do not conform to the specified node shape. | |
| In the following example, the auto-complete would only show countries that have <code>true</code> as their value |
TallTed
reviewed
Sep 22, 2025
| <p> | ||
| <b>Score:</b> | ||
| 10 for <code>xsd:boolean</code> literals. | ||
| 0 for non-literals or if there is a <code>sh:datatype</code> constraint. |
There was a problem hiding this comment.
Suggested change
| 0 for non-literals or if there is a <code>sh:datatype</code> constraint. | |
| 0 for non-literals and when there is a <code>sh:datatype</code> constraint. |
TallTed
reviewed
Sep 22, 2025
| </p> | ||
| <p> | ||
| <b>Rendering:</b> | ||
| This may be an auto-complete widget to select a class or a class hierarchy widget, or a combination thereof. |
There was a problem hiding this comment.
Assuming not meant as RFC2119, better not to use such terms, even in lowercase.
Suggested change
| This may be an auto-complete widget to select a class or a class hierarchy widget, or a combination thereof. | |
| This can be an auto-complete widget to select a class, a class hierarchy widget, or a combination thereof. |
TallTed
reviewed
Sep 22, 2025
Comment on lines
+1081
to
+1086
| 0 if the property is marked <code>sh:singleLine true</code>. | ||
| 20 if the value is an <code>xsd:string</code> literal and <code>sh:singleLine false</code>. | ||
| 5 if the value is an <code>xsd:string</code> literal. | ||
| 2 if the property has <code>xsd:string</code> among the permissible datatypes. | ||
| <code>null</code> if the property has a custom datatype (not from xsd or rdf namespaces but for example <code>geo:wktLiteral</code>). | ||
| 0 otherwise. |
There was a problem hiding this comment.
Such long lists may be better as lists (I recommend <ul> to prevent confusion between a numbered item in an <ol> and the score discussed in that item. I think <ol> is fine, since these are all disjoint, and can be presented in any order.), as the clarity of this manually linebroken source does not persist when all these lines fold into a single wrapping line. Such <ul> or <ol> lists should probably be used throughout, whenever there are multiple Score: lines. (This is one argument to consistently wrap running prose at 80 chars in the source, and not at indefinite "sentence" or "thought" breaks — so source writers have some sense of how the content will be rendered for later readers.)
Suggested change
| 0 if the property is marked <code>sh:singleLine true</code>. | |
| 20 if the value is an <code>xsd:string</code> literal and <code>sh:singleLine false</code>. | |
| 5 if the value is an <code>xsd:string</code> literal. | |
| 2 if the property has <code>xsd:string</code> among the permissible datatypes. | |
| <code>null</code> if the property has a custom datatype (not from xsd or rdf namespaces but for example <code>geo:wktLiteral</code>). | |
| 0 otherwise. | |
| 0 if the property is marked <code>sh:singleLine true</code>. | |
| 20 if the value is an <code>xsd:string</code> literal and <code>sh:singleLine false</code>. | |
| 5 if the value is an <code>xsd:string</code> literal. | |
| 2 if the property has <code>xsd:string</code> among the permissible datatypes. | |
| <code>null</code> if the property has a custom datatype (not from <code>xsd:</code> nor <code>rdf:</code> namespaces, but, for example, <code>geo:wktLiteral</code>). | |
| 0 otherwise. |
TallTed
reviewed
Sep 22, 2025
| </p> | ||
| <p> | ||
| <b>Rendering:</b> | ||
| a multi-line text area to enter the value of a literal and a drop-down to select a language. |
There was a problem hiding this comment.
What happens when a new language code is minted by the appropriate standards body? Or when setting/rendering a custom language is desired?
TallTed
reviewed
Sep 22, 2025
Comment on lines
+1167
to
+1168
| 10 if the value is a IRI node and the property has <code>sh:nodeKind sh:IRI</code> and no <code>sh:class</code> constraint. | ||
| null if the value is a IRI node. |
There was a problem hiding this comment.
Suggested change
| 10 if the value is a IRI node and the property has <code>sh:nodeKind sh:IRI</code> and no <code>sh:class</code> constraint. | |
| null if the value is a IRI node. | |
| 10 if the value is an IRI node and the property has <code>sh:nodeKind sh:IRI</code> and no <code>sh:class</code> constraint. | |
| null if the value is an IRI node. |
TallTed
reviewed
Sep 22, 2025
| </p> | ||
| <p> | ||
| <b>Rendering:</b> | ||
| an input field to enter the URI of a resource, e.g. as value of <code>rdfs:seeAlso</code> or to enter the URL of an image on the web. |
There was a problem hiding this comment.
Suggested change
| an input field to enter the URI of a resource, e.g. as value of <code>rdfs:seeAlso</code> or to enter the URL of an image on the web. | |
| an input field to enter the URI of a resource, e.g., as value of <code>rdfs:seeAlso</code> or to enter the URL of an image on the web. |
TallTed
reviewed
Sep 22, 2025
Comment on lines
+1127
to
+1128
| 10 if the value is a literal that is neither <code>rdf:langString</code> nor <code>xsd:boolean</code>. | ||
| 0 otherwise. |
There was a problem hiding this comment.
Another global suggestion. Make the score values <code> to set them slightly apart from the running text.
Suggested change
| 10 if the value is a literal that is neither <code>rdf:langString</code> nor <code>xsd:boolean</code>. | |
| 0 otherwise. | |
| <code>10</code> if the value is a literal that is neither <code>rdf:langString</code> nor <code>xsd:boolean</code>. | |
| <code>0</code> otherwise. |
TallTed
reviewed
Sep 22, 2025
| <h4>shui:TextFieldWithLangEditor</h4> | ||
| <p> | ||
| <b>Score:</b> | ||
| 11 if the value is an <code>rdf:langString</code> literal or the property permits either (both) <code>rdf:langString</code> or <code>xsd:string</code>. |
There was a problem hiding this comment.
Permitting either means it permits one datatype at a time, which I think is correct. Permitting both means it permits two datatypes at the same time, which I think is incorrect, as I think these are disjoint types.
Suggested change
| 11 if the value is an <code>rdf:langString</code> literal or the property permits either (both) <code>rdf:langString</code> or <code>xsd:string</code>. | |
| 11 if the value is an <code>rdf:langString</code> literal or the property permits either <code>rdf:langString</code> or <code>xsd:string</code>. |
TallTed
reviewed
Sep 22, 2025
| <h3>Viewers</h3> | ||
| <p> | ||
| The following sub-sections enumerate the currently defined instances of <code>shui:Viewer</code> from the SHACL UI namespace. | ||
| Property shapes can explicitly specify the preferred viewer for its values using <code>shui:viewer</code>. |
There was a problem hiding this comment.
Suggested change
| Property shapes can explicitly specify the preferred viewer for its values using <code>shui:viewer</code>. | |
| A property shape can have an explicitly specified preferred viewer for its values in <code>shui:viewer</code>. |
TallTed
reviewed
Sep 22, 2025
Comment on lines
+1195
to
+1199
| Most viewers render a single RDF value, typically as a single widget, on the screen. | ||
| Form editors offer buttons to edit individual values and add or delete values. | ||
| However, some viewers need to take more complete control over how multiple values of a property at a focus node are rendered. | ||
| The only example of such a viewer in SHACL UI is <a href="#ValueTableViewer"><code>shui:ValueTableViewer</code></a>, which displays | ||
| all values of a property as an HTML table. |
There was a problem hiding this comment.
Suggested change
| Most viewers render a single RDF value, typically as a single widget, on the screen. | |
| Form editors offer buttons to edit individual values and add or delete values. | |
| However, some viewers need to take more complete control over how multiple values of a property at a focus node are rendered. | |
| The only example of such a viewer in SHACL UI is <a href="#ValueTableViewer"><code>shui:ValueTableViewer</code></a>, which displays | |
| all values of a property as an HTML table. | |
| Most viewers render a single RDF value on the screen, typically as a single widget. | |
| Form editors offer buttons to edit individual values and to add or delete values. | |
| However, some viewers need to take more complete control over how multiple values of a property at a focus node are rendered. | |
| The only example of such a viewer in SHACL UI is <a href="#ValueTableViewer"><code>shui:ValueTableViewer</code></a>, which displays | |
| all values of a property as an HTML table. |
TallTed
reviewed
Sep 22, 2025
| <p> | ||
| <b>Score:</b> | ||
| 50 for IRI nodes or literals that have a case-insensitive recognized image ending such as | ||
| <code>.png</code>, <code>.jpg</code>, <code>.jpeg</code>, <code>.gif</code> and <code>.svg</code>. |
There was a problem hiding this comment.
Suggested change
| <code>.png</code>, <code>.jpg</code>, <code>.jpeg</code>, <code>.gif</code> and <code>.svg</code>. | |
| <code>.png</code>, <code>.jpg</code>, <code>.jpeg</code>, <code>.gif</code>, or <code>.svg</code>. |
TallTed
reviewed
Sep 22, 2025
| <h4>shui:LabelViewer</h4> | ||
| <p> | ||
| <b>Score:</b> | ||
| 5 if the value is a IRI. |
There was a problem hiding this comment.
Suggested change
| 5 if the value is a IRI. | |
| 5 if the value is an IRI. |
TallTed
reviewed
Sep 22, 2025
| <b>Rendering:</b> | ||
| as a hyperlink to that URI based on the display label of the resource. | ||
| The display label is typically based on the must suitable <code>rdfs:label</code> or | ||
| <code>skos:prefLabel</code> for the current user, based on her language preferences. |
There was a problem hiding this comment.
Suggested change
| <code>skos:prefLabel</code> for the current user, based on her language preferences. | |
| <code>skos:prefLabel</code> for the current user, based on their language preferences. |
TallTed
reviewed
Sep 22, 2025
| <h4>shui:URIViewer</h4> | ||
| <p> | ||
| <b>Score:</b> | ||
| 1 if the value is a IRI. |
There was a problem hiding this comment.
Suggested change
| 1 if the value is a IRI. | |
| 1 if the value is an IRI. |
afs
reviewed
Sep 23, 2025
There was a problem hiding this comment.
RDF 1.2 also has rdf:dirLangString in addition to rdf:langString
Either include each time (spoec detail style), or say that rdf:dirLangString can be accepted where rdf:dirLangString occurs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the widgets from datashapes.org. The namespace was adapted, and other minor changes were made to align it with the other SHACL specifications.
The selection of widgets and the details in the widget should be handled in a separate PR. This is an initial starting point so that other PRs can refer to widgets.
dash:applicableToClass and dash:rootClass was kept as there is no matching SHACL property. The dash namespaces should be easier to notice when we work on the details.
Closes 537