Callback berantai

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Mengapa merantai callback?

Selama ini callback dapat:
- Regenerasi plot
- Ubah HTML/teks

Bagaimana jika satu callback memicu callback lain?
- Use case: dropdown kondisional

Contoh umum

GIF dua dropdown berdampingan. Yang pertama bertuliskan Make, yang kedua Model. Saat mouse memilih Audi di dropdown pertama lalu pindah ke dropdown kedua, terlihat opsi di dropdown kedua terfilter hanya untuk model mobil Audi.

Input dan output

Kuncinya: pahami jalur callback (input dan output)
Alat bantu: diagram input-output

Alur:
- Pengguna mengubah value dropdown pertama (INPUT)
- Callback men-subset dan mengembalikan options dropdown kedua (OUTPUT)
- Callback kedua bisa terpicu (INPUT) oleh properti value dropdown kedua.

Callback berantai di Dash

@callback(
  Output('minor_cat_dd', 'options'),
  Input('major_cat_dd', 'value'))

def update_major_cat(major_cat_dd):
    # Filter options (list of dicts)
    return minor_options

@callback(
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options'))

def update_minor_cat(minor_cat_options):
    # Pilih nilai default
    return chosen_value

Banyak output

Memperbarui beberapa elemen

@callback(
  Output('my_title', 'children'),
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options')
)
def some_function(input):
  # function body
  return title_value, dropdown_value

Diagram banyak output

Diagram alur yang memperluas diagram sebelumnya. Alih-alih kotak terakhir bertuliskan "(Optional) More callbacks", ada dua panah ke dua kotak di bawahnya, berdampingan. Teksnya "Minor Category Dropdown" dan "HTML Title", keduanya memiliki panah ke kotak opsional di bagian bawah diagram sebelumnya.

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly