Skip to content

Generic query-based data viewer (permalink)

The corresponding challenge is #114.

Problem

When developing apps and adding/removing/editing data in pods, it is useful to be able to easily view what data is actually in your pods. At the moment, there is no generic app that easily allows users to execute queries over multiple pods and inspect the corresponding results.

Approved solution

We developed a Web app that has the following features:

  • Before using the app, a developer defines via a config file the SPARQL queries that should be used by the app.
  • Users can log in with their WebID or identity provider.
  • Users select the query based on their name from the sidebar.
  • The app shows the results of the query in a table.
  • Specific query variables influence how the app shows the results:
  • If a variable is a link to an image and the variable ends with _img then the app shows the actual images.
  • If a variable is a float and the variable ends with _float, the app shows the values as floats.
  • Users can refresh the results of a query via a button.

You find a screencast here. You find the details on how to configure the app for your use case here. This includes how to use your own pods and queries.

We made the following important technological decisions and assumptions:

  • The app has the option to redirect requests from Comunica, which executes the queries, via a proxy. The app does this to deal with data sources that don't set the CORS headers correctly.

User flow

This user flow describes how to set up and show a demo of the app.

Actors/actresses

  • User of the application.

Preconditions

  • The user has Node.js installed.

Steps

  1. Clone the repository (v1.0.0) via

shell git clone -b v1.0.0 https://github.com/SolidLabResearch/generic-data-viewer.git

  1. Install the dependencies via

shell npm i

  1. Prepare and start the Community Solid Server with the pods via

shell npm run prepare:pods && npm run start:pods

The server is ready when the following message appears:

text Listening to server at http://localhost:3000/

  1. Open another terminal.
  2. Start the app via

shell npm start

The app is ready when the following message appears:

text Running CORS Anywhere on 0.0.0.0:8000

  1. Open another terminal.
  2. Start the proxy via

shell npm run start:proxy

The app is ready when the following message appears:

text Running CORS Anywhere on 0.0.0.0:8000

  1. Navigate to http://localhost:3000.
  2. Click on "Test query" in the sidebar.
  3. The results appear in the table on the right.
  4. Click on "A list of my favourite books".
  5. The app shows the message "Something went wrong while preparing the query." This happens because the data source of this query requires you to be authenticated.
  6. Log in with http://localhost:8080 as identity provider.
  7. Click on "A list of my favourite books".
  8. The results appear in the table on the right.

Postconditions

None.

Follow-up actions

We will tackle these actions in this separate repository instead of the original of the Web app.

  • Rebuild the same functionality using React-admin. See this issue.
  • How to deal with queries over multiple data sources where some data sources need the proxy and others do not. See this issue.

Future work

We will tackle the future work in this separate repository instead of the original of the Web app.

  • Support Solid authentication from browser window to web worker. See this issue.

Lessons learned about developer experience

None.

Contributors

  • Challenge: Pieter Heyvaert
  • Solution: Pieter Heyvaert
  • Report: Pieter Heyvaert