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

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)

Beginnen Sie bei dash-renderer/src/TreeContainer.js um Zeile 313 und verfolgen Sie, wie Multi-Output-Request-Strings für Ladezustände geparst werden. Verwenden Sie den verknüpften Testfall des dash-table-Pull-Requests und die bereitgestellte App, um die leeren Komponentennamen und Prop-Namen zu reproduzieren. Erledigt ist dies, wenn Multi-Output-Ladezustände die betroffene Komponente und Props identifizieren, wobei prop_name als Array dargestellt wird, wenn mehrere Werte vorhanden sind.