Trouble with rendering side bars -- Extra Card seems to appear

[mhusted]

Description

I'm running into issue. I think its a format issue, but I'm not sure where I'm going wrong. I've tried to change the layout one by one but still getting into trouble. Currently, I'm running into issues where the side bar is on the right and extra space/card is displayed.

Here's a screenshot:

---
title: "Palmer Penguins Heatmap and Table"
author: "Cobblepot Analytics"
format: 
  dashboard:
    layout: sidebar
server: shiny
---

```{python}
#| context: setup
import seaborn as sns
import pandas as pd
from shiny import reactive
from shiny.express import render, ui
import matplotlib.pyplot as plt
import plotly.graph_objects as go
import os
import itables.interactive
from itables import show
import plotly.express as px
import io
import tempfile
import plotly.io as pio

# Load the penguins dataset
penguins = sns.load_dataset("penguins")
```

# {.sidebar}

![](images/penguins.png){width="80%"}

```{python}
# Define dropdown for filtering by species
species_list = penguins["species"].dropna().unique().tolist()
ui.input_selectize(
    "species", "Species:",
    choices=species_list, selected=species_list, multiple=True
)

# Define dropdown for filtering by islands
island_list = penguins["island"].dropna().unique().tolist()
ui.input_selectize(
    "islands", "Islands:",
    choices=island_list, selected=island_list, multiple=True
)

# Define select input for distribution type
ui.input_select(
    "dist", "Distribution Type:",
    choices=["violin", "hist"], selected="violin"
)

# Define checkbox for rug plot
ui.input_checkbox("rug", "Show Rug Plot", value=True)

# Define a reactive calculation that filters the dataset based on inputs
@reactive.calc
def filtered_penguins():
    # Access input values correctly
    selected_species = input.species()
    selected_islands = input.islands()
    
    # Filter the penguins dataset
    data = penguins[penguins["species"].isin(selected_species)]
    data = data[data["island"].isin(selected_islands)]
    return data
```


# Plots

```{python}

@render.ui
def heatmap():
    # Filter data and create a pivot table
    filtered_data = filtered_penguins()
    heatmap_data = filtered_data.pivot_table(
        index="species", columns="island", aggfunc="size", fill_value=0
    )
    
    # Define custom hover text for each cell
    hover_text = [[f"Species: {species}<br>Island: {island}<br>Count: {count}"
                   for island, count in zip(heatmap_data.columns, row)]
                  for species, row in zip(heatmap_data.index, heatmap_data.values)]
    
    # Generate the interactive heatmap with customized hover text
    fig = go.Figure(
        data=go.Heatmap(
            z=heatmap_data.values,
            x=heatmap_data.columns,
            y=heatmap_data.index,
            text=hover_text,  # Add custom hover text
            hovertemplate="%{text}<extra></extra>",  # Suppress additional info
            colorscale="YlGnBu",
            hoverongaps=False,
            colorbar=dict(title="Count")
        )
    )
    fig.update_layout(
        title="Penguin Count by Species and Island",
        xaxis_title="Island",
        yaxis_title="Species",
    )
    
    # Convert Plotly figure to HTML
    html_content = pio.to_html(fig, full_html=False)
    
    # Render the HTML content inline
    return ui.HTML(html_content)

```

## Row {.tabset}
```{python}
#| title: Distribution
@render.ui
def depth():
    # Access the filtered data and input values correctly
    data = filtered_penguins()
    distribution_type = input.dist()
    show_rug = input.rug()
    
    # Choose plot type based on distribution_type input
    if distribution_type == "violin":
        # Use violin plot for distribution analysis
        fig = px.violin(
            data, x="species", y="bill_depth_mm", color="species",
            box=True,  # Add a box plot inside the violin for summary stats
            points="all" if show_rug else "suspectedoutliers",  # Show all points or just outliers
            title="Interactive Bill Depth Distribution (Violin Plot)"
        )
    else:
        # Interactive histogram plot with Plotly
        fig = px.histogram(
            data, x="bill_depth_mm", color="species",
            marginal="rug" if show_rug else None,  # Show rug if selected
            nbins=30, title="Interactive Bill Depth Distribution (Histogram)"
        )

    fig.update_layout(
        xaxis_title="Species" if distribution_type == "violin" else "Bill Depth (mm)",
        yaxis_title="Bill Depth (mm)" if distribution_type == "violin" else "Count",
        hovermode="closest",
        template="plotly_white"  # Optional: apply a clean white background
    )
    
    # Convert Plotly figure to HTML and return it
    return ui.HTML(fig.to_html(full_html=False))
```


```{python}
#| title: Table 
@render.ui
def dataview():
    data = filtered_penguins()
    return ui.HTML(itables.to_html_datatable(data))
```

# Data
```{python}

```

[cscheid]

This looks like a bug we fixed in recent Quarto versions. Can you check if you're running 1.5 (or ideally 1.6)?

[mcanouil]

Final example showing it works as expected/documented and more like the screenshot from your original post:

Input

Output

--- title: "Palmer Penguins Heatmap and Table" author: "Cobblepot Analytics" format: dashboard server: shiny --- ```{python} #| context: setup import seaborn as sns from shiny.express import ui penguins = sns.load_dataset("penguins") ``` ## Column ### Table {#fig-placeholder} ### Heatmap {#fig-placeholder} ## {.sidebar} {#fig-placeholder} ```{python} species_list = penguins["species"].dropna().unique().tolist() ui.input_selectize( "species", "Species:", choices=species_list, selected=species_list, multiple=True ) ```

[mhusted]

Thank you so I tried to deconstruct it a bit based on your example. The problem that I'm having seems to be directly caused after sidebar now. If I just display the sidebar and heatmap, the sidebar goes to the right and an extra card is created. I tried to see if it was package related as well and it didn't look like it from my testing. I'm thinking its a format issue with my code. If I follow the format that you provided here. It looks correct.

---
title: "Palmer Penguins Heatmap and Table"
author: "Cobblepot Analytics"
format: dashboard
server: shiny
---
```{python}
#| context: setup
import seaborn as sns
from shiny.express import ui
from shiny import reactive

penguins = sns.load_dataset("penguins")
```


## {.sidebar}

![An image]({{< placeholder 200 200 >}}){#fig-placeholder}

```{python}
# Define dropdown for filtering by species
species_list = penguins["species"].dropna().unique().tolist()
ui.input_selectize(
    "species", "Species:",
    choices=species_list, selected=species_list, multiple=True
)

# Define dropdown for filtering by islands
island_list = penguins["island"].dropna().unique().tolist()
ui.input_selectize(
    "islands", "Islands:",
    choices=island_list, selected=island_list, multiple=True
)

# Define select input for distribution type
ui.input_select(
    "dist", "Distribution Type:",
    choices=["violin", "hist"], selected="violin"
)

# Define checkbox for rug plot
ui.input_checkbox("rug", "Show Rug Plot", value=True)

# Define a reactive calculation that filters the dataset based on inputs
@reactive.calc
def filtered_penguins():
    # Access input values correctly
    selected_species = input.species()
    selected_islands = input.islands()
    
    # Filter the penguins dataset
    data = penguins[penguins["species"].isin(selected_species)]
    data = data[data["island"].isin(selected_islands)]
    return data

```

## Row 

### Heatmap

![An image]({{< placeholder 200 200 >}}){#fig-placeholder}

### Table

![An image]({{< placeholder 200 200 >}}){#fig-placeholder}

But when I add the heatmap to the code using this formatting...

---
title: "Palmer Penguins Heatmap and Table"
author: "Cobblepot Analytics"
format: dashboard
server: shiny
---
```{python}
#| context: setup
import seaborn as sns
from shiny import reactive
from shiny.express import render, ui
import plotly.graph_objects as go
import plotly.io as pio

penguins = sns.load_dataset("penguins")
```


## {.sidebar}

![An image]({{< placeholder 200 200 >}}){#fig-placeholder}
```{python}
# Define dropdown for filtering by species
species_list = penguins["species"].dropna().unique().tolist()
ui.input_selectize(
    "species", "Species:",
    choices=species_list, selected=species_list, multiple=True
)

# Define dropdown for filtering by islands
island_list = penguins["island"].dropna().unique().tolist()
ui.input_selectize(
    "islands", "Islands:",
    choices=island_list, selected=island_list, multiple=True
)

# Define select input for distribution type
ui.input_select(
    "dist", "Distribution Type:",
    choices=["violin", "hist"], selected="violin"
)

# Define checkbox for rug plot
ui.input_checkbox("rug", "Show Rug Plot", value=True)

# Define a reactive calculation that filters the dataset based on inputs
@reactive.calc
def filtered_penguins():
    # Access input values correctly
    selected_species = input.species()
    selected_islands = input.islands()
    
    # Filter the penguins dataset
    data = penguins[penguins["species"].isin(selected_species)]
    data = data[data["island"].isin(selected_islands)]
    return data

```

## Row 

### Heatmap

```{python}
@render.ui
def heatmap():
    # Filter data and create a pivot table
    filtered_data = filtered_penguins()
    heatmap_data = filtered_data.pivot_table(
        index="species", columns="island", aggfunc="size", fill_value=0
    )
    
    # Define custom hover text for each cell
    hover_text = [[f"Species: {species}<br>Island: {island}<br>Count: {count}"
                   for island, count in zip(heatmap_data.columns, row)]
                  for species, row in zip(heatmap_data.index, heatmap_data.values)]
    
    # Generate the interactive heatmap with customized hover text
    fig = go.Figure(
        data=go.Heatmap(
            z=heatmap_data.values,
            x=heatmap_data.columns,
            y=heatmap_data.index,
            text=hover_text,  # Add custom hover text
            hovertemplate="%{text}<extra></extra>",  # Suppress additional info
            colorscale="YlGnBu",
            hoverongaps=False,
            colorbar=dict(title="Count")
        )
    )
    fig.update_layout(
        title="Penguin Count by Species and Island",
        xaxis_title="Island",
        yaxis_title="Species",
    )
    
    # Convert Plotly figure to HTML
    html_content = pio.to_html(fig, full_html=False)
    
    # Render the HTML content inline
    return ui.HTML(html_content)
```

### Table

![An image]({{< placeholder 200 200 >}}){#fig-placeholder}

What is rendered:

It creates an extra card and displays the sidebar on the right. I'm thinking that I misunderstood something about the formatting here possibly.

[mcanouil]

I think the issue is your code and how you make your figure.
Why are you making the conversions to HTML for instance?
Are you sure your code does not open a graphic device or output anything before your return ui.HTML().
From Shiny for Python documentation: https://shiny.posit.co/py/components/outputs/plot-plotly/

[mcanouil]

I did a 2 minutes search/reading: https://shiny.posit.co/blog/posts/shiny-express/

Input

Output

--- title: "Palmer Penguins Heatmap and Table" author: "Cobblepot Analytics" format: dashboard server: shiny --- ```{python} #| context: setup import seaborn as sns from shiny import reactive from shiny.express import render, ui from shinywidgets import render_plotly import plotly.graph_objects as go import plotly.io as pio penguins = sns.load_dataset("penguins") ``` ## {.sidebar} {#fig-placeholder} ```{python} # Define dropdown for filtering by species species_list = penguins["species"].dropna().unique().tolist() ui.input_selectize( "species", "Species:", choices=species_list, selected=species_list, multiple=True ) # Define dropdown for filtering by islands island_list = penguins["island"].dropna().unique().tolist() ui.input_selectize( "islands", "Islands:", choices=island_list, selected=island_list, multiple=True ) # Define select input for distribution type ui.input_select( "dist", "Distribution Type:", choices=["violin", "hist"], selected="violin" ) # Define checkbox for rug plot ui.input_checkbox("rug", "Show Rug Plot", value=True) # Define a reactive calculation that filters the dataset based on inputs @reactive.calc def filtered_penguins(): # Access input values correctly selected_species = input.species() selected_islands = input.islands() # Filter the penguins dataset data = penguins[penguins["species"].isin(selected_species)] data = data[data["island"].isin(selected_islands)] return data ``` ## Row ### Heatmap ```{python} @render_plotly def heatmap(): # Filter data and create a pivot table filtered_data = filtered_penguins() heatmap_data = filtered_data.pivot_table( index="species", columns="island", aggfunc="size", fill_value=0 ) # Define custom hover text for each cell hover_text = [[f"Species: {species}<br>Island: {island}<br>Count: {count}" for island, count in zip(heatmap_data.columns, row)] for species, row in zip(heatmap_data.index, heatmap_data.values)] # Generate the interactive heatmap with customized hover text fig = go.Figure( data=go.Heatmap( z=heatmap_data.values, x=heatmap_data.columns, y=heatmap_data.index, text=hover_text, # Add custom hover text hovertemplate="%{text}<extra></extra>", # Suppress additional info colorscale="YlGnBu", hoverongaps=False, colorbar=dict(title="Count") ) ) fig.update_layout( title="Penguin Count by Species and Island", xaxis_title="Island", yaxis_title="Species", ) return fig ``` ### Table {#fig-placeholder}

[mhusted]

Appreciated, thank you. Every time tried to implement it without html it wasn't rendering at all. I coded it wrong in plotly which brought me down a rabbit hole to see if there alternative ways to render it in Quarto.