search

weso / rdfshape-client

Web client for RDFShape API with human-friendly validations and visualizations.
https://rdfshape.weso.es
MIT License
9 stars 4 forks source link

The UML visualization generated by XMI doesn't show the full diagram #40

Closed labra closed 3 years ago

labra commented 3 years ago

When visualizing a medium size diagram like this one, half of the diagram generated can't be seen.

ExarcaFidalgo commented 3 years ago

Seems like a PlantUML limitation, since we are just showing its output. Inspecting the original, PlantUML is setting a max width of 2000 px to the image generated, regardless of the content. Therefore, those diagrams which tend to be expanded horizontally are cut short.

It is an issue that must be solved in shumlex itself, although i'm unsure of the way. Doesn't seem like the PUML code allows for an increase in size. This may take some time, more than it initially seemed.

ExarcaFidalgo commented 3 years ago

Originally posted by @jorgealvarezfidalgo in https://github.com/weso/shumlex/issues/14#issuecomment-730281279

Sobre los progresos realizados

El proceso de creación de diagramas mediante Mermaid resulta algo engorroso por la cantidad de caracteres que nosotros empleamos (<>:~...) que esto no acepta. A base de emplear sustitutos y reemplazarlos dinámicamente, conseguimos mantenerlo.

No obstante, el resultado final parece una mejoría. Un SVG que nos permite copiar los textos que contiene, que podemos descargar como SVG o PNG (presuntamente) y en principio, configurable en cuanto a temas estilísticos.

imagen

En cuanto al diagrama que ocasionó el caos, he de solucionar un par de minucias, pero aquí lo tenemos en su completitud. De algún modo, he de determinar dinámicamente la magnitud del diagrama para ajustar el tamaño del SVG respecto a su contenedor y así, hacerlo legible.

imagen

Con tal cantidad de relaciones que posee, es algo farragoso, pero me parece que usemos lo que usemos, eso es dificilmente evitable.

labra commented 3 years ago

Una posibilidad a estudiar sería mostrar dinámicamente el diagrama de forma configurable y bajo demanda del usuario.

Por ejemplo, podría mostrarse solamente una de las entidades y los vecinos con un botón que indique que hay más clases y que al pulsarlo las mostrase. Una visualización muy chula es ésta. En este artículo explica las tecnologías que usaron.

Algunas librerías de visualización de grafos que se podrían explorar son vis.js, d3.js, Cytoscape, etc...

ExarcaFidalgo commented 3 years ago

Ah, esa es una fantástica idea. Coincido que estos diagramas grandes no aportan gran cosa, más allá de confusión. Decididamente, necesitan un mecanismo que haga su estudio más claro... Me gusta lo que planteas y veré si puedo conseguir algo similar.

Vamos por partes, no obstante. Primero, que genere un SVG para todas las características que soportamos. Tras acabar eso, abriré una nueva Issue a ese respecto.

By the way, I copied my last comment from the other repo did not intend to disrupt the language adopted here. So, a translation:

Ah yes, that's an excellent idea. I agree; those large diagrams do not contribute much beyond some confusion. Indeed, a mechanism which eases its study is necessary. I like your input and I will look for a similar solution.

Nonetheless, let's keep it straight. Firstly, to generate any SVG according to the supported features. Then, a new issue on this matter shall be opened.

ExarcaFidalgo commented 3 years ago

Later than I would have liked, but I have resolved this issue in my fork by integrating the new Shumlex version. It now makes use of SVG to show the UML class diagram, allowing for its download as well. imagen

It feels somewhat constrained in that space. Maybe it would be better if we placed it in the next row, so it could make use of the full width?

Besides that possible modification, I'll try to implement a download option for the graph before pull requesting.

labra commented 3 years ago

One possibility is to allow the different windows/panes in RDFShape to be customizable by the user, i.e. that a user could change the resize the windows as he wants.

It would be even greater if we could offer other options on those windows/panes similar to a desktop application.

We have already a issue for resizing the windows here

labra commented 3 years ago

I noticed now that the YaSHE window (the editor of ShEx) already supports to increase the size of the editor to fit the whole browser window. Maybe a similar functionality could more easily be added to the SVG visualizer window?

ExarcaFidalgo commented 3 years ago

Well, here's my take on that. Similarly to what's offered in Yashe, a quickly implemented fullscreen function. imagen

imagen Of course, our old friend Genewiki isn't as pretty, but it is a much better option to contemplate it. imagen

Did it for the graph as well. imagen

imagen

Which may be now downloaded with the current layout displayed. imagen

Any suggestions? I think that's pretty much it for now.

labra commented 3 years ago

That looks quite good. I think the only possibility would be to be able to allow the user to move the positions of the generated boxes to whichever position he chose or try to work on the visualization that shows a main shape and its inmediate neighbours on demand, but I understand that those are more long term changes. You may open a new issue for each of those approaches as future work and deploy the new functionality as is for now...I would really like to play with it as soon as possible 😄