Guidelines for creating connections between different areas of a UI

Previous discussion What's an intuitive interface for making connections between UI elements?

We have a web application called a genome browser, and we want to draw connections between different areas of the genome. Since this is sort of application specific context, let's imagine a more general idea. Let's say you have two different graphs, and you want to connect points between them

So we can mock this up like this

enter image description here

Now, what if, instead of just one bar graph on top and bottom, we have two on top and two on the bottom, where the two on top are related by their genomic region and the two on the bottom are related by their genomic region. So now, if we want to draw connections between them, there are lots of cross cutting elements

enter image description here

Now at this point, the user interface seems pretty chaotic. Also there are other concerns like

  • the connecting lines need to be drawn in an overlay, and this really limits how we can interact with it because in HTML, overlays really mess up your event handling: you have to put pointer-events:none on the overlay to click through to the underlay, and can possibly turn it off to interact with the overlay, but this requires a manual toggle
  • what if we just render the connecting lines independently of the graphs on the top and bottom, because maybe we just care about the connections and the pattern they make more than the actual bargraphs. in that case we can just render to a middle area rather than an overlay, but it becomes a little confusing what "status" this now holds in the app, how do you turn it on and off if it is separate from the rows on the top and bottom?

Those are just a couple concerns. The overlay often results in at least some visual chaos and conceptual confusion, even though it can kind of help in some cases too. Are there any guidelines or similar user interfaces in other apps that have these types of concerns?

Tags: , , , , , ,