plotly / plotly/dash

CSS Loading States don't work with multi-output // Empty `component_name` and `prop_name` on `loading_state` for callbacks with multiple output

Open
#893 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Behavior observed in dash==1.2.0 but has probably been present since multi-output support was added, shortly after loading_state, both in dash==0.39.0.

Problematic handling of multi-output is here: https://github.com/plotly/dash/blob/master/dash-renderer/src/TreeContainer.js#L313

The assumption is that all request strings are of the form id.prop but multi-output is of form ..id1.prop1...id1.prop2...id2.prop3.., resulting in '' component and prop name.

Expected behavior would be for prop_name to be an array of strings with the affected props if multiple values are found.

Test app - observed while reviewing / testing https://github.com/plotly/dash-table/pull/484 (the test case is essentially described here: https://github.com/plotly/dash-table/pull/484/files#r319109146)

import json
import time

import pandas as pd

import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

from dash_table import DataTable, FormatTemplate
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = DataTable(
        id='table',
        columns=[{
            'name': x,
            'id': x,
            'selectable': True
        } for x in ['a', 'b', 'c', 'd']],
        column_selectable="single",
        editable=True,
        data=[{
            'a': 'a' + str(x),
            'b': 'b' + str(x) + str(x),
            'c': 'c' + str(x) + 'c',
            'd': 'd' + str(x) + '-' + str(x)
        } for x in range(0,100)]
    )

@app.callback(
    [Output('table', 'style_data_conditional'), Output('table', 'style_data')],
    [Input('table', 'selected_columns'), Input('table', 'data')]
)
def update_styles(selected_columns, data):
    if selected_columns is None or data is None:
        raise PreventUpdate

    return [{
        'if': { 'column_id': i },
        'background_color': '#D2F3FF'
    } for i in selected_columns], {}

if __name__ == '__main__':
    app.run_server(debug=False)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with dash-renderer/src/TreeContainer.js around line 313 and trace how multi-output request strings are parsed for loading states. Use the linked dash-table pull request test case and the supplied app to reproduce the empty component and prop names. Done means multi-output loading states identify the affected component and props, with prop_name represented as an array when multiple values are present.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.