체인드 콜백

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

왜 콜백을 체이닝하나요?

지금까지 콜백은 다음을 수행합니다:
- 플롯 재생성
- HTML/텍스트 변경

콜백이 다른 콜백을 트리거하면?
- 사용 예: 조건부 드롭다운

대표 예시

두 개의 드롭다운이 나란히 있는 GIF. 첫 번째는 Make, 두 번째는 Model 플레이스홀더. 첫 번째에서 Audi를 선택하자, 두 번째 드롭다운의 옵션이 Audi 모델만으로 필터링됨이 보입니다.

입력과 출력

요령: 콜백 경로(입·출력)를 파악
유용한 도구: 입출력 다이어그램

흐름:
- 사용자가 첫 번째 드롭다운의 value를 변경함(입력)
- 콜백이 두 번째 드롭다운의 options를 서브셋팅해 반환(출력)
- 두 번째 드롭다운의 value 속성(입력)으로 두 번째 콜백이 트리거될 수 있음

사각형과 화살표로 세로로 연결된 흐름도. 상자 사이에 작은 텍스트 상자. 첫 상자는 user, 화살표로 "Major Category dropdown" 상자로 연결되며 사이 텍스트는 "value". 다음으로 "Minor category dropdown" 상자, 사이 텍스트는 Options. 마지막으로 "(Optional) More callbacks" 상자, 사이 텍스트는 "Options".

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

다중 출력

여러 요소 업데이트

@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

다중 출력 다이어그램

앞서 본 다이어그램을 확장한 흐름도. 마지막 상자 "(Optional) More callbacks" 대신, 두 개의 화살표가 아래의 나란한 두 상자로 이어집니다. 상자에는 각각 "Minor Category Dropdown"과 "HTML Title"이 있으며, 둘 다 이전 다이어그램의 하단 선택적 상자로 화살표가 이어집니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기