Giter Club home page Giter Club logo

rdfshape-client's Introduction

RDFShape-client

React web client for RDFShape API used to operate the API in a human-friendly way. It also features software from WESO such as YASHE and shumlex.

Continuous Integration Docker build

Deployed versions of RDFShape Client

This client is already deployed here.

Quick reference


Deployment and Usage

Please, refer to this project's wiki and webpage for detailed information related to:

  • Quickstarting the API (via React / Docker)
  • Using the client with simple examples
  • Further documentation and resources

Contribution and issues

Contributions are greatly appreciated. Please fork this repository and open a pull request to add more features or submit issues:

rdfshape-client's People

Contributors

exarcafidalgo avatar labra avatar mistermboy avatar ulitol97 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

rdfshape-client's Issues

Fix existing tests

The application is currently working as expected (mostly). However, not only is more testing required (see #4) but the current tests should be enhanced/fixed, they are disrupting Travis' builds.

Improvement of the UML class diagram display

In its current state, the UML class diagram displayed as SVG in the ShEx>UML conversion becomes a chaotic tangle of arrows when processing a certain number of shapes with plenty of relations.
imagen

It would be of great help to the user to offer a way to navigate/display this info in a more selective, clear method. This is in no way a trivial matter and thus will require some time to prepare.

A couple of approaches have been briefly commented.

  • Allowing the user to move and relocate the elements of the diagram to his will. Seems quite complicated... I'll see if there's anything that eases this possibility, but I don't hope for much with the current implementation. Also, with the number of elements that the troublesome diagrams possess, it doesn't really lessen the amount of work required for the user to clarify the information.
  • Select a "main" shape and its inmediate neighbours on demand. This one seems more feasible, as well as it's a better option for the user, I'd say. I'll try around and see where it takes me...

Keep a state with the RDF data, ShEx schema, etc

When the user edits RDF data and changes between different options, the RDF data is lost. It would be better if it were kept in some in-memory storage so the user could use the same RDF data to validate, visualize, etc...

The same functionality could be used also for ShEx and SHACl schemas...

Improvement of the 3D visuals interactions

We currently offer 3D visualizations for ShEx (example) thanks to 3dshex.

There are some caveats though:

  • After resizing the visualization via CSS to fit our UI constraints, some interactivity is lost (on hover/click events). Looks like the mouse position detected does not correspond with the actual one.

Improve visualizations of errors

The RDFShape server provides better support now for errors which could help the visualizations of errors in rdfshape-client.

In particular, the JSON representation of errors in ShEx now returns the the location (line/col) of the RDFNode and the Shape label. It would be great for a user to be able to get a link from the RDFNode/label to the corresponding position in Turtle or in ShEx.

I suppose that this feature will require modifications in YaSHE or YATE, @mistermboy is the functionality in YaSHE/YATE to go to some specific line/col in the editor or maybe highlight it with a different color?

Maybe, the lint extension from codemirror could be useful?

Resize editor windows

When editing large RDF files, the editor windows have a fixed size which can't be changed. I think it would improve the user experience if it were possible to move those windows...

It would be even better if those windows could be put in any place selected by the user.

Fix typo in main page

The main page contains a typo in this text:

Data [analyis](https://rdfshape.weso.es/dataInfo) and visualization

Should be analysis instead of analyis

Thanks to Bob Ducharme for pointing it out.

Pérdida de comportamiento dinámico en visualización UML

El diagrama UML generado con Shumlex posee un comportamiento asociado a las clases al hacer clic (resaltar aquella y sus vecinos). Tal comportamiento se ha perdido con la nueva versión. Parece ser que se genera el diagrama como corresponde en un dummy, del cual se toma el SVG y se reproduce en la ventana final. Esto va bien para el aspecto visual, pero los scripts asociados se pierden por el camino.

Extract common code to a external module

I think several components and utilities that are shared by wikishape and rdfshape should be extracted and put together in a common module which could be pubished to npm.

Then, we could add a dependency from both rdfshape and wikishape to that module.

Enhance image handling in visualizations

The application currently offers two types of visualizations:

The following problems should be tackled:

  • RDF visualizations allow to choose a target image format, but all options return an SVG.
  • ShEx visualizations only allow the SVG format.
  • We should implement a mechanism in the client API that allows users to query the client only for the image resulting from a visualization. That way, users will be able to embed images generated by RdfShape in their contents.

Change label of "Shapes graph" in ShEx

The input label for ShEx schemas in RDFShape is "Shapes graph". While that terminology is OK for SHACL, in the case of ShEx, it is called Schema.

If those labels are separate, it would be better to ask for "Schema" or "ShEx schema" in the case of ShEx.

In the case of SHACL, it can remain as "Shapes graph" because that's the terminology used in SHACL

Invalid characters in UML visualizations

When updating to the latest version of Shumlex, the UML visualizations have the angle brackets (<, >) appear as invalid/unknown symbols. This is a minor issue, but it did not happen before.

  • Before (0.4.2):
    image

  • After (0.6.0):
    image

Non-functioning links

In a few places ("About", "This client is already deployed here."), readers are sent to https://rdfshape.weso.es/
That link does not work, but rdfshape.herokuapp.com/ does. So either fix the redirect, or correct the link?

Add tests with mocks

I have created a small test for the DataInfo component at: src/data/tests/dataInfo.test.js.

There are several things that I would like to improve:

1.- The test didn't work because it seems the method document.body.createTextRange is not implemented in jsDom. We found some questions in stack overflow that explain some solutions like this one. We added directly the code and it seems to work...however, it would be better to reuse that code in other components that depend on codeMirror.
2.- I would like to mock the axios calls to the server like it is explained in several places like here.
3.- I would like to test the rest of the components and options.

Can't access ShEx functionalities

While implementing some enhancements to the client I realized I couldn't access the pages related to ShEx operations:

All I get is a blank page and the following error in the console:
TypeError: Cannot read property 'line' of undefined
at yashe.bundled.min.js:29480
at s (yashe.bundled.min.js:5605)
at t (yashe.bundled.min.js:5620)
at x.foldCode (yashe.bundled.min.js:5667)
at x.e.collapsePrefixes (yashe.bundled.min.js:28673)
at w (yashe.bundled.min.js:28850)
at Function.v.fromTextArea (yashe.bundled.min.js:28924)
at ShExForm.js:16
at ml (react-dom.production.min.js:4706)
at Fs (react-dom.production.min.js:6471)
vl @ react-dom.production.min.js:4636
react-dom.production.min.js:2835

Does it happen to you as well? @labra @mistermboy
Cant it be related to #19 or am I missing something?

Enhance Permalinks

Right now permalinks are too long and they are sometimes shown on hidden places. We should implement the functionalities already present in Wikishape:

  • Use shorter permalinks
  • Place the permalink buttons on more visible spots
  • Allow users to copy the permalinks to their clipboards

xmi2shex doesn't work

Hi,

the UML conversion to ShEx is currently broken. Even when I try to run the example...I only get an error response:

Error response from https://api.rdfshape.weso.es
An error has occurred while creating the ShEx equivalent. Check your inputs.

Cheers
Ralf

Error when parsing Turtle files with literals that contain double quotes

It seems that the rdfshape client doesn't handle properly Turtle files that contain escaped literals with double quotes. For example something like the following gives a strange error:

prefix : <http://example.org/>

:alice :name "\"Alice\"" .

The error message is not very helpful and says:

Error response from data/info

syntax error in line 3 near '"'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.