Hi
I have a multipage app, which takes and saves a value in main script and this value is using for another pages.
The page1.py works perfect and i can update content by simple writing a new value to input bar.
But i have a problem with page2.py: for content updating i need to switch a pages and then i return to this page i can update page by new value imputing
How can avoid page switching and simply input the new value, like for page1.py
Here is MRE:
multipage.py
from dash import html, dcc, Output, Input
from threading import Timer
import webbrowser
import dash_bootstrap_components as dbc
CUSTOME_FONT = {
'font-family': 'Arial serif'
}
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 2,
"bottom": 0,
"width": "18rem",
"padding": "2rem 1rem",
"background-color": "#B0BACE"
}
app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.LUX])
sidebar = html.Div([
html.Br(),
html.Hr(),
html.H5("Sample number:", className="display-10"),
html.Div(dbc.Input(id='input-number', type='text', placeholder="999", debounce=True)),
html.Br(),
dbc.Nav(
#
[
dbc.NavLink(
[
html.Div(page["name"], className="ms-1"),
],
href=page["path"],
active="exact",
)
for page in dash.page_registry.values()
],
vertical=True,
pills=True,
#className="bg-light",
)
],style=SIDEBAR_STYLE)
app.layout = dbc.Container([
dbc.Row([
]),
dcc.Store(id='store', data={}),
dbc.Row(
[
dbc.Col(
[
sidebar
], xs=15, sm=15, md=8, lg=8, xl=8, xxl=8),
dbc.Col(
[
dash.page_container
], xs=15, sm=15, md=15, lg=15, xl=15, xxl=15)
]
)
], fluid=True)
@app.callback(
Output("store", "data"),
Input("input-number", "value"),
)
def get_value(number):
return number
if __name__ == '__main__':
Timer(1, webbrowser.open_new("http://127.0.0.1:8050/")).start()
app.run_server(dev_tools_hot_reload=False)
page1.py
import dash
from dash import dcc, html, Input, Output, State, dash_table, callback
import pandas as pd
import warnings
warnings.filterwarnings('ignore')
import dash_bootstrap_components as dbc
dash.register_page(__name__, order=2, external_stylesheets=[dbc.themes.FLATLY])
html.Title("OGM")
layout = html.Div([
html.Div([dbc.Button('Load data', id='submit-button', n_clicks=0,color='secondary', outline=True)],
className='d-grid gap-2'),
html.Br(),
html.Div([
dcc.Tabs(id='tabs', value='tab-1', children=[
dcc.Tab(label='Tab 1', value='tab-1'),
dcc.Tab(label='Tab 2', value='tab-2'),
dcc.Tab(label='Tab 3', value='tab-3')
]),
html.Div(id='tabs-content')
], className='content'),
], className='container')
@callback(
Output('tabs-content', 'children'),
[Input('tabs', 'value')],
Input('submit-button', 'n_clicks'),
[State('store', 'data')]
)
def update_output(tab, n_clicks, number):
number = number
support_tab = {'column 1': [1, 2 , 3 , 4],
'column 2': [f'{number}', 'B', 'C', 'D']}
fish_tab = {'column 1': [1, 2 , 3 , 4],
'column 2': [f'{number}', 'B', 'C', 'D']}
exons_tab = {'column 1': [1, 2 , 3 , 4],
'column 2': [f'{number}', 'B', 'C', 'D']}
if n_clicks > 0:
if tab == 'tab-1':
df_tab2 = pd.DataFrame(support_tab)
return html.Div([
html.H3(f'{number}'),
html.Div([
html.H4('Support Table'),
dash_table.DataTable(
id='support_table',
columns=[{"name": i, "id": i} for i in df_tab2.columns],
data=df_tab2.to_dict('records')
)
], style={'width': '200%',"display": "inline-block"})
])
elif tab == 'tab-2':
df_tab3 = pd.DataFrame(fish_tab)
return html.Div([
html.Div([
html.H4('FISH Table'),
dash_table.DataTable(
id='ogm_table',
columns=[{"name": i, "id": i} for i in df_tab3.columns],
data=df_tab3.to_dict('records')
)
])])
elif tab == 'tab-3':
df_tab5 = pd.DataFrame(exons_tab)
return html.Div([
html.Div([
html.H4('NGS panel: exons and regulation'),
dash_table.DataTable(
id='exon_table',
columns=[{"name": i, "id": i} for i in df_tab5.columns],
data=df_tab5.to_dict('records')
),
],style={'width': '200%',"display": "inline-block"})
])
else:
return html.Div('Error')
page2.py
import dash
from dash import html, dash_table, Input, Output, State, callback
import pandas as pd
import os
import glob
from collections import OrderedDict
import numpy as np
import dash_bootstrap_components as dbc
dash.register_page(__name__, order=1)
# App layout
layout = html.Div([
html.Div([
#dbc.Input(id='input-number', type='text', placeholder="Enter number", debounce=True),
html.Div([dbc.Button('Load data', id='submit-button', n_clicks=0)],
className='d-grid gap-2'),
html.Div(
id='datatable-interactivity',
), html.Div(id='table-dropdown-container')
], className='container'),
html.Br(),
html.Br(),
html.Div(id='display_selected_row', className='container')
])
# Callback to update selected row display
@callback(
Output('datatable-interactivity', "children"),
[Input('submit-button', 'n_clicks')],
[State('store', 'data')]
)
def update_table(n_clicks, store):
number=store
if n_clicks > 0:
pattern = f"C://Users//USER//MRA//Data//{number}-*"
matching_dirs = glob.glob(pattern)
if not matching_dirs:
return []
dir_path = matching_dirs[0]
os.chdir(dir_path)
excel_pattern = f"{number}_table.xlsx"
excel_file = glob.glob(excel_pattern)
if not excel_file:
return []
excel_path = excel_file[0]
support_data = pd.DataFrame(OrderedDict(pd.read_excel(excel_path, index_col=0)))
return dash_table.DataTable(
id='datatable-interactivity',
data=support_data.to_dict('records'),
columns=[
{'id': 'Chromosome', 'name': 'Chromosome'},
{'id': 'start', 'name': 'start'},
{'id': 'end', 'name': 'end'},
{'id': 'Aberration', 'name': 'Aberration'},
{'id': 'Tier', 'name': 'Tier', 'presentation': 'dropdown'}
],
editable=True, # Sorting enabled
dropdown = {'Tier': {
'options': [
{'label': i, 'value': i}
for i in np.array(['Tier III', 'Tier II', 'Tier I'])
]
}},
row_selectable="multi",
selected_rows=[],
sort_action="native",
sort_mode="multi",
column_selectable="multi",
row_deletable=True,
selected_columns=[],
page_action="native",
page_current= 0
)
@callback(
Output('display_selected_row', "children"),
[Input('datatable-interactivity', "selected_rows")],
[State('datatable-interactivity', "data")]
)
def display_selected_row_details(selected_rows, data):
if selected_rows is None:
selected_rows = []
if not data:
return html.Div()
dff = pd.DataFrame(data)
selected_data = dff.iloc[selected_rows]
return html.Div([
dash_table.DataTable(
id='display_selected_row_data_table',
columns=[{"name": i, "id": i} for i in selected_data.columns],
data=selected_data.to_dict("records"),
export_format='xlsx',
export_headers='display',
##### DROPDOWN
dropdown={
"Tier": {
'options': [
{'label': i, 'value': i}
for i in ['Tier III/IV', 'Tier I', 'Tier II']
]
}
},
editable=True
)
])