BioCircos plots render layers incorrectly in Dashboard

[pdimens]

Bug description

Hello, I recently changed my reports from using FlexDashboard to Quarto dashboard and there is a noticeable difference in behavior for plots made with BioCircos. Namely, the hover tooltip is hidden beneath the plot, which was not an issue when it rendered in FlexDashboard.

Steps to reproduce

---
title: "BioCircos Test"
execute:
    echo: false
    warning: false
embed-resources: true
format:
  dashboard:
    theme: lumen
    scrolling: true
    expandable: false
---

```{r}
library(BioCircos)
```

# Page 1
## text
Here is some text. Lorem ipsum etc.

```{r}
# Chromosomes on which the points should be displayed
points_chromosomes = c('X', '2', '7', '13', '9')
# Coordinates on which the points should be displayed
points_coordinates = c(102621, 140253678, 98567307, 28937403, 20484611) 
# Values associated with each point, used as radial coordinate 
#   on a scale going to minRadius for the lowest value to maxRadius for the highest value
points_values = 0:4

tracklist = BioCircosSNPTrack('mySNPTrack', points_chromosomes, points_coordinates, 
  points_values, colors = c("tomato2", "darkblue"), minRadius = 0.5, maxRadius = 0.9)

# Background are always placed below other tracks
tracklist = tracklist + BioCircosBackgroundTrack("myBackgroundTrack", 
  minRadius = 0.5, maxRadius = 0.9,
  borderColors = "#AAAAAA", borderSize = 0.6, fillColors = "#B3E6FF")  

BioCircos(tracklist, genomeFillColor = "PuOr",
  chrPad = 0.05, displayGenomeBorder = FALSE, yChr =  FALSE,
  genomeTicksDisplay = FALSE,  genomeLabelTextSize = 18, genomeLabelDy = 0)
```

Actual behavior

The tooltip is behind all the rendered plot components

Expected behavior

The tooltip rendering works correctly in the VSCode Viewer tab and when the QMD is rendered as an HTML document:

Your environment

• IDE: VSCodium 1.97.0
• OS: Cachy OS (Arch Linux, rolling)

Quarto check output

Quarto 1.7.13
[✓] Checking environment information...
      Quarto cache location: /home/pdimens/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.13
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.8 (Conda)
      Path: /home/pdimens/Documents/harpy/.pixi/envs/default/bin/python
      Jupyter: 5.7.2
      Kernels: ir, julia-1.11, python3

(/) Checking Jupyter engine render....Traceback (most recent call last):
  File "/opt/quarto/share/jupyter/jupyter.py", line 21, in <module>
    from notebook import notebook_execute, RestartKernel
  File "/opt/quarto/share/jupyter/notebook.py", line 20, in <module>
    from nbclient import NotebookClient
ModuleNotFoundError: No module named 'nbclient'
[✓] Checking Jupyter engine render....OK

[mcanouil]

This happens for dashboard and revealjs, but not for html format.
This is likely a CSS rule conflict (or JavaScript conflict).

My first guess would be to ask the R package to set Z-index properly on their tooltip to ensure it's always on top.

[mcanouil]

Indeed, the JavaScript script behind the R package does not set any Z-index value for the SVG or the tooltip.

Input

Output

--- title: "BioCircos Test" format: dashboard include-in-header: - text: | <style> .BioCircosSNPTooltip { z-index: 10; } </style> --- ```{r} library(BioCircos) ``` # Page 1 ## text ```{r} # Chromosomes on which the points should be displayed points_chromosomes <- c("X", "2", "7", "13", "9") # Coordinates on which the points should be displayed points_coordinates <- c(102621, 140253678, 98567307, 28937403, 20484611) # Values associated with each point, used as radial coordinate # on a scale going to minRadius for the lowest value to maxRadius for the highest value points_values <- 0:4 tracklist <- BioCircosSNPTrack("mySNPTrack", points_chromosomes, points_coordinates, points_values, colors = c("tomato2", "darkblue"), minRadius = 0.5, maxRadius = 0.9 ) # Background are always placed below other tracks tracklist <- tracklist + BioCircosBackgroundTrack("myBackgroundTrack", minRadius = 0.5, maxRadius = 0.9, borderColors = "#AAAAAA", borderSize = 0.6, fillColors = "#B3E6FF" ) BioCircos(tracklist, genomeFillColor = "PuOr", chrPad = 0.05, displayGenomeBorder = FALSE, yChr = FALSE, genomeTicksDisplay = FALSE, genomeLabelTextSize = 18, genomeLabelDy = 0 ) ```

As soon as the layout use stacking, the figure will be wrong, so this won't be limited to Quarto.

Screen.Recording.2025-02-18.at.16.34.01.mov

[mcanouil]

To me, the issue is on BioCircos which assumes how things are stacked instead of enforcing something to ensure the tooltip is always on top of the SVG.

[pdimens]

Thank you. An Issue was raised on the source repository YaCui/Biocircos.js#7

[mcanouil]

@pdimens Meanwhile, you can use the workaround to add extra CSS to specify z-index.
The trick is to find the right class (or ID) depending on the figure you are drawing.