Issue 537 UI widgets #572

bergos · 2025-09-09T18:47:49Z

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

See this document rendered online here

TallTed · 2025-09-15T16:16:02Z

Note that accessibility review will probably advise us to replace png with svg wherever possible, and to include textual descriptions of the images, both to accommodate various visual impairments and common text-to-speech tools, among others.

shacl12-ui/index.html

smessie · 2025-09-16T14:03:35Z

shacl12-ui/index.html

+          <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.


Same here (reference to DASH)

smessie · 2025-09-16T14:03:50Z

shacl12-ui/index.html

+
+ex:ConceptTableShape
+    a sh:NodeShape ;
+    dash:applicableToClass skos:Concept ;


Same here (reference to DASH)

smessie · 2025-09-16T14:04:01Z

shacl12-ui/index.html

+    sh:path skos:altLabel ;
+    sh:description "The third column shows the alternative labels." ;
+    sh:name "alt labels" ;
+    sh:or dash:StringOrLangString ;


Same here (reference to DASH)

shacl12-ui/index.html

edmondchuc

Looks good, just made some small suggestions to use the respec css class for examples.

shacl12-ui/index.html

TallTed · 2025-09-22T20:10:46Z

shacl12-ui/index.html

+            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.


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 · 2025-09-22T20:12:22Z

shacl12-ui/index.html

+          </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.


What happens when a new language code is minted by the appropriate standards body? Or when setting/rendering a custom language is desired?

I propose creating a separate section for language handling in the specification. How do different sets of languages (full ISO list, browser languages, configured languages, sh:languageIn) play together?

shacl12-ui/index.html

TallTed · 2025-09-22T20:43:21Z

shacl12-ui/index.html

+          <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>.


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>.

shacl12-ui/index.html

afs · 2025-09-23T08:01:49Z

shacl12-ui/index.html

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.

@afs —

say that rdf:dirLangString can be accepted where rdf:dirLangString occurs

I'm pretty sure one of the two rdf:dirLangString above ought to be rdf:langString, but I'm sorry to say I'm not sure which.

Co-authored-by: Ieben Smessaert <[email protected]> Co-authored-by: Ted Thibodeau Jr <[email protected]> Co-authored-by: Edmond Chuc <[email protected]>

TallTed

Line breaks in the ReSpec source (aside from those that are about keeping the lines below some maximum width) that are manually inserted to help comprehension of that source are usually if not always worth propagating to the rendered .html (via  ).

TallTed · 2025-10-07T14:41:03Z

shacl12-ui/index.html

            <b>Score:</b>
            1 if the value is an IRI.


If the line breaks make enough difference to understanding the .html source to be manually applied therein, they're valuable enough to manually apply for browser rendering.

Suggested change

Score:

1 if the value is an IRI.

Score: 

1 if the value is an IRI.

TallTed · 2025-10-07T14:41:18Z

shacl12-ui/index.html

+            0 otherwise.
          </p>
          <p>
            <b>Rendering:</b>


Suggested change

Rendering:

Rendering:

TallTed · 2025-10-07T14:43:38Z

shacl12-ui/index.html

            <b>Score:</b>
            10 for <code>xsd:boolean</code> literals.


Suggested change

Score:

10 for <code>xsd:boolean</code> literals.

Score: 

10 for <code>xsd:boolean</code> literals.

TallTed · 2025-10-07T14:43:55Z

shacl12-ui/index.html

            <b>Score:</b>
            10 for <code>xsd:boolean</code> literals.
-            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.


Suggested change

0 for non-literals and when there is a <code>sh:datatype</code> constraint.

0 for non-literals and when there is a <code>sh:datatype</code> constraint.

TallTed · 2025-10-07T14:44:23Z

shacl12-ui/index.html

        <section id="DetailsEditor">
          <h4>shui:DetailsEditor</h4>
          <p>
            <b>Score:</b>


Suggested change

Score:

Score:

TallTed · 2025-10-07T14:44:30Z

shacl12-ui/index.html

          <p>
            <b>Score:</b>
-            <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>.


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>.

TallTed · 2025-10-07T14:47:23Z

shacl12-ui/index.html

        <section id="TextFieldEditor">
          <h4>shui:TextFieldEditor</h4>
          <p>
            <b>Score:</b>


I'll leave the rest to you.

Suggested change

Score:

Score:

bergos added 4 commits September 9, 2025 09:37

copied datashapes.org widgets to ui spec

c15d695

fixed widget anchor links

4cd8213

updated dash namespaces to shui

8d4488b

removed TQ specific text, small cleanup

5adb852

bergos requested review from smessie and edmondchuc September 9, 2025 18:47

smessie reviewed Sep 16, 2025

View reviewed changes

edmondchuc reviewed Sep 22, 2025

View reviewed changes