Display dash_table dynamic dataframe for a selected radio item

Dash Python
1

I am new python Dash programming, and i have taken reference from plotly.community. I am able display list of s3 buckets from my AWS account, and for a selected bucket I am showing list of all CSV files.

The next step is, for a selected CSV file, I need to display CSV contents as a dash table on the same page just below the radio buttons, with a scroll bar and pagination. Appreciate any help pls. I am stuck here, please help.

This is what i have tried thus far:

from dash import Dash, dcc, html, Input, Output, callback, dash_table
import boto3
import pandas as pd

# Retrieve the list of existing buckets
s3 = boto3.client('s3')
response = s3.list_buckets()
all_options = {}

# Output the bucket names
for bucket in response['Buckets']:
    # print(f'  {bucket["Name"]}')
    if bucket["Name"].startswith("ag-"):
        if len(all_options) < 5:
            # Get a list of all objects in the bucket
            objects = s3.list_objects_v2(Bucket=bucket['Name'])
            # Create a list to store the files in the bucket
            files = []

            # Iterate over the objects
            for obj in objects['Contents']:
                if obj['Key'].endswith('.csv'):
                    if len(files) < 5:
                        # Add the file name to the list
                        files.append(obj['Key'])
            # Add the bucket and files to the dictionary
            all_options[bucket['Name']] = files


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.RadioItems(
        list(all_options.keys()),
        0,
        id='buckets-radio',
    ),

    html.Hr(),
    dcc.RadioItems(id='files-radio'),
    html.Hr(),
    html.Div(id='display-selected-values')
])


@callback(
    Output('files-radio', 'options'),
    Input('buckets-radio', 'value'))
def set_cities_options(selected_bucket):
    return [{'label': i, 'value': i} for i in all_options[selected_bucket]]


@callback(
    Output('files-radio', 'value'),
    Input('files-radio', 'options'))
def set_cities_value(available_options):
    return available_options[0]['value']

@callback(
    Output('display-selected-values', 'children'),
    Input('buckets-radio', 'value'),
    Input('files-radio', 'value'))
def set_display_children(selected_bucket, selected_file):
    # obj = s3.get_object(Bucket=selected_country, Key=selected_city)
    # df = pd.read_csv(obj['Body'])
    #
    # app.layout = html.Div([
    #     html.H4('Simple interactive table'),
    #     html.P(id='table_out'),
    #     dash_table.DataTable(
    #         id='table',
    #         columns=[{"name": i, "id": i}
    #                  for i in df.columns],
    #         data=df.to_dict('records'),
    #         style_cell=dict(textAlign='left'),
    #         style_header=dict(backgroundColor="paleturquoise"),
    #         style_data=dict(backgroundColor="lavender")
    #     ),
    # ])
    #
    # def update_graphs(active_cell):
    #     if active_cell:
    #         cell_data = df.iloc[active_cell['row']][active_cell['column_id']]
    #         return f"Data: \"{cell_data}\" from table cell: {active_cell}"
    #     return "Click the table"

    return f'{selected_file} is a file in {selected_bucket}'


# if __name__ == '__main__':
#     app.run(debug=True)

app.run_server(debug=True)
3

Thanks it worked like a charm. I am currently limiting the radio buttons with a limit of 5, is there a way i show all buckets/items with a fixed size and scroll bar. Thanks for your help.

5

EDIT:

Sounds crazy, but I deleted the helpful answer due to spam links in the text. We get this quite frequently lately. New user signs up, posts a chatGPT answer and afterwards edits the post.

Here the code snippet which seemed to be helpful:

@callback(
    Output('display-selected-values', 'children'),
    [Input('buckets-radio', 'value'),
     Input('files-radio', 'value')])
def set_display_children(selected_bucket, selected_file):
    if selected_bucket and selected_file:
        obj = s3.get_object(Bucket=selected_bucket, Key=selected_file)
        df = pd.read_csv(obj['Body'])

        return dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
            page_size=10,  # number of rows per page
            style_table={'overflowX': 'scroll'},  # horizontal scroll bar
            style_cell={ 
                'height': 'auto',
                'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
                'whiteSpace': 'normal'
            },
            style_header={
                'backgroundColor': 'white',
                'fontWeight': 'bold'
            }
        )