Quarto Slideshow Output Display with echarts4r Not Meeting Expectations

tanchangde commented 1 year ago

Bug description

This abnormality can be rectified with a simple refresh. Additionally, there are no such issues under the same version of Edge on Mac.

Steps to reproduce

Step one, render the following code.
Step Two, in the associated Edge browser window that pops up, press the o key, then locate the slide before the echarts4r output, press the o key again, then navigate to the slide containing the echarts4r output. You should be able to see this anomaly.

---
title: "test"
date:  last-modified
format:
    revealjs:
        incremental: false
        embed-resources: true
        smaller: true
        number-sections: true
        width: 1280
        height: 720
execute: 
  echo: false
---

```{r load_library}
library(conflicted)
library(tidyverse)
conflict_prefer("filter", "dplyr", "stats")
library(magrittr)
library(echarts4r)
library(htmlwidgets)

echarts4r output

:::: columns

::: {.column width="82%"}

months <- c("m1", "m2", "m3", "m4", "m5", "m6")
set.seed(123)
year_2022 <- round(runif(6, min = 2000, max = 3000), 2)
year_2023 <- round(runif(6, min = 1000, max = 1500), 2)
df <-
  tibble(Month = months,
         Y2022 = year_2022,
         Y2023 = year_2023) %>%
  mutate(growth_rate = Y2023 / Y2022 - 1,
         growth_value = Y2023 - Y2022)

list_label <- list(
  show = TRUE,
  fontSize = 10,
  fontWeight = "fontWeight",
  position = "top",
  rotate = 45,
  formatter = JS(
    "function(params){
             var num = Math.floor(params.value[1]);
                  return num.toLocaleString('en-US');
             }"
  )
)

df %>%
  e_charts(Month, width = 1000, height = 600, renderer = "svg") |>
  e_bar(Y2022, y_index = 0,
        label = list_label) |>
  e_bar(Y2023, y_index = 0, label = list_label) |>
  e_bar(growth_value, y_index = 0, label = list_label) |>
  e_line(
    growth_rate,
    y_index = 1,
    smooth = TRUE,
    label = list(
      show = TRUE,
      position = "bottom",
      formatter = JS(
        "function(params){
                  return (params.value[1] * 100).toFixed(0) + '%';
            }"
      )
    )
  ) |>
  e_y_axis(index = 0,
           splitLine = list(show = FALSE)) |>
  e_y_axis(
    index = 1,
    formatter = e_axis_formatter("percent", digits = 0),
    splitLine = list(show = FALSE)
  ) |>
  e_legend(bottom = 0)

:::

::: {.column width="18%"}

::: {.callout-important appearance="simple"} balala :::

:::

::::


### Expected behavior

<img width="1880" alt="image" src="https://github.com/quarto-dev/quarto-cli/assets/13819903/5f35934b-3530-449a-a737-f15092344d29">

### Actual behavior

<img width="1877" alt="image" src="https://github.com/quarto-dev/quarto-cli/assets/13819903/90fe59b1-8b03-4168-b42a-f346de31f097">

### Your environment

* Browser Version: Edge, 114.0.1823.67 (Official build) (64-bit)
* IDE:RStudio 2023.06.0+421 "Mountain Hydrangea" Release (583b465ecc45e60ee9de085148cd2f9741cc5214, 2023-06-05) for windows
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.06.0+421 Chrome/110.0.5481.208 Electron/23.3.0 Safari/537.36

```txt
R version 4.3.0 (2023-04-21 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default

locale:
[1] LC_COLLATE=Chinese (Simplified)_China.utf8  LC_CTYPE=Chinese (Simplified)_China.utf8    LC_MONETARY=Chinese (Simplified)_China.utf8 LC_NUMERIC=C                                LC_TIME=Chinese (Simplified)_China.utf8    

time zone: Asia/Shanghai
tzcode source: internal

...

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.353
      Path: C:\Program Files\RStudio\resources\app\bin\quarto\bin
      CodePage: 65001

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.0
      Path: C:/PROGRA~1/R/R-43~1.0
      LibPaths:
        - C:/Program Files/R/R-4.3.0/library
      knitr: 1.42
      rmarkdown: 2.22

[>] Checking Knitr engine render......OK

cderv commented 12 months ago

I am running Version 114.0.1823.67 and can't see this. I tried you step, and even deactivated cache using Devtools console.

I am using pre-release 1.4 version though. Could you try it ?

Also, can you share online maybe your presentation (on https://quartopub.com/ ? ) so that we try with the same version ?

tanchangde commented 12 months ago

Hello, I'm currently unable to upload files to https://quartopub.com/, so I'm providing a link to the file on Google Drive:

https://drive.google.com/file/d/17ImDkWhHnaYiECP3HTO9ExevDqRgmRtH/view?usp=drive_link

I am using pre-release 1.4 version though. Could you try it ?

Thank you for your suggestion, I will give it a try tomorrow my time.

tanchangde commented 12 months ago

I couldn't find the pre-release version 1.4 that you mentioned at Releases · quarto-dev/quarto-cli. Could you provide a more specific version number to ensure we are using the same version?

cderv commented 12 months ago

The link you provided is ok. Last pre-release is 1.4.205, but it moves quickly as we build some daily. So it is this one right now. You can find the latest also at https://quarto.org/docs/download/prerelease.html

tanchangde commented 12 months ago

Hello, I've replicated this issue in Quarto 1.4.205.Today my environment for reproducing the bug is slightly different, so please pay attention to the following 'quarto check' information.

The key to reproducing the issue might be pressing the o key to enter the overview mode, then using the arrow keys to navigate back and forth a few times. When you encounter a slide that includes echarts4r output (which I'll refer to as an echarts4r slide) and observe the chart being scaled, press the o key again. Then, whether transitioning from the slide before the echarts4r slide into the echarts4r slide, or exiting the overview mode directly on the echarts4r slide, anomalies will appear. The former case corresponds to the anomaly captured in the screenshot I provided when reporting the bug earlier, while the latter results in scaling towards the upper-left corner.

Quarto check output

[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.5: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.205
      Path: C:\Users\tanchangde\AppData\Local\Programs\Quarto\bin
      CodePage: 936

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/PROGRA~1/R/R-4.3.1
      LibPaths:
        - C:/Users/tanchangde/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.1/library
      knitr: 1.43
      rmarkdown: 2.23

[>] Checking Knitr engine render......OK

cderv commented 12 months ago

Thanks I can see the behavior you are observing.

It seems that a resize event is triggered when slides are changing (especially when passing to o mode), and this mess up the size.

I don't know if this is echartr specific or if it affects other charts (plotly ?) and if this is related to revealjs conflict or something we do trigger. Like resizing for htmlwidgets.js.

This will require more investigation - those type of issues are really not easy to identify clearly.

tanchangde commented 12 months ago

I conducted some tests using Scatter and line plots in Plotly. The same anomalies seem to appear regardless of whether a two-column layout is considered.

One advantage of Plotly is that when you set the output width to be noticeably smaller than the width of its column, such as setting the slide width to 1280px, and when the two-column layout is in use, the column housing Plotly is set to 82% width, and I set the Plotly output to 950px. No matter how you switch, no anomalies will appear.

This issue seems quite vexing, good luck, my friend.

quarto-dev / quarto-cli