---
format: 
  html: 
    embed-resources: true
execute: 
  eval: true
  echo: false
  warning: false
---

```{r}
library(ggplot2)
library(dplyr)
library(ggiraph)
library(htmltools)
```

```{r}
set.seed(20261027)
plot_data <- diamonds |>
  group_by(cut) |>
  slice_sample(n = 100) |>
  ungroup()
```

```{r}
options_vec <- levels(diamonds$cut)
names(options_vec) <- options_vec
```

```{r}
dropdown_html <- tags$div(
  tags$select(
    id = "dropdown",
    lapply(
      names(options_vec),
      function(name) {
        tags$option(
          value =
            options_vec[[name]],
          name
        )
      }
    )
  )
)
```

```{r}
g <- ggplot(
  data = plot_data,
  mapping = aes(x = carat, y = price)
) +
  geom_point_interactive(
    mapping = aes(tooltip = cut, data_id = cut)
  )
```


```{r}
g_int <- girafe(ggobj = g)
```


```{r}
browsable(
  tagList(
    dropdown_html,
    g_int,
    tags$script(HTML("
      function filterByDropdown(selected) {
        document.querySelectorAll('[data-id]').forEach(el => {
          if (el.getAttribute('data-id') === selected) {
            el.setAttribute('style', 'display:block;');
          } else {
            el.setAttribute('style', 'display:none;');
          }
        });
      }

      document.getElementById('dropdown').addEventListener('change', function() {
        filterByDropdown(this.value);
      });

      document.addEventListener('DOMContentLoaded', function() {
        const initialSelected = document.getElementById('dropdown').value;
        filterByDropdown(initialSelected);
      });
    "))
  )
)
```