Chained callbacks

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

ทำไมต้องเชื่อม callbacks?

จนถึงตอนนี้ callbacks ทำให้:
- สร้างกราฟใหม่
- เปลี่ยน HTML / ข้อความ

แล้วถ้า callback หนึ่งไปกระตุ้น callback อีกตัวล่ะ?
- กรณีใช้งาน: dropdown แบบมีเงื่อนไข

ตัวอย่างที่พบบ่อย

GIF แสดง dropdown สองอันวางเคียงกัน อันแรกมีข้อความ placeholder ว่า Make และอันที่สองว่า Model เมื่อเมาส์เลือก Audi จาก dropdown แรกแล้วเลื่อนไปยัง dropdown ที่สอง จะเห็นว่าตัวเลือกใน dropdown ที่สองถูกกรองเหลือเฉพาะรุ่นรถของ Audi

Inputs และ Outputs

เคล็ดลับ: ทำความเข้าใจเส้นทาง callback (inputs และ outputs)
เครื่องมือที่ช่วยได้: แผนภาพ input-output

ลำดับการทำงาน:
- ผู้ใช้เปลี่ยน value ของ dropdown แรก (INPUT)
- callback กรองและส่งคืน options ของ dropdown ที่สอง (OUTPUT)
- callback ตัวที่สองอาจถูกกระตุ้น (INPUT) จาก value property ของ dropdown ที่สอง

Chained callbacks ใน 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):
    # Pick a default value
    return chosen_value

หลาย outputs

การอัปเดตหลาย element พร้อมกัน

@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

แผนภาพหลาย outputs

แผนภาพ flow chart ที่ขยายจากแผนภาพก่อนหน้า แทนที่กล่องสุดท้ายซึ่งมีข้อความว่า "(Optional) More callbacks" จะมีลูกศรสองอันชี้ไปยังกล่องสองใบเคียงกัน ได้แก่ "Minor Category Dropdown" และ "HTML Title" ซึ่งทั้งคู่มีลูกศรชี้ต่อไปยังกล่อง optional ที่อยู่ด้านล่างสุดของแผนภาพเดิม

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly