Enhance image handling in visualizations

weso / rdfshape-client

Web client for RDFShape API with human-friendly validations and visualizations.

https://rdfshape.weso.es

MIT License

10 stars 5 forks source link

Enhance image handling in visualizations #49

Closed ulitol97 closed 2 years ago

ulitol97 commented 3 years ago

The application currently offers two types of visualizations:

RDF data visualizations (https://rdfshape.weso.es/dataVisualize, https://rdfshape.weso.es/dataMergeVisualize).
ShEx visualizations (https://rdfshape.weso.es/shExVisualize).

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.

ulitol97 commented 3 years ago

Update after #51:

~~RDF visualizations allow to choose a target image format, but all options return an SVG.~~ The output format is the one selected by the user.
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. Solved, examples below.

Pending issues:

ShEx visualizations only allow the SVG format.

Examples of embedded visualizations (click on the images to visit the visualizations). The links to the visualizations can be used in iframes and more to request the image from RdfShape. What do you think, @labra?

RDF sample:
RDF sample (cyto):
ShEx sample:

ulitol97 commented 2 years ago

In #77, several changes have been made to tackle this issue:

A new ShowVisualization component has been created that is capable of rendering and handling all the visualization state by itself, given the initial data and visualization type as props.
Visualizations contain controls that mutate depending on the visualization type. These controls include:
- Zoom controls
- Full-screen toggle (native full-screen API)
- Embed button, redirecting to a link only rendering the visualization (useful for iframes, etc.)
- Other controls for Cytoscape visualizations (center graph, node color, graph layout)

These changes are good for now.