User: I have this html template in which I insert html plots, which are accessible by tabs. Can you improve this by (1) Restricting plot size to screen
(2) Putting the tabs buttons horizontally instead of vertically 

html_content = f"""
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Tabbed Plot Viewer</title>
                <style>
                    body {{
                        font-family: Arial, sans-serif;
                    }}
                    .tab {{
                        display: none;
                    }}
                    .tab-button {{
                        padding: 10px;
                        cursor: pointer;
                        border: 1px solid #ddd;
                        border-bottom: none;
                        background-color: #f1f1f1;
                        margin-right: 5px;
                    }}
                    .tab-button:hover {{
                        background-color: #e7e7e7;
                    }}
                    .tab-content {{
                        border: 1px solid #ddd;
                        padding: 10px;
                    }}
                    .active {{
                        display: block;
                    }}
                </style>
            </head>
            <body>

            <h1>Interactive Plots</h1>
            <div>
                <button class="tab-button" onclick="openTab(event, 'Plot1')">Plot 1</button>
                <button class="tab-button" onclick="openTab(event, 'Plot2')">Plot 2</button>
            </div>

            <div id="Plot1" class="tab tab-content">
                {st.session_state.chain_base.get_map(withDarkMode=False)._repr_html_()}
            </div>

            <div id="Plot2" class="tab tab-content">
                {pyg.to_html(st.session_state.chain_tess_output.drop("geometry", axis=1))}
            </div>

            <script>
                function openTab(evt, tabName) {{
                    var i, tabcontent, tabbuttons;
                    
                    // Hide all tab content
                    tabcontent = document.getElementsByClassName("tab");
                    for (i = 0; i < tabcontent.length; i++) {{
                        tabcontent[i].style.display = "none";
                    }}

                    // Remove the active class from all buttons
                    tabbuttons = document.getElementsByClassName("tab-button");
                    for (i = 0; i < tabbuttons.length; i++) {{
                        tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
                    }}

                    // Show the current tab and add an "active" class to the button that opened the tab
                    document.getElementById(tabName).style.display = "block";
                    evt.currentTarget.className += " active";
                }}

                // Automatically open the first tab
                document.getElementsByClassName("tab-button")[0].click();
            </script>

            </body>
            </html>
            """
Assistant: To enhance your HTML template according to your requirements, we will make the following changes:

1. **Restrict the plot size to the screen**: We can achieve this by setting a maximum width and height for the `.tab-content` class. Additionally, we can ensure the plots scale down nicely on smaller screens.
2. **Display the tab buttons horizontally**: To achieve a horizontal layout, we can use flexbox on the container of the tab buttons.

Here’s the improved HTML template reflecting these changes:

```python
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Plot Viewer</title>
    <style>
        body {{
            font-family: Arial, sans-serif;
        }}
        .tab {{
            display: none;
        }}
        .tab-button-wrapper {{
            display: flex; /* Use flexbox for horizontal layout */
            border-bottom: 1px solid #ddd; /* Visual separation for tabs */
        }}
        .tab-button {{
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            margin-right: 5px;
            border-radius: 4px 4px 0 0; /* Rounded corners for the top */
        }}
        .tab-button:hover {{
            background-color: #e7e7e7;
        }}
        .tab-content {{
            border: 1px solid #ddd;
            padding: 10px;
            max-width: 100vw; /* Restrict to screen width */
            max-height: 80vh; /* Restrict to 80% of the viewport height */
            overflow: auto; /* Enable scrolling for overflow */
        }}
        .active {{
            display: block;
        }}
    </style>
</head>
<body>

<h1>Interactive Plots</h1>
<div class="tab-button-wrapper">
    <button class="tab-button" onclick="openTab(event, 'Plot1')">Plot 1</button>
    <button class="tab-button" onclick="openTab(event, 'Plot2')">Plot 2</button>
</div>

<div id="Plot1" class="tab tab-content">
    {st.session_state.chain_base.get_map(withDarkMode=False)._repr_html_()}
</div>

<div id="Plot2" class="tab tab-content">
    {pyg.to_html(st.session_state.chain_tess_output.drop("geometry", axis=1))}
</div>

<script>
    function openTab(evt, tabName) {{
        var i, tabcontent, tabbuttons;
        
        // Hide all tab content
        tabcontent = document.getElementsByClassName("tab");
        for (i = 0; i < tabcontent.length; i++) {{
            tabcontent[i].style.display = "none";
        }}

        // Remove the active class from all buttons
        tabbuttons = document.getElementsByClassName("tab-button");
        for (i = 0; i < tabbuttons.length; i++) {{
            tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
        }}

        // Show the current tab and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }}

    // Automatically open the first tab
    document.getElementsByClassName("tab-button")[0].click();
</script>

</body>
</html>
"""
```

### Key Changes:
- Introduced a `.tab-button-wrapper` class with `display: flex` for horizontal placement of the buttons.
- Set `max-width: 100vw;` and `max-height: 80vh;` on `.tab-content` to restrict the size of plots relative to the viewport. This approach also uses `overflow: auto;` to enable scrolling within the plot content if it exceeds the height.
- Added a light border at the bottom of the tab buttons to visually separate them from the content area.

With these updates, your HTML template will be more user-friendly, ensuring that plots remain accessible and visually organized on various screen sizes.
User: Okay, I have some data which I want the user to be able to export from this template as a csv. How do I do that from a third tab?
Assistant: To allow users to export data as a CSV file from your HTML template, you can add a third tab and implement a button that triggers the CSV download. We will use JavaScript to create a Blob from your data, which can then be downloaded when the user clicks the button.

Here's how to implement this:

1. **Add a Third Tab**: This tab will contain a button for exporting data.
2. **Create and Trigger the CSV Download**: Use JavaScript to create a Blob from your data and initiate a download.

Here’s the updated HTML template including these features:

```python
import pandas as pd

# Sample data for export
data_to_export = pd.DataFrame({
    'Column 1': [1, 2, 3, 4],
    'Column 2': ['A', 'B', 'C', 'D']
})

# Convert DataFrame to CSV text
csv_data = data_to_export.to_csv(index=False, encoding='utf-8')

html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Plot Viewer</title>
    <style>
        body {{
            font-family: Arial, sans-serif;
        }}
        .tab {{
            display: none;
        }}
        .tab-button-wrapper {{
            display: flex; /* Use flexbox for horizontal layout */
            border-bottom: 1px solid #ddd; /* Visual separation for tabs */
        }}
        .tab-button {{
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            margin-right: 5px;
            border-radius: 4px 4px 0 0; /* Rounded corners for the top */
        }}
        .tab-button:hover {{
            background-color: #e7e7e7;
        }}
        .tab-content {{
            border: 1px solid #ddd;
            padding: 10px;
            max-width: 100vw; /* Restrict to screen width */
            max-height: 80vh; /* Restrict to 80% of the viewport height */
            overflow: auto; /* Enable scrolling for overflow */
        }}
        .active {{
            display: block;
        }}
    </style>
</head>
<body>

<h1>Interactive Plots</h1>
<div class="tab-button-wrapper">
    <button class="tab-button" onclick="openTab(event, 'Plot1')">Plot 1</button>
    <button class="tab-button" onclick="openTab(event, 'Plot2')">Plot 2</button>
    <button class="tab-button" onclick="openTab(event, 'Export')">Export Data</button>
</div>

<div id="Plot1" class="tab tab-content">
    {st.session_state.chain_base.get_map(withDarkMode=False)._repr_html_()}
</div>

<div id="Plot2" class="tab tab-content">
    {pyg.to_html(st.session_state.chain_tess_output.drop("geometry", axis=1))}
</div>

<div id="Export" class="tab tab-content">
    <h2>Export Data as CSV</h2>
    <button onclick="downloadCSV()">Download CSV</button>
</div>

<script>
    function openTab(evt, tabName) {{
        var i, tabcontent, tabbuttons;
        
        // Hide all tab content
        tabcontent = document.getElementsByClassName("tab");
        for (i = 0; i < tabcontent.length; i++) {{
            tabcontent[i].style.display = "none";
        }}

        // Remove the active class from all buttons
        tabbuttons = document.getElementsByClassName("tab-button");
        for (i = 0; i < tabbuttons.length; i++) {{
            tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
        }}

        // Show the current tab and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }}

    function downloadCSV() {{
        var csvContent = `data:text/csv;charset=utf-8,{csv_data.replace(/(\r\n|\n|\r)/gm, '\\n')}`;
        var encodedUri = encodeURI(csvContent);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "data.csv");
        document.body.appendChild(link); // Required for FF
        link.click(); // This will download the data file named "data.csv"
    }}

    // Automatically open the first tab
    document.getElementsByClassName("tab-button")[0].click();
</script>

</body>
</html>
"""

# Replace {csv_data} with the actual CSV data encoded appropriately
html_content = html_content.replace('{csv_data}', csv_data)
```

### Key Additions:
- **Third Tab**: A new tab titled "Export Data" containing a button to download the CSV.
- **CSV Download Function**: The `downloadCSV` JavaScript function creates a Blob URL from the CSV string and downloads it as `data.csv`.

### User Interaction:
1. The user can switch to the "Export Data" tab.
2. They can click the "Download CSV" button to download the dataset you provided (in this case, an example DataFrame).

### Notes:
- Ensure that the variable `data_to_export` contains the actual data you want users to export.
- Adjust any CSV data formatting as needed based on your data structure.
- The CSV export functionality works using client-side JavaScript interactions, allowing for a smoother user experience without any server requests.
User: the input data for csv is in a dataframe
Assistant: