quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.84k stars 312 forks source link

Altair Tooltip Offset #8102

Closed timbmg closed 9 months ago

timbmg commented 9 months ago

Bug description

Similar to #2430, the tooltip has an offset / the "border" of the tooltip does not correspond to the border of the grid in the example below. I have also experinece this in a circle/line plot.

Steps to reproduce

---
title: "Test"
format:
  revealjs:
    code-fold: true
    theme: white
jupyter: python3
---

## Line Chart

```{python}
import altair as alt
import numpy as np
import pandas as pd
x = np.arange(100)
source = pd.DataFrame({
  'x': x,
  'f(x)': np.sin(x / 5)
})

alt.Chart(source).mark_line().encode(
    x='x',
    y='f(x)',
    tooltip=[
        alt.Tooltip("x"),
        alt.Tooltip("f(x)"),
    ]
)

Heatmap


# Compute x^2 + y^2 across a 2D grid
x, y = np.meshgrid(range(-5, 5), range(-5, 5))
z = x ** 2 + y ** 2

# Convert this grid to columnar data expected by Altair
source = pd.DataFrame({'x': x.ravel(),
                     'y': y.ravel(),
                     'z': z.ravel()})

alt.Chart(source).mark_rect().encode(
    x='x:O',
    y='y:O',
    color='z:Q',
    tooltip=[
        alt.Tooltip("x"),
        alt.Tooltip("y"),
        alt.Tooltip("z"),
    ]
)


<img width="732" alt="Screenshot 2024-01-03 at 17 18 11" src="https://github.com/quarto-dev/quarto-cli/assets/11020443/3ce03b27-a436-42d5-a002-669648e4992a">
<img width="574" alt="Screenshot 2024-01-03 at 17 18 28" src="https://github.com/quarto-dev/quarto-cli/assets/11020443/c311690b-c2e7-42ca-a89d-ce1f130fe8bd">

### Expected behavior

_No response_

### Actual behavior

_No response_

### Your environment

- Mac Ventuar 13.4.1
- Python 3.11.5
- quarto 1.3.450
- altair 5.2.0 

### Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.450
      Path: /Applications/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.5 (Conda)
      Path: /opt/homebrew/Caskroom/miniconda/base/envs/my-proj/bin/python
      Jupyter: 5.5.0
      Kernels: python3

(-) Checking Jupyter engine render....0.00s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/
mcanouil commented 9 months ago

Could you properly close your code blocks and use extra backticks when include code blocks? (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

A placeholder image

The end.

timbmg commented 9 months ago

@mcanouil, done! Thanks for the tip with the 4 backticks!

mcanouil commented 9 months ago

Another side note, it is good practice and often a requirement in markdown to have empty lines around headings and code blocks. This reduces a lot the number of parsing errors.

cscheid commented 9 months ago

Unfortunately, this isn't a Quarto bug, and there's nothing we can do here. You can reproduce this issue outside of quarto by creating a standalone vega + revealjs presentation. (It's not a trivial issue to fix either; Vega assumes a 100% zoom in its point location code. I tried fixing it in the past and failed.)

timbmg commented 9 months ago

Thank you @cscheid! Is there already an issue in vega? Sorry I am new to this, don't even really know what to search for.

cscheid commented 9 months ago

There might not be, because I happen to know the Vega devs personally (from past academic life) and I reached out to them out-of-band.

But I would start by creating a simple example using a plain revealjs presentation (no quarto, using the latest revealjs) that embeds a plain vega-lite-using-JS plot still experiences the issue, and then filing a bug with https://github.com/vega/vega.

In other words, I don't think this is an Altair bug, or a Quarto bug. I believe this is a Vega bug that arises out of the way they compute screen offsets.