dash-api/src/components/layout.py

import pandas as pd
from dash import Dash, dcc, html
from src.components import (
    bar_chart,
    data_table,
    year_dropdown,
    week_dropdown,
    category_dropdown,
    feedback_tab,
    explanation_tab,
)

def create_layout(app: Dash, data: pd.DataFrame) -> html.Div:
    tab_content_style = {'height': 'calc(100vh - 220px)', 'overflowY': 'auto', 'padding': '15px'}

    return html.Div(
        className="app-div",
        children=[
            html.H1(app.title),
            html.Hr(),
            dcc.Tabs(id="tabs", value='tab-dashboard', children=[
                dcc.Tab(label='Dashboard', value='tab-dashboard', children=[
                    html.Div(style=tab_content_style, children=[
                        html.Div(
                            className="dropdown-container",
                            children=[
                                year_dropdown.render(app, data),
                                week_dropdown.render(app, data),
                                category_dropdown.render(app, data),
                            ],
                        ),
                        bar_chart.render(app, data),
                        data_table.render(app, data),
                    ])
                ]),
                dcc.Tab(label='Feedback', value='tab-feedback', children=[
                    html.Div(style=tab_content_style, children=[
                        feedback_tab.render(app)
                    ])
                ]),
                dcc.Tab(label='Explanation', value='tab-explanation', children=[
                    html.Div(style=tab_content_style, children=[
                        explanation_tab.render(app)
                    ])
                ]),
            ]),
        ],
    )