Many Pages Report Navigation

[Benrdn]

Summary

Hello,

First, Datapane is awesome!!!

Now, I want to generate a report that has many pages.
For that I use this code:

import datapane as dp
from vega_datasets import data
import plotly.express as px

df = data.iris()
fig = (px.scatter(df, "sepalLength", "sepalWidth", color='species'))

app_blocks = dp.Select(
    blocks=[
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
    ], type=dp.SelectType.TABS)

dp.save_report(app_blocks, 'report.html')

When I do this:
-For number of pages < 7, I get TABS
-For number of pages >6, I get DROPDOWN.
i.e., changing dp.Select's type does not effect anything.

This is frustrating because I feel tabs are much more easy to use.

So, in order to get around this, I tried using dp.Group that gets the previous dp.Select:

import datapane as dp
from vega_datasets import data
import plotly.express as px

df = data.iris()
fig = (px.scatter(df, "sepalLength", "sepalWidth", color='species'))

app_blocks = dp.Group(
    dp.Select(
    blocks=[
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
        dp.Select(dp.Plot(fig, label="Plot"), dp.DataTable(df, label="Data")),
    ], type=dp.SelectType.TABS)
)

dp.save_report(app_blocks, 'report.html')

This indeed generates TABS, however: it also generates an empty row at the top of the report, which is also frustrating because now I need to scroll down every time the report is opened.

Am I missing something? How can I achieve many pages navigation using TABS without any artefacts?

Thanks is advance

Additional information

No response

Example

No response

[Benrdn]

For anyone interested, I've found a workaround for dynamically removing the empty line:

def remove_empty_row(html_file):
    with open(html_file, 'r') as file:
        html_content = file.read()

    modified_html = html_content.replace('</head>', '''
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        const navElement = document.querySelector('nav');
        if (navElement) {
            navElement.style.display = 'none';
        }
    });
</script>
</head>''')

    with open(html_file, 'w') as file:
        file.write(modified_html)


def open_html_in_browser(html_file):
    absolute_path = os.path.abspath(html_file)
    webbrowser.open(f'file://{absolute_path}')


def save_report_ext(blocks, out_path):
    dp.save_report(blocks, out_path, formatting=dp.Formatting(width=dp.Width.FULL), open=False)
    remove_empty_row(out_path)
    open_html_in_browser(out_path)

[mands]

Hey @Benrdn - thanks for your message. We're still working on how the Pages navigation works - it was refactored recently to support our Apps feature but is still missing a few features that the previous one had, including supporting the TABS override. We'll add this to the backlog and try to fix very soon!