grViz in quarto dashboard

[antoine4ucsd]

Bug description

I cannot render a grViz in my quarto dashboard while the code works well outside the dashboard

Steps to reproduce

---
title: "my board"
format: 
  dashboard:
    embed-resources: true
    scrolling: false
    nav-buttons:
      - icon: globe
fig-width: 10
fig-asp: 0.3
theme: [sandstone, theme/custom2.css]

---

```{r}
library(htmltools)
library(DiagrammeRsvg)
library(DiagrammeR)
library(rsvg)
mygraph<- grViz("
digraph transmission {
  graph [layout = dot, rankdir = TB]

  node [shape = box, style = \"rounded,filled\", fillcolor = lightgray, color = gray20, fontname = Helvetica, fontsize = 12]

  D [label = 'Fruit Bat']
  B [label = 'Human', fillcolor = red]  # Red fill for B
  C [label = 'Human']

  D -> B
  B -> C
  C -> B
}
")

```
### Column {.tabset width="30%"}

```{r}
#| title: chain
mygraph
```

Actual behavior

I get this error message in the box
TypeError: Assignment to constant variable.

Expected behavior

No response

Your environment

No response

Quarto check output

quarto check
Quarto 1.6.42
[✓] Checking environment information...
Quarto cache location: /Users/antoinechaillon/Library/Caches/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.6.42
Path: /Applications/quarto/bin

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

[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/Library/TinyTeX/bin/universal-darwin
Version: 2024

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

[✓] Checking Python 3 installation....OK
Version: 3.9.12
Path: /Users/.virtualenvs/r-reticulate/bin/python3
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
Version: 4.4.1
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
knitr: 1.49
rmarkdown: 2.28

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

[cscheid]

This is a bug in grViz. This isn't valid JS syntax from grViz.js:

        el.innerHTML = Viz(x.diagram, format="svg", engine=x.config.engine, options=x.config.options);

What's happening here is that options=x.config.options is being interpreted as a global assignment to options, which is a const in Quarto.

[cderv]

@antoine4ucsd see

• DiagrammeR Graph not displayed when rendering in Quarto rich-iannone/DiagrammeR#519

It is a problem with Quarto Preview. You can use 'quarto render' and publish your document or use a local webserver like servr::httd(), and your document should show correctly.

What's happening here is that options=x.config.options is being interpreted as a global assignment to options, which is a const in Quarto.

@cscheid Thanks for this. The problem is with quarto preview only, and in debug mode, I did not find the const options that was blocking but this options now, so I'll try to find and see if we can help with a fix in @rich-iannone R package.

quarto-cli/src/resources/preview/quarto-preview.html

Lines 6 to 14 in 73805d3

	const options = {
	origin: "<%- origin %>",
	search: "<%- search %>",
	inputFile: "<%- inputFile %>",
	isPresentation: <%= isPresentation %>
	}
	document.addEventListener("DOMContentLoaded", function () {
	window.QuartoPreview.init(options);
	});

Does it mean that no JS script in HTML file produced by quarto can use options value in their JS ?

because I would like to do this

    window.QuartoPreview.init({
      origin: "<%- origin %>",
      search: "<%- search %>",
      inputFile: "<%- inputFile %>",
      isPresentation: <%= isPresentation %>
    });

which solves the problem

[cscheid]

It means they can't assign to values. These two JS statements are equivalent to one another:

// 1
foo(options = bar) // this isn't a named parameter, it's an assignment expression inside a positional parameter!

//2
options = bar;
foo(options)

[cderv]

I understand that. It still raised the question of using a global const options in quarto-preview.html instead of a scoped usage. I opened #12517 to discuss this.

Regarding DiagrammeR, I'll help fix the logic there.

[antoine4ucsd]

thank you all
if that helps, the error message I get in the viewer pan of Rstudio is not present when I look at the deployed dashboard on my browser (the diagram looks ok there, which is the most important)