feat(wrap-stream-in-html): adds a gradient on highlighted edges (#878)

## Description

- adds a gradient on highlighted edges (that appear on _hover_ or on
_right click_)

## Motivation and Context

This makes it easier to distinguish the 'from' and 'end' parts of the
edge

## How Has This Been Tested?

- [x] green ci
- [x] eyeballs x examples

## Screenshots

### After

<img width="758" alt="after"
src="https://github.com/sverweij/dependency-cruiser/assets/4822597/35e56445-6c6d-47b6-a9d1-26d4e4e0ec4e">


### Before
<img width="758" alt="before"
src="https://github.com/sverweij/dependency-cruiser/assets/4822597/7d651600-ee12-4798-bd77-0b0e2b0aa850">


## 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)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist

- [x] 📖

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

- [x] ⚖️
- The contribution will be subject to [The MIT
license](https://github.com/sverweij/dependency-cruiser/blob/main/LICENSE),
and I'm OK with that.
  - The contribution is my own original work.
- I am ok with the stuff in
[**CONTRIBUTING.md**](https://github.com/sverweij/dependency-cruiser/blob/main/.github/CONTRIBUTING.md).

doc/cli.md

@@ -1440,7 +1440,7 @@ GraphViz dot into html that is geared to make the graph easier to use. It adds a
   Can be cleared with a left mouse click on something not a module or dependency
   or by pressing the _Escape_ key.
 
-<img width="799" alt="highlight on hover" src="assets/highlight-on-hover.png">
+<img width="1059" alt="highlight on hover" src="assets/highlight-on-hover.png">
 
 Typical use:
 

src/cli/tools/svg-in-html-snippets/script.js

@@ -249,3 +249,33 @@ document.addEventListener("mouseover", getHoverHandler(title2ElementMap));
 document.addEventListener("keydown", keyboardEventHandler);
 document.getElementById("close-hints").addEventListener("click", hints.hide);
 document.getElementById("button_help").addEventListener("click", hints.toggle);
+document.querySelector("svg").insertAdjacentHTML(
+  "afterbegin",
+  `<linearGradient id="edgeGradient">
+      <stop offset="0%" stop-color="fuchsia"/>
+      <stop offset="100%" stop-color="purple"/>
+   </linearGradient>
+  `,
+);
+
+// Add a small increment to the last value of the path to make gradients on
+// horizontal paths work. Without them all browsers I tested with (firefox,
+// chrome) do not render the gradient, but instead make the line transparent
+// (or the color of the background, I haven't looked into it that deeply,
+// but for the hack it doesn't matter which).
+function skewLineABit(lDrawingInstructions) {
+  var lLastValue = lDrawingInstructions.match(/(\d+\.?\d*)$/)[0];
+  // Smaller values than .001 _should_ work as well, but don't in all
+  // cases. Even this value is so small that it is not visible to the
+  // human eye (tested with the two I have at my disposal).
+  var lNewLastValue = parseFloat(lLastValue) + 0.001;
+
+  return lDrawingInstructions.replace(lLastValue, lNewLastValue);
+}
+
+nodeListToArray(document.querySelectorAll("path"))
+  .filter((pElement) => pElement.parentElement.classList.contains("edge"))
+  .forEach(
+    (pElement) =>
+      (pElement.attributes.d.value = skewLineABit(pElement.attributes.d.value)),
+  );

src/cli/tools/svg-in-html-snippets/style.css

@@ -14,7 +14,7 @@
 .edge:active ellipse,
 .edge:hover ellipse,
 .edge.current ellipse {
-  stroke: fuchsia;
+  stroke: url(#edgeGradient);
   stroke-width: 3;
   stroke-opacity: 1;
 }