Data Link View

This component is used for creating relations between the now classified columns of data

use cases

• As a user, I want to be able to create relations between my classes in order to link my data
• As a user, I want the relations to use existing vocabularies in order to make my data understandable to other users
• As a user, I want to be able to see context about the data I'm linking in order to make better decision
• As a user, I want to automatically have a relationship between a label and URI if a newly generated row is created
• As a user, I want to easily differentiate between which nodes represent URI's and which represent literals

Rules

• Relationships can not be subjects within an ontology

Structure

This page contains one main component, a react di-graph implementation. The user is able to draw edges between nodes using shift-drag motion and able to delete them by selecting and hitting delete on the keyboard. The create and delete node functions are not necessary as you are not able to create data and nodes which have no relations don't get their data in the next conversion algorithm.

The page also contains a status bar where the user is able to go back and go forward in the process. However, all his progress within this screen is lost as changes in the Data Classify View invalidate the state of the Data Link View

Data

The graph view requires at least nodes to let the user create their relation structure. Using the information we gathered from the previous step we are able to extract which type of nodes need to be displayed.

function nodeCreation(data, classifications) {
  let nodes = [];
  const edges = [];
  classifications.forEach((classification, index) => { // For each column
    if (classification.baseUri) { // If a column has a baseUri specified
      nodes.push( // Push its own column
        {
          ...
        });
      nodes.push( // Push the new column
        {
          ...
        });
      edges.push( // Push the relation between them
        {
          ...
        },
      );
      let newRow = data.map((dataRow, rowIndex) => { // create a new column copy of the data
        // Column header
        if (rowIndex === 0) {
          return `${classification.class.name}_uri`; // Name the column
        }
        // Data is empty
        if (!dataRow[index]) { // Return empty value if no original value is there
          return '';
        }
        // Find the same
        const like = data.filter(rowData => rowData[index] === dataRow[index]); // If the value is already there
        if (like.length > 0) {
          return like[0][index];
        }
        return '';
      });
      if (classification.baseUri) { // Transform the values into uri's
        newRow = newRow.map((item, idx) => {
          let baseUri = classification.baseUri;
          if (idx === 0) {
            return item; // Don't change the header
          }
          if (baseUri.startsWith('www')) { // Check for URI validity if not complete it 
            baseUri = `http://${baseUri}`;
          } else if (!baseUri.startsWith('http')) {
            baseUri = `http://www.${baseUri}`;
          }
          if (classification.baseUri[classification.baseUri.length - 1] !== '/') { // Check if it ends with /
            baseUri += '/'; // If not add it
          }
          return baseUri + item;
        });
      }
      data.forEach((dataRow, idx) => dataRow.push(newRow[idx]));// Add the data to the data matrice
    } else if (classification.class.uri) {// If a node is a URI
      nodes.push(
        {
           ...
        });
    } else { // Otherwise it is a literal
      nodes.push(
        {
           ...
        });
    }
  });
  // Distribution algorithm
  nodes = distribute(nodes); // Distrubute the nodes within a grid
  return ({
    data, // the new data with possibly added columns
    edges, // the edges
    nodes, // the nodes
  });
}

Design

The design of this component is one of the key features of this service compared to alternatives. By using a graph as the way to interact with the data-structure we are able to represent it better.

Layout

With the original design, the idea was that the user would drag the nodes onto the canvas and use a toggle between mouse and line drawing. However, this was adding an unnecessarily complicated step as nodes without relations would be filtered out of the data with the next conversion. One of the unfortunate thing about React-Digraph is that the controls cannot be added.

Items

To give the user an easier way to differentiate the URI's from the literal nodes we changed the shape of them.

Variables

name	type	required	description
nodes	Array	✔️	An array of nodes
links	Array	✔️	An array of edges
getExampleData	function	✔️	function to retrieve the first ten values of a column
pushEdge	function	✔️	function called when the user creates an edge
deleteEdge	function	✔️	function called when the user removes an edge
previousPage	function	✔️	A Callback function which is called when a user clicks previous
nextPage	function	✔️	A Callback function which is called when a user clicks on continue