Interactive plots with lots of overlayed peaks appear blank

[zeehio]

Problem 1

plotly does not support annotation_raster between geoms, and places it above or below all of them. When we have a sample plotted with overlayed rectangles, the rectangles are not seen because they appear below the image.
https://github.com/plotly/plotly.R/blob/9ee548023bba6d68dd953f46485b2e611026766b/R/layers2layout.R#L12

Actions:

• Provide a pull request to plotly.R. The PR removes the layer2layout conversion for RasterAnnot and provides a layar2trace conversion instead, using an image trace (it was not implemented with image traces because plotly-js did not have them at the time). I tested an implementation. It can't work because traces don't have a well defined z-order in plotly.js. Add way to configure trace module ordering within subplot plotly/plotly.js#3748 So changing ggplot2 raster annotations from "plotly layout images" to "plotly trace images" makes images to appear above the grid axis, but below other traces (we don't have control of the order of the geoms. I can't fix the z-index issue on plotly.js so I will drop this and hope for someone to eventually provide that feature to plotly.js. We will use a workaround.
• Workaround: Add some additional dummy layers on top, so the rounding of the z-order takes the current annotation raster below instead of above

Problem 2

ggplotly is not hiding one of the legends

Action:

• Test if this fix from master works Fix bug: ggplotly() no longer removes legends plotly/plotly.R#2234
• Depend on master plotly for now

Problem 3

When a legend appears and it doesn't have enough space, plotly js fails with a JavaScript error and the plot becomes a blank page

Actions:

• Fix Problem 2, so we don't reach this issue
• Attempt fixing this problem in axisDraw: Hitting ax.domain[1] < ax.domain[0] plotly/plotly.js#6499