This PR changes the Overlay from using an svg component with rects, to simply dropping divs in the right spot in front of the canvas. The whole-page svg element had to be rendered on top of the text layer to render the clickable boxes, which prevented users from selecting text on the page. With this approach, the clickable divs themselves get a higher z-index, so the overlay's div can sit behind the canvas and page text, but the clickable boxes will render on top without otherwise preventing users from selecting text.
Ref https://github.com/allenai/scholar/issues/28330 (resolving the highlighting fix) Ref https://github.com/allenai/scholar/issues/28328 (settling on CSS as the means of styling/coloring these boxes)
This PR changes the Overlay from using an
svgcomponent withrects, to simply droppingdivs in the right spot in front of the canvas. The whole-pagesvgelement had to be rendered on top of the text layer to render the clickable boxes, which prevented users from selecting text on the page. With this approach, the clickabledivs themselves get a higher z-index, so the overlay'sdivcan sit behind the canvas and page text, but the clickable boxes will render on top without otherwise preventing users from selecting text.Here's a .gif to show what I mean: