Supprimez les composants et les rappels de app.py avec plotly Dash
Chose que tu veux faire
--Créez une page Web de taille raisonnable avec un tiret ―― Tout écrire dans app.py n'est pas facile à maintenir, je veux donc le diviser
Comme d'habitude, je ne trouve aucun document en anglais, je vais donc les écrire ensemble.
splitting callback and components in multiple files use the : deepl
À propos, l'échantillon officiel lui-même existe en grand nombre, mais il y a toujours des centaines de lignes de app.py.
Cela fait environ 2 mois que j'ai touché au tableau de bord, alors faites-moi savoir s'il existe une meilleure solution.
Ce que j'ai fait
Pensez à la structure du fichier
- Je veux supprimer au moins les composants et les rappels ――Il semble que vous ayez besoin de quelqu'un pour gérer chacun des composants et des rappels qui augmenteront régulièrement.
Première histoire ↓
.
├── app.py
├── assets
│ ├── common.css
│ └── default.css
└── src
└── some_utils.py
↓ Il semble que cela devrait être fait
.
├── app.py
├── assets
│ ├── common.css
│ └── default.css
│
└── src
├── callback.py
├── callbacks
│ ├── hoge.py
│ ├── fuga.py
│ └── poyo.py
│
├── layout.py
├── components
│ ├── fizz.py
│ ├── buzz.py
│ ├── boo.py
│ └── bar.py
│
├── some_utils.py
└── utils
Organisez app.py
J'emprunte la source de mon autre article car c'est un gros problème
python app.py
Commencez par et pouvez naviguer sur http: // localhost: 8050
↓ Cela devient un tel écran
app.py
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State
from flask import Flask, request
import time
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
app.title = 'checklist-test'
selected_key = None
checklists = dcc.Checklist(
id='checklist-states',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF']
)
app.layout = html.Div(id='main',children=[
html.H1(children='Test de la liste de contrôle'),
dcc.Location(id='location', refresh=False),
html.Div(className='main-block', children=[checklists]),
html.Div(className='second', children=[
html.Button('Tout sélectionner', id='filter-check-button', className='filter_button'),
html.Button('Tout annuler', id='filter-remove-button', className='filter_button')
])
])
@app.callback(
[Output('checklist-states', 'value')],
[Input('filter-check-button', 'n_clicks_timestamp'),
Input('filter-remove-button', 'n_clicks_timestamp')],
[State('checklist-states', 'value')]
)
def update_check(all_check, all_remove, checking):
if not all_check is None:
if (time.time() * 1000 - all_check) < 1000:
return [['NYC', 'MTL', 'SF']]
if not all_remove is None:
if (time.time() * 1000 - all_remove) < 1000:
return [[]]
if all_check is None and all_remove is None:
return [checking]
if __name__ == '__main__':
app.run_server(host='0.0.0.0', debug=True)
Puisque la mise en page et le rappel sont liés à ʻapp de l'objet dash, il semble qu'il sera traité en passant ʻapp directement à une autre fonction.
C'est pourquoi tout en me jetant du travail dans le futur, je gratterai autant que je pourrai gratter app.py
app.py
import dash
from flask import Flask
from src.layout import layout
from src.callback import callback
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
app.title = 'checklist-test'
#composants et définition de rappel
app = layout(app)
callback(app)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', debug=True)
tips: L'enregistrement de rappel doit être absolument après la définition du composant Puisqu'un rappel avec une valeur d'entrée nulle s'exécute au moment de l'importation, une erreur se produira si le composant que vous regardez dans Input / Output / State n'existe pas
Composants et mise en page
Inutile de dire que veuillez changer le nom du fichier pour celui dont vous êtes satisfait.
Découpe de mise en page
Assignez l'élément html à la disposition d'attribut de ʻapp` reçu comme argument
layout.py
import dash_core_components as dcc
import dash_html_components as html
def layout(app):
checklists = dcc.Checklist(
id='checklist-states',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF']
)
# app.Attribuer des éléments à la mise en page
app.layout = html.Div(id='main', children=[
html.H1(children='Test de la liste de contrôle'),
dcc.Location(id='location', refresh=False),
html.Div(className='main-block', children=[checklists]),
html.Div(className='second', children=[
html.Button('Tout sélectionner', id='filter-check-button', className='filter_button'),
html.Button('Tout annuler', id='filter-remove-button', className='filter_button')
])
])
return app
Coupure de rappel
tips:
Si vous essayez d'appeler ʻupdate_check directement, la partie décorateur ne peut pas être bien interprétée, vous devez donc aller plus loin et enfermer chaque décorateur dans une autre fonction. (En bref, ʻapp of@ app.callback ()doit être capable de résoudre le nom)
callback.py
from dash.dependencies import Input, Output, State
import time
def callback(app):
@app.callback(
[
Output('checklist-states', 'value')
],
[
Input('filter-check-button', 'n_clicks_timestamp'),
Input('filter-remove-button', 'n_clicks_timestamp')
],
[
State('checklist-states', 'value')
]
)
def update_check(all_check, all_remove, checking):
if all_check is not None:
if (time.time() * 1000 - all_check) < 1000:
return [['NYC', 'MTL', 'SF']]
if all_remove is not None:
if (time.time() * 1000 - all_remove) < 1000:
return [[]]
if all_check is None and all_remove is None:
return [checking]
Que faire lorsque vous avez plus de composants et de rappels
Division supplémentaire des composants
Gérez le titre, la liste de contrôle et le bouton séparément En supposant que la mise en page ne gère que les blocs et l'espacement
tips:
L'attribut ʻid n'est pas requis pour html.Div () `
layout.py
from src.components import title, checklist, button
import dash_core_components as dcc
import dash_html_components as html
def layout(app):
app.layout = html.Div(id='main', children=[
html.Div(id='title-block', children=[title.layout()]),
dcc.Location(id='location', refresh=False),
html.Div(id='center-block', children=[
html.Div(children=checklist.layout()),
html.Div(children=button.layout())
])
])
return app
title.py
import dash_html_components as html
def layout():
return html.H1(id='title', children='Test de la liste de contrôle')
checklist.py
import dash_core_components as dcc
def layout():
return dcc.Checklist(
id='checklist-states',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF']
)
button.py
import dash_html_components as html
def layout():
return html.Button('Tout sélectionner', id='filter-check-button', className='filter_button'), html.Button('Tout annuler', id='filter-remove-button', className='filter_button')
Division supplémentaire du rappel
Découpez pour chaque fonction de la même manière
callback.py
from src.callbacks import check_and_remove # hoge, fuga...
def callback(app):
check_and_remove.register(app)
# hoge.register(app)
# fuga.register(app)
check_and_remove.py
from dash.dependencies import Input, Output, State
import time
def register(app):
@app.callback(
[
Output('checklist-states', 'value')
],
[
Input('filter-check-button', 'n_clicks_timestamp'),
Input('filter-remove-button', 'n_clicks_timestamp')
],
[
State('checklist-states', 'value')
]
)
def update_check(all_check, all_remove, checking):
if all_check is not None:
if (time.time() * 1000 - all_check) < 1000:
return [['NYC', 'MTL', 'SF']]
if all_remove is not None:
if (time.time() * 1000 - all_remove) < 1000:
return [[]]
if all_check is None and all_remove is None:
return [checking]
Structure finale
.
├── app.py
└── src
├── callback.py
├── callbacks
│ └── check_and_remove.py
├── components
│ ├── button.py
│ ├── checklist.py
│ └── title.py
└── layout.py
Recommended Posts