Skip to content
This repository has been archived by the owner on Aug 18, 2023. It is now read-only.

Download view

Gerwin Bosch edited this page Sep 15, 2017 · 3 revisions

The download view component is responsible for generation four different output types.

  • Turtle (an RDF graph notation)
  • JSON-LD (a JSON RDF graph notation)
  • N-triples (a raw textual representation of an RDF graph)
  • SPARQL (a SPARQL query where these graphs are inserted)

Use cases

  • As a user, I want to download the newly generated dataset.
  • As a user, I want to publish my data set online
  • As a user, I want to have a choice
  • As a user, I want to be notified when an upload succeeds
  • As a developer, I want that all graphs have the same name structure to identify them in an open graph
  • As a user, I want that my graph has metadata in order know which graph is mine

Rules

  • Data can not be downloaded or published when there is no data to upload/publish

Structure

The component exists of a download button, a publish button, an output-type selector and the generated output.

Download button

The download button prompts uses a href to download the file. As react re-renders the page with every update, all the references are updated as well. Below is the implementation of the download button.

<RaisedButton
  label="download"
  href={`data:${this.state.dataType};charset=utf-8,${encodeURIComponent(
    this.state.displayText)}`}
  download={`${this.props.filename}${this.state.text}`}
  disabled={this.props.processing}
/>

The output type selector is a select-field with four options as described above. Next, to switching the format of the data available for download and the data visible on the screen it also changes the file type.

Format File-type
Turtle .turtle
Json-LD .json
N-triples .txt
SPARQL .txt

Output viewer

For the output viewer, the React-highlight a React implementation of Highlight.js is used. It contains styling for various languages and makes the output better to look at.

Publish button

When the user clicks on the publish button a dialog will show up where the user is required to fill in meta-data about their datasets. The dialog contains four fields;

Name Description editable
Dataset URI The URI the graph will receive when published
Title The title of the data set ✔️
Description a small description where the data is about ✔️
Date The date of creation of this data set

The dataset URI is set programmatically generated from the URL of the page with the title added.

Data

Design

Variables

Clone this wiki locally