How to create tabset programatically from Python

[grst]

Description

I'm trying to create tabs for a tabset in a loop in a Python document. For R, I found this solution on stackoverflow leveraging output: asis. However, when I try the same in Python, the plots do not end up in the right tab.

Repex:

```{python}
import matplotlib.pyplot as plt

```

::: {.panel-tabset}

```{python}
# | echo: false
# | output: asis
for x in ["bar", "foo"]:
    print(f"### {x}")
    print(x, x, x)
    print()
    fig, ax = plt.subplots()
    ax.plot(range(10))
    fig.show()
```

:::

The intermediate markdown looks like this:

```::: {.cell execution_count=1}
``` {.python .cell-code}
import matplotlib.pyplot as plt
```
:::


::: {.panel-tabset}

### bar
bar bar bar

### foo
foo foo foo

![](test_quarto_files/figure-html/cell-3-output-2.png){width=558 height=411}
![](test_quarto_files/figure-html/cell-3-output-3.png){width=558 height=411}


:::

[cscheid]

Unfortunately the issue here appears to be that fig.show() doesn't actually emit output right away, but instead produces some side effect that's eventually processed by jupyter at the end of the loop (cf the output you've shown). In that case, there's not much we can do on our side; you'll have to learn how to make fig.show() do something different. It'll probably be easier to debug this in jupyter itself, or at least to inspect the .ipynb output directly. Just like we have keep-md, we have keep-ipynb.

[freedmanguy]

I came across a similar issue and I may have found a hacky solution. I wasn't using subplots but maybe it can be tailored to that?
Looks like you need to make sure to open a new figure for each iteration inside the loop and for some odd reason (this is the hack) add some whitespace after the figure (otherwise it pastes the tab names next to the figures instead of treating them as tab names). Please excuse the silly data/hist example.

---
title: "Test"
title-block-banner: true
date: today
date-format: "YYYY-MM-DD"
format:
  html:
    theme: "minty"
    embed-resources: true
jupyter: python3
execute:
    echo: false
---


```{python}
import pandas as pd
from typing import List
from IPython.display import display, Markdown
import matplotlib.pyplot as plt

test: pd.DataFrame = pd.concat(
    [pd.DataFrame({'id': 'XXX', 'some_value': list(range(0, 100))}),
    pd.DataFrame({'id': 'YYY', 'some_value': list(range(25, 125))}),
    pd.DataFrame({'id': 'ZZZ', 'some_value': list(range(50, 150))})]
)
```

# Heading

::: {.panel-tabset}

```{python}
#| output: asis
ids: List[str] = test['id'].drop_duplicates().to_list()
for id in ids:
    display(Markdown(f"## {id}"))
    _df: pd.DataFrame = test.query(f'id == "{id}"')
    plt.figure()
    plt.hist(x=_df['some_value'].to_list())
    plt.show()    
    display(Markdown(f" "))
```

:::

[mcanouil]

Could you properly fomart your post for it to be legible?

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[freedmanguy]

Sure, sorry about that. Formatted. Ok now?

[mcanouil]

for some odd reason (this is the hack) add some whitespace after the figure (otherwise it pastes the tab names next to the figures instead of treating them as tab names)

Look at the markdown produced with keep-md: true, you'll see the issue (i.e., you output a single paragraph with both image and text, thus it is parsed as such).

[pchtsp]

This worked for me once I used the display(Markdown("my text")) inside the panel. If I just used the regular print("my text") and then put the image, it did not work for some reason.

So, reusing your example, this will not work, even if it's in theory the same output:

::: {.panel-tabset}

```{python}
#| output: asis
ids: List[str] = test['id'].drop_duplicates().to_list()
for id in ids:
    print("## {id}")
    _df: pd.DataFrame = test.query(f'id == "{id}"')
    plt.figure()
    plt.hist(x=_df['some_value'].to_list())
    plt.show()    
    display(Markdown(f" "))

:::

It produces the title with the correct format, it produces the image. But the image is not positioned inside the panel but at the end.