quarto-dev / quarto-dev/quarto-cli

Mermaid href click interaction does not work

Open
#10,450 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Bug description

With Quarto CLI 1.4.510 through 1.5.56, my Mermaid diagram's click functionality doesn't work. The text appears clickable, but actually clicking has no effect. Tested in HTML and RevealJS format.

```{mermaid}
%%{init:{'securityLevel':'loose'}}%%
gantt
  dateFormat YYYY-MM
  axisFormat %Y

  Foo     :done, foo, 2000-01, 2001-01

  click foo href "https://example.com/"
```

My first thought was that securityLevel needed to be set, but the setting had no effect.

Steps to reproduce
  • Create index.qmd with the content above
  • quarto preview index.qmd
  • The text is bold and blue. If the click instruction is removed from the mermaid code, the text returns to plain black. Mermaid seems to be receiving the instruction to render the clickable element.
  • Hover over the text "Foo" or the bar. The cursor shows that this is a clickable element by turning into a pointer finger.
  • Click the element. Nothing happens!
Expected behavior

On clicking the element, my browser is redirected to https://example.com

Actual behavior

On clicking the element, nothing happens

Your environment
  • vim
  • Pop!_OS 22
Quarto check output
$ quarto check
Quarto 1.5.56
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.56
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2023.11
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/robatt/.TinyTeX/bin/x86_64-linux
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.10.14 (Conda)
      Path: /home/robatt/.local/share/miniforge3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

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

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

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

Reproduce the report from index.qmd with quarto preview index.qmd, using the Mermaid gantt example and testing both HTML and RevealJS output. Trace the rendered click interaction in the browser and verify that selecting Foo redirects to https://example.com without breaking the expected styling or behavior.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.