quarto-dev / quarto-dev/quarto-cli

BioCircos plots render layers incorrectly in Dashboard

Open
#12,107 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug third-party
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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

Image

Expected behavior

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

Image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by rendering the supplied BioCircos example as a Quarto dashboard and compare its tooltip layering with the HTML document and VSCode Viewer. Investigate the dashboard rendering path to identify why the tooltip appears beneath plot components; done means the tooltip is visibly above the rendered plot.

Written by the indexing model from the issue text.

Assessment

Tech stack
r
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.