Compodoc: [FEATURE] Allow zoom in graph

[elvisbegovic]

Overview of the issue

i use v1.0.0-beta.13

Motivation for or Use Case

In overview I ahve problem to read correctly graph at initial zoom and even when zoom maximum.

Initial zoom :

Max zoom:

Suggest a Fix

maybe allow all graph to zoom to infinite?

[jaufgang]

Perhaps in the future, you could consider implementing the dependency graph using an interactive scalable rendering using a library such as one of these:

• http://visjs.org/network_examples.html
• http://js.cytoscape.org/
• https://github.com/auchenberg/dependo

I believe there are a number of other tools that could be used that are not on this list as well.

[vogloblinsky]

@jaufgang
Yes you are right. I use visjs for dom tree graph in component page.
I have done a little test for module graph, works fine but i have an issue with overlaping labels.

[jaufgang]

Another point is that the modules with a large number of components have hard to read diagrams because all of the components are on the same row, so the diagram becomes extremely wide. A remedy for this could be to allow a maximum number of items on a row (maybe 8 or 10?), and then start adding new items on the next row below.

See http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html for an example where items 2, 10, 7 and 12 are all siblings but are on different rows.

I suppose the tricky bit there is keeping the arrow lines readable with a lot of items, but if that problem can be solved I think it look much better

Note that this suggestion might also improve the readability of the existing static images if you don't implement it using visjs.

[jaufgang]

Just FYI, I've stumbled across another cool looking library that you might want to consider using as an alternate to visjs. perhaps it would avoid the overlapping labels issue

[vogloblinsky]

@jaufgang which is ? 😃

[jaufgang]

LOL! I'm sorry, I forgot to add the link.

https://gojs.net

[jaufgang]

Crap, I'm sorry again. I just took a closer look and realized it's a commercial product that doesn't seem to have open source licensing. I wouldn't have posted this if I had noticed that earlier.

It does make cool looking graphs though.

[vogloblinsky]

Oh yes i know it. Yes cool stuff, but not OSS. I think i will have a cool version with https://github.com/cpettitt/dagre-d3

[NicolasBehra]

For more zooming, you can also increase the number of maxZoom allowed under the file ./js/svg-pan-zoom.controls.js

panZoom = svgPanZoom(document.getElementById('module-graph-svg').querySelector('svg'), {
zoomEnabled: true,
minZoom: 1,
maxZoom: 30
});

Hope it helps :)

[vogloblinsky]

Last work on this topic could be seen in this screenshot.
I have done a proof of concept with dagre-d3.

• works fine with long element label.
• graph is simpler because a component which is declarated and exported appears once, and not twice in the viz.js static graph rendering.

__before / viz.js__

__future / dagre-d3__

[mikejf-pr]

I appreciate that there's work happening on a new graphing engine, but given that it's been underway for a while, is there any way we could get some interim improvements to make the current graph a bit more usable? We're having the same zoom problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because it has not had recent activity. Please file a new issue if you are encountering a similar or related problem. Thank you for your contributions.

[lock[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem. Why locking ? Having issues with the most up-to-date context.