How can I adjust the height of the columns via Dash Bootstrap Components?

I would like to obtain the following layout:

With my implementation, I am able to achieve most of them, except Third and Fourth Component.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output,dash_table
import pandas as pd
import os



app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

sidebar = dbc.Nav(
    [dbc.NavLink("test", href="/page-1") for i in range(90)],
    pills=True,
    vertical=True,
    # style={"overflow": "scroll", "bottom": 0},
)


app.layout = html.Div([

    # delete from here
    # dcc.Tab(label='Plots', children=[ dcc.Tabs( # subtabs
    #                     id='tabs-3',
    #                     value='tab-2-1',
    #                     children=[ # delete before
    #                         dcc.Tab(label='All Plots', value='tab-2-1', children=[
    # until here

        #     html.Div('Size of dataset = '+str(len(df)),id='size',style={'whiteSpace': 'pre-wrap'}),
        #     html.P("Choose a ID:"),
        #     dcc.Dropdown(df.ID.unique(), id='pandas-dropdown-1'),  # for choosing ID,
        # html.Div(id='dd-output-container'),#delete last two  #------ end of subtab 1--------------------------------
                         # delete
                    # delete tab 2 plots
            # ---------------- -------------- --------------- --------------- ---------------

         # delete these two on the left

    html.Br(),dbc.Container( # delete closing bracket
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H2(
                            "Left Content",
                            className="text-center sticky-top",
                            style={"height": "100%","background-color": "yellow"},
                        ),
                        sidebar,
                    ],
                    className="h-100 overflow-scroll",
                    style={"background-color": "yellow"},
                    width=3,
                    xs=5,
                    sm=4,
                    md=3,
                    lg=3,
                    xl=3,
                ),
                dbc.Col(
                    [
                        html.H2("Middle Content", className="text-center"),
                    ],
                    style={"height": "50%","background-color": "orange"},
                    width=5,
                    xs=1,
                    sm=3,
                    md=5,
                    lg=5,
                    xl=5,
                ),
                dbc.Col(
                    [
                        html.H1("Right Content", className="text-center"),
                    ],
                    style={"height": "100%","background-color": "yellow"},
                    width=4,
                    xs=6,
                    sm=5,
                    md=4,
                    lg=4,
                    xl=4,
                ),
            ],
            className="vh-100",
            justify='start'
            # no_gutters=True,
        ),
    ],
    style={
        "background-color": "green",
        "padding": "0 1rem 0 1rem",
        "margin-left": "0",
        "margin-right": "0",
        #   "position": "fixed",
    },
    fluid=True,
)
                      ])


if __name__ == "__main__":
    app.run_server(debug=True)

How can I adjust my code so that I can create third component and fourth component? Later, I would like to add a line plot for third component and a comparison data table on fourth component. So, the layout should enable interactivity and control separately on third and fourth components.

>Solution :

You need a callback to dynamically update your figures from a dropdown. I created a simple example with the layout you proposed and some example data

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output, dash_table
import pandas as pd
import plotly.express as px

df = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Container(
        [
            html.Br(),
            dcc.Dropdown(id='dropdown', options=df.columns, value=df.columns[0]),
            html.Br(),
            dbc.Row([
                dbc.Col(
                    [
                        html.H2('Single inspection graph'),
                        dcc.Graph(id='single_inspection', style={'height': '80vh'})
                    ],
                    width=3,
                ),
                dbc.Col([
                    html.H2('Line plot'),
                    dcc.Graph(id='line_plot', style={'height': '36vh'}),
                    html.H2('Data table'),
                    html.Div(id='data_table_container', style={'height': '36vh', 'overflow': 'scroll'})
                ], width=5),
                dbc.Col(
                    [
                        html.H2('Multi inspection graph'),
                        dcc.Graph(id='multi_inspection', style={'height': '80vh'})
                    ],
                    width=4,
                    style={'height': '100%'},
                )
            ], className='vh-100', justify='start')
        ],
        style={
            "background-color": "green",
            "padding": "0 1rem 0 1rem",
            "margin-left": "0",
            "margin-right": "0",
        },
        fluid=True
    )
],
)


@app.callback(
    Output('single_inspection', 'figure'),
    Output('line_plot', 'figure'),
    Output('multi_inspection', 'figure'),
    Output('data_table_container', 'children'),
    Input('dropdown', 'value'),
)
def first_callback(dropdown):
    single = px.scatter(df, x=df.index, y=df[dropdown])
    line = px.line(df, x=df.index, y=df[dropdown])
    multi = px.line(df, x=df.index, y=['sepal_length', 'sepal_width', 'petal_length', 'petal_width'])
    table = dash_table.DataTable(df[[dropdown]].to_dict('records'), [{'name': i, 'id': i} for i in df[[dropdown]].columns])
    return single, line, multi, table


if __name__ == "__main__":
    app.run_server(debug=True)