개발/Dash

[Dash]Python Dash Callback (1) 콜백 트리거 속성

moonzoo 2024. 1. 16. 11:23

 

 

 

Dash 콜백 트리거 속성

Dash에서 사용되는 특별한 속성들, 특히 인터랙티브한 요소들과 관련된 속성들이 존재합니다.

 

이들은 Dash의 콜백 메커니즘에서 중요한 역할을 하며, 사용자 인터랙션에 기반한 애플리케이션의 동적 반응을 가능하게 하는 핵심 요소입니다.

 

이 속성들은 사용자의 인터랙션에 의해 변경되며, 그 변경 사항이 콜백 함수의 실행을 트리거합니다.

 

예를 들어, n_clicks 속성은 버튼 컴포넌트와 관련되어 있으며, 사용자가 버튼을 클릭할 때마다 값이 증가합니다. 이 값의 변화는 콜백 함수를 트리거할 수 있습니다.

 

이벤트 속성 (Event Properties)

 

이벤트 속성은 사용자의 특정 행동(예: 클릭, 선택, 입력)에 반응하는 속성입니다.

 

이러한 속성은 사용자의 인터랙션이 발생했을 때 해당 이벤트를 캡처하고, 콜백 함수에 이 정보를 전달합니다. 이를 통해 애플리케이션은 사용자의 행동에 따라 적절하게 반응할 수 있습니다.

 

1. DataTable 관련 속성 (ag_grid)

  • selected_rows: 사용자가 DataTable 컴포넌트에서 선택한 행들의 인덱스 리스트입니다. (selectedRows)
  • active_cell: 활성화된 셀의 위치를 나타내는 속성으로, 일반적으로 행과 열의 인덱스 정보를 담고 있습니다.
  • selected_cells: 사용자가 선택한 셀들의 리스트입니다.
  • derived_virtual_data: 테이블에서 현재 렌더링된 행들의 데이터입니다. 필터링이나 정렬 후의 데이터를 반영합니다.
  • derived_virtual_selected_rows: 가상 테이블(필터링이나 정렬 후의 테이블)에서 선택된 행들의 인덱스입니다.

2. Button

  • n_clicks: 버튼이 클릭된 횟수입니다. 이 속성은 버튼의 클릭 이벤트를 감지하는 데 사용됩니다.

3. Input 컴포넌트

  • value: 텍스트 입력 필드(Input)의 현재 값을 나타냅니다.

4. Slider

  • value: 슬라이더의 현재 값입니다.

5. Dropdown, RadioItems, Checklist

  • value: 사용자가 선택한 값을 나타냅니다. 드롭다운이나 라디오 버튼, 체크리스트에서 선택된 항목의 값입니다.

6. Interval

  • n_intervals: Interval 컴포넌트가 설정된 시간 간격마다 증가하는 카운터입니다. 주로 주기적인 업데이트를 위해 사용됩니다.

7. Tabs

  • value: 현재 선택된 탭의 value 속성입니다. 각 탭에는 고유한 value가 있으며, 이를 통해 어떤 탭이 활성화되었는지 판별할 수 있습니다.

8. Location (웹 브라우저의 URL 관련)

  • href: 현재 브라우저의 URL입니다.
  • pathname: URL의 경로 부분입니다.
  • search: URL의 쿼리 문자열 부분입니다.
  • hash: URL의 해시(#) 부분입니다.

 

개발 노트

AgGrid 행 선택

@app.callback(
    [Output('1', 'value'),
     Output('2', 'value'),
     Output('3', 'value'),
     Output('4', 'value'),
     Output('5', 'value'),
     Output('6', 'value'),
     Output('7', 'value'),
     Output('8', 'value')],  # added this line
    Input('ag_grid_1', 'selectedRows'))
    
def update_rowinfo(selection):
    if selection is not None:
        i_id = selection[0]['1']
        b_id = selection[0]['2']

 

Output

  • Output 객체들은 함수가 업데이트할 대시(Dash) 애플리케이션 내의 컴포넌트들입니다.
  • 이 코드에서, 여러 개의 Output이 정의되어 있으며, 각각의 Output은 특정 컴포넌트의 속성('value')을 대상으로 합니다. ('1', '2', '3', 등)

Input

  • Input 객체는 함수가 반응할 대시(Dash) 애플리케이션 내의 컴포넌트입니다.
  • 이 코드에서는 'ag_grid_1' 컴포넌트의 'selectedRows' 속성에 대한 사용자의 인터랙션이 있을 때 함수가 반응하도록 설정되어 있습니다.

함수 update_output

  • 이 함수는 사용자가 ag_grid_1 컴포넌트 내에서 행을 선택할 때마다 호출됩니다.
  • 선택된 행에 대한 정보(selection)를 사용하여, 데이터베이스 쿼리를 실행하고, 그 결과를 다양한 출력값으로 반환합니다.
  • 반환되는 값은 위에서 정의된 Output 객체들에 동적으로 할당됩니다. 즉, 사용자가 선택한 행에 따라 이 값들이 업데이트됩니다.

동적 수정

  • 사용자가 ag_grid_1의 행을 선택하면, update_rowinfo 함수가 호출됩니다.
  • 선택된 행의 데이터(i_id, b_id)를 사용하여 데이터베이스에서 해당 정보를 조회합니다.
  • 조회된 결과를 각 아웃풋 컴포넌트의 value 속성에 할당하여, 애플리케이션의 사용자 인터페이스를 업데이트합니다.
  • 사용자가 다른 행을 선택하면, 이 과정이 반복되어 해당 행의 정보로 아웃풋이 업데이트됩니다.

Selection

 

selection이라는 리스트는 대시(Dash) 애플리케이션의 DataTable 컴포넌트에서 사용자가 선택한 행들의 정보를 담고 있습니다. 각 행은 사전(dict) 형태로, 해당 행의 데이터를 포함합니다.

  • 사용자가 DataTable에서 행을 클릭하면, 해당 행이 선택됩니다.
  • DataTable의 설정에 따라 단일 행 또는 다중 행을 선택할 수 있습니다.
  • 선택된 행들의 정보는 selectedRows 속성을 통해 액세스할 수 있으며, 이는 행 인덱스의 리스트로 제공됩니다.
  • selection 변수는 이러한 선택된 행들의 실제 데이터를 포함하고 있을 수 있으며, 이는 ag_grid_1의 data 속성과 selectedRows 인덱스를 사용하여 추출됩니다.