UI Components

[saulshanabrook]

• Factor out CSS into separate files
• Switch to JupyterLab color CSS variables
• Add basic padding
• Different color or styling for links
• Add back button (Add back button to active explorer jupyterlab-data-explorer#101)
• different style for literals then for properties
• Make @type also links
• Make any values that are URLs be external links, style them differently then internal links
• Add padding
• Don't expand JSON LD, to preserve context, and show context as well

[saulshanabrook]

We have decided we don't wanna flatten the JSON LD so we can preserve the context and use show the unexpanded properties for better UI.

If we are going to not flatten the JSON LD document, maybe it would be good to have a more accurate represenation of what is allowed in JSON LD and what is not.

Then we can start to query over JSON LD, to get the things we need like "A list of all properties." But before we can even get there we should probably type the structure.

Is there a JSON Schema for JSON LD?

Yes?

• Questions about the JSON-LD JSON Schema json-ld/json-ld.org#612
• https://github.com/json-ld/json-ld.org/blob/master/schemas/jsonld-schema.json

But it hasn't been updated in a while.

SHACL-AF?

@millercl said that

Having jsonld reformat a document (compact, flatten, etc.) will expose whether it is valid JSON-LD or not. Would rather see SHACL-AF implemented in JavaScript.

So maybe SHACL-AF is a useful library or standard to represent JSON LD?

SHACL looks useful in that it can define "shapes" that you can say your JSON LD has to conform to: https://shacl.org/playground/ But the JS library just seems to be used for validating: https://github.com/TopQuadrant/shacl-js

I don't wanna validate, I wanna say "Here is a big JSON LD graph, pull out entities with this ID, and combine it with these other graphs who also have entities with this ID. Then show me all properties about this ID, without expanding them, and show me the expanded version, so I can put that on hover"

RDF

So it looks like this rdfjs dataset library is the correct way to form a collection of rdf quads and filter them for a certain predicate.

There is also this nice library by @rubensworks which can parse JSON LD contexts and use them to compact IRIs.

So the logic could go something like this:

1. Hit each of my linked data registries for a URL. They should each return JSON LD.
2. For each of these, parse them as RDF and create a RDF dataset that contains all entities. Also combine all contexts using json-ld context parser.
3. Filter the dataset based on the @id we care about
4. Pass the filtered dataset to the react component to view, along with the context. group by the predicate and compact it with the context.

[saulshanabrook]

Consumption of the RDF Data Model in OOP/JavaScript can be avoided.

What do you mean that it can be avoided? We are building a UI to explore linked data in the browser, so that's why we need to understand the data model in the browser.