A challenge was posed to me... Can we highlight dependencies between items in an HTML grid easily? I initially thought it was an untenable problem but it turned out to be very easy.

The basic strategy was to overlay a canvas over the top of a component we had already built, then utilizing getBoundingClientRect and canvas primitives, draw the arrows. Below is my fiddle. It took a few hours, but was well worth it. I even added some adaptive behavior when the grid expands/contracts to keep the arrows from getting too crowded. If you shrink or grow the example you'll see some arrows switching which 'port' it points to.