Feature: Interactive UI Refinements

28mm / blast-radius

Interactive visualizations of Terraform dependency graphs using d3.js

https://28mm.github.io/blast-radius-docs/

MIT License

2.04k stars 258 forks source link

Feature: Interactive UI Refinements #14

Open 28mm opened 6 years ago

28mm commented 6 years ago

It'd be nice to add some basic GUI bits to the web interface. This issue is to track progress and provide a mechanism for comment. Initial goals listed below, along with a mockup.

zoom in/out (via svg-pan-zoom.js)
search/selection of elements (via selectize.js)
download svg (via a modified svg-crowbar script)
help menu:
- links to documentation
- report working directory
- report terraform version / arch
thoughts for later:
- configurable tooltips
- link to resource implementations on GitHub
- link to (or bundle) resource help
- replace "(M)" in modules with a FontAwesome based icon

screen shot 2018-01-28 at 4 12 32 pm

webratz commented 6 years ago

Regarding the Zoom feature mentioned above: I tested blast-radius with few bigger terraform projects and due to the huge size its still very hard to understand whats going on. So zooming should probably work like it does in map applications: The lowsest zoom level (overview) eg only shows connections between different services, but not the actual elements. The further you zoom in one would show more details. This should help to get at first a high level understanding of the service and but still be able to find all that little details when needed

28mm commented 6 years ago

@webratz

thanks for pulling up larger-scale projects, and testing them. I have mostly tested with my own (smaller) projects and the terraform-provider-* examples, which also tend to be smaller. That's exactly the sort of feedback I'm looking for!

You can preview the pan/zoom functionality in the ui-extras branch--with the proviso that most of the other features aren't quite there yet. As implemented, its doesn't do any of the progressive rendering you describe, although I'm thinking of how that might be possible in a future revision.