feat(wrap-stream-in-html): highlight connected edges

[forivall]

Description

Highlights connected edges to hovered node, and connected nodes to hovered edges.

Motivation and Context

#343 (comment) you said it's on your wishlist, and i knew i could bang it out quickly. 😄

How Has This Been Tested?

I just launched it in the browser and hacked away. I was feeling nostalgic so it's es5.

Screenshots

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• Documentation only change
• Refactor (non-breaking change which fixes an issue without changing functionality)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• 📖

  • My change doesn't require a documentation update, or ...
  • it does and I have updated it

• ⚖️

  • The contribution will be subject to The MIT license, and I'm OK with that.
  • The contribution is my own original work.
  • I am ok with the stuff in CONTRIBUTING.md.

[forivall]

When i update the docs, i'd also like to mention this bookmarklet i just made, so that clicking opens vscode instead of in the browser https://gist.github.com/forivall/373425de70964c8c271020cab3650048

document.querySelector('svg').querySelectorAll('a').forEach(function (a) {
  var u = new URL(a.href.baseVal, document.location.href);
  u.protocol = 'vscode:';
  u.pathname = u.pathname.replace(/^\/*/, '//file/');
  a.href.baseVal = u.href;
});

[sverweij]

@forivall whoa - that looks nice!! I'll give it a spin tomorrow!

About the bookmarklet - that's creative! Did you consider using the prefix option? I didn't know about the vscode protocol, but it totally works:

  // in the options section of .dependency-cruiser.js plonk something like this:
  prefix: `vscode://file/${process.cwd()}/`,

# or in a command line variant for it:
depcruise -v -T dot --prefix "vscode://file/`pwd`/" -- src | dot -T svg | depcruise-wrap-stream-in-html | browser

That way the links in the dot (/svg) get this as a prefix. The documentation currently has an example that prefixes it with the base url of an online repository, but it's usable with other protocols as well.

[forivall]

Yeah, I just saw the prefix option earlier. Once again, you've already got something there :P

[sverweij]

@forivall thanks for this! It makes a huge difference in the usability of these reports. Nice touch to also highlight both nodes at the end of an edge on hover - and a good call to leave the existing css in place so there's a fallback for folks who disabled their javascript.

[sverweij]

(the results look too pretty not to have in the cli documentation - so I've added :-) )