htmlwidget not rendering properly in quarto dashboard

Open
  • Is something wrong?
#492 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
r
Domain
frontend, web-dev

Research direction

Run the supplied Quarto dashboard example with the two timevis tabs and compare the first-tab and later-tab behavior before and after a browser refresh. Trace how the widgets are rendered when a dashboard tab or tabset becomes visible; done when both timelines display their correct height and data without manual refresh.

Written by the indexing model from the issue text.

Description

Hello
I have an issue with htmlwidgets (leaflet, timevis,DiagrammeR, etc)
when I render my dashboard like below, the first tab 'timeline' is showing the expected timeline but the second tab is not: the height is incorrect and the data are not displayed properly.if I refresh manually my browser, it 'works' but I have to do it each time I move to a new tab or a new tabset within a tab

I also tried to save my widget and include it as iframe but same issue when the timevis is not on the first tab...

# Save widget to an HTML file
timevis(dataOB, height = "700px", width = "1800px") %>%
  saveWidget("timevis_widget.html", selfcontained = TRUE)


<iframe src="timevis_widget.html" width="100%" height="600px" style="border:none;">
</iframe>

see below before refresh

Image

and after refresh

Image

my quarto code:


---
title: "test timeline"
format: 
  dashboard:
    embed-resources: true
    scrolling: false
    nav-buttons:
      - icon: globe
---



# Timeline (showing as expected)

## Row {height="100%"}

```{r}
#| title: ⏰ timeline


library(timevis)

countryToCode <- list(
  "Argentina" = "ar",
  "Belgium" = "be",
  "Brazil" = "br",
  "Colombia" = "co",
  "Costa Rica" = "cr",
  "France" = "fr",
  "Germany" = "de",
  "Netherlands" = "nl"
)

# Template for world cup HTML of each item
templateWC <- function(stage, team1, team2, score1, score2) {
  sprintf(
    '<table><tbody>
      <tr><td colspan="3"><em>%s</em></td></tr>
      <tr>
        <td>%s</td>
        <th>&nbsp;%s - %s&nbsp;</th>
        <td>%s</td>
      </tr>
      <tr>
        <td><img src="https://flagpedia.net/data/flags/mini/%s.png" width="31" height="20" alt="%s"></td>
        <th></th>
        <td><img src="https://flagpedia.net/data/flags/mini/%s.png" width="31" height="20" alt="%s"></td>
      </tr>
    </tbody></table>',
    stage, team1, score1, score2, team2, countryToCode[[team1]], team1, countryToCode[[team2]], team2
  )
}

# Data for world cup 2014
dataWC <- data.frame(
  start = c(
    "2014-07-04 13:00",
    "2014-07-04 17:00",
    "2014-07-05 13:00",
    "2014-07-05 17:00",
    "2014-07-08 17:00",
    "2014-07-09 17:00",
    "2014-07-13 16:00"
  ),
  content = c(
    templateWC("quarter-finals", "France", "Germany", 0, 1),
    templateWC("quarter-finals", "Brazil", "Colombia", 2, 1),
    templateWC("quarter-finals", "Argentina", "Belgium", 1, 0),
    templateWC("quarter-finals", "Netherlands", "Costa Rica", "0 (4)", "0 (3)"),
    templateWC("semi-finals", "Brazil", "Germany", 1, 7),
    templateWC("semi-finals", "Netherlands", "Argentina", "0 (2)", "0 (4)"),
    templateWC("final", "Germany", "Argentina", 1, 0)
  ),
  goalsHome = c(0, 2, 1, 4, 1, 2, 1),
  goalsAway = c(1, 1, 0, 3, 7, 4, 0)
)


timevis(dataWC)


```



# Timeline 2 (not showing as expected)

## Row {height="100%"}

```{r}
#| title: ⏰ timeline


timevis(dataWC)

```

can you help with that?
thank you!

Dominant language
R
Stars
801
Forks
202
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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.

More from ramnathv/htmlwidgets

All issues in ramnathv/htmlwidgets

Similar issues

More R issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.