I'm too Shexy for my POD ~ Experiments on Shapes to Forms

[Smag0]

I want to start a new post for those interested in developping tools for creating Gui from RDF Shapes.

So lets discuss about

What is your favorite ?

• shex Shape Expressions Language 2.1
• or SHACL Shapes Constraint Language (SHACL)?

Why ?
What issue do you face ?
How can we use ui-ontology ?

what must the tools build ? ( ui-format )

Is it possible to automaticaly build :

• pure html/js
• web-components Web Components - Web APIs | MDN
• polymer-components (lit-element), react-components, angular-components, vue-components, hyperhtml-components???
• jqueru-ui ?
  Could it be possible to build micro-services ???

Does someone have an idea how to deal with footprints

footprints : https://www.w3.org/ns/footprints

Schema can be easily loaded with

shex js lib GitHub - shexjs/shex.js: shex.js javascript package
using the loader as shown here https://github.com/scenaristeur/spoggy-simple/blob/553e7e49c344215875e9f38cc47cc9928533af46/testform.html#L82

Here are my first test

[Post deleted 3]

I’m not really aware with shapes, and if i made some mistake, please let me know, but I made a little try for parsing shex shapes & rendering forms https://scenaristeur.github.io/spoggy-simple/testform.html using .shex shapes stored here https://holacratie.solid.community/public/Schema/ For example role.shex PREFIX : <> PREFIX schema: <http://schema.org/> PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> PREFIX hola: <h…

Some other related posts :

• What is the difference between a footprint and a shape?
• On datashapes as a complement to vocab
• Solid React SDK by inrupt - #6 by james.martin
• Selecting items - but from where? - #2 by anon36056958
• Can a resource be predicated by more than one basic container? - #2 by timbl

ShEx V1 ? Obsolète ?

• https://shex.io/
• Shape Expressions (ShEx) Primer
• Validating RDF data - ISWC'18 Tutorial
• Shape Expressions
• Shape Expressions Language 2.1

PREFIX :       <http://example.org/>
PREFIX schema: <http://schema.org/>
PREFIX xsd:  <http://www.w3.org/2001/XMLSchema#>

:User {
  schema:name          xsd:string  ;
  schema:birthDate     xsd:date?  ;
  schema:gender        [ schema:Male schema:Female ] OR xsd:string ;
  schema:knows         IRI @:User*
}

shEx2

ShEx

ShEx2 — Simple Online Validator

• tension.shex

PREFIX : <http://hl7.org/fhir/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>

start = @<TensionShape>

<TensionShape> {               # An Observation has:
  :status ["preliminary" "final"]; #   status in this value set
  :subject @<UserShape>         #   a subject matching <UserShape>.
}

<UserShape> {                   # A Patient has:
 :name xsd:string*;                #   one or more names
 :birthdate xsd:date?              #   and an optional birthdate.
}

• with data

PREFIX : <http://hl7.org/fhir/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>

<Tension1>
  :status    "final" ;
  :subject   <User2> .

<User2>
  :name "Bob" ;
  :birthdate "1999-12-31"^^xsd:date .

• query map (What is a query map ??)

{FOCUS :status _}@START,
<User2>@!<TensionShape>

some shapes to test :

• https://holacratie.solid.community/public/Schema/
• https://jmartin.inrupt.net/public/shapes/

[anon36056958]

Great post. I’ve been interested in this topic for a while and haven’t done much about it. But I really think what you’re talking about is a critical point for a phase change in the number and quality of apps for Solid. It probably would be good if you could start a Solid panel on these questions.

This explanation of footprints is really good. In there it explains that Shex defines an ordered traversal but Shacl does not.
For components, I like startinblox.com by @alex.bourlier et al. They have open source repos on gitlab.

[alex.bourlier]

Are they ?

I’ll correct that if the repos are read only. It is a mistake

[alex.bourlier]

@anon36056958: If you create an account on our Gitlab, you will be able to post issues or pull requests.
You cannot because you are not logged in

[anon36056958]

ok, sorry i will try again

[anon36056958]

Some questions:

How to go from a shape to a user interface?

Should an instance of the ui-ontology be generated from a shape, and then different user interfaces be generated from there?

Is an ontology needed to describe how the UI should be generated (to UI onto instance, directly to plain js/HTML/csd, or to one or another component lib, or to something else)?

[james.martin]

I’m a bit more partial to ShEx, though both are great for data modeling. I find the compact formatting of ShEx easier to read and alter, particularly when I’m just trying to model something out. I find ShexJ a lot easier to use on the front end as well, though it’s extremely verbose.

The thoughts on things like shape -> form, which @anon36056958 asked about, is that we would have a “form model” based on the UI ontology, which would be documented somewhere (based on the footprints Ruben and Tim have been writing). We were thinking the workflow would be something like Shape -> Form Model -> Form Renderer -> Form where the Form Renderer can take ANY form model and render it, without caring where it came from. The Shape -> Form Model step might output a form model ttl file, or just as an object to be passed into the form renderer directly. Haven’t quite figured that part out yet.

[anon36056958]

Thanks for the update! I may be pushing my luck here, and I don’t know quite how this would work, but I think it would be great to have like a modular form renderer that you could plug in with npm or something so that you could use different component libraries to render forms.

[kevin.howard]

One of the core concepts proposed in Linked Data Shapes, Forms and Footprints is the translation of the Shape (ShEx, SHACL, other) to a Form Model described using Form Language. Developers/designers will then be able to edit the Form Model to adjust the layout of the form, labels, widget types, etc. A standard Form Renderer would take a Form Model as input and render the Form. As such, the renderer is a little divorced from the Shape language.

Based on experience gained implementing a prototype that rendered a form directly from a ShEx shape, the approach proposed by Tim is currently being worked into the React Solid SDK roadmap to provide the Shape -> Form Model -> Form Renderer -> Form workflow.

[james.martin]

We’ve been chatting about having some of the more service-like features added to a generic JS library instead of the React Components, but so far that’s still in the planning stages.

[Smag0]

Yes @james.martin, it would be cool to have it as a library and not only for React. I’ll take a look at the react maner after my holidays.
For those are at work, kiss from Méditerranée

[anon36056958]

The Bronx Riviera:

[Smag0]

I’m too Shexy for my POD https://g.co/kgs/2D4J3s

Working for some days with shex to generate forms, it’s time to post an update.

I use some shex shape stored on this pod https://holacratie.solid.community/public/Schema/ like tension.shex

import  <https://holacratie.solid.community/public/Schema/ratifier.shex>

PREFIX :       <https://holacratie.solid.community/public/>
PREFIX sx: <http://www.w3.org/ns/shex#>
PREFIX schema: <http://schema.org/>
PREFIX xsd:  <http://www.w3.org/2001/XMLSchema#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX hola: <https://holacratie.solid.community/public/>
PREFIX fp: <https://footprint.solid.community/public/>

start = @<Tension>

<Tension> {               # A Tension has:
  :status                  ["preliminary" "final"]; #   status in this value set
  schema:name              xsd:string  ;
  schema:dateCreated       xsd:date?  ;
  schema:creator           :Ratifier 
                            OR @<Ratifier> 
                            OR IRI
                            OR xsd:string ;
  :subject                 :Organization; 
  :whatIs                  LITERAL  ;
  :whatShouldBe            LITERAL  ;

}

<_Footprint> {


( fp:root      [hola: "current POD" <../Tension> ] OR xsd:string ;
  fp:path      ["Tension"] OR xsd:string ;
  fp:filename  ["value of schema:name"] OR xsd:string;
  |  fp:fullpath xsd:string
  ### |
  ###  (   fp:root      ["POD" <../Tension> hola:]  |   fp:root LITERAL+    );
  ###  (   fp:path      ["Tension"]                 |   fp:path LITERAL     );
  ###  (   fp:filename  [schema:name];              |   fp:filename LITERAL );
  ); 
}

Using shex.js library for the parsing, here is what can be generated today

If you want to test your shape, it can be done here https://scenaristeur.github.io/spoggy-simple/testform.html

And source code is there spoggy-simple/testform.html at master · scenaristeur/spoggy-simple · GitHub

[Smag0]

With lit-html / lit-element webcomponents and materializecss I’ve done that

https://scenaristeur.github.io/spoggy-simple/shexy/shexy-lit/index.html

And your movie shex folks

This version can not post data for the moment, but the primer Mocha Tests did.

For the moment, the footprint is in the shape file stored as a nameOfShape_Footprint shape.

There is even lots of work so I someone want to participate the source is here .

scenaristeur/spoggy-simple

For example, I 've some problem to init materializecss for some components, perhaps a conflict with lit-element and webcomponents.

Any feedback welcome.

[Smag0]

On https://scenaristeur.github.io/spoggy-simple/shexy/shexy-lit/index.html

what Is	Now you can connect to Shexy and submit form to https: //holacratie.solid.community/public/
what Should Be	Must use footprint to submit to other locations, pods