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)

Inizia da dash-renderer/src/TreeContainer.js intorno alla riga 313 e traccia il modo in cui le stringhe di richiesta multi-output vengono analizzate per gli stati di caricamento. Usa il caso di test della pull request di dash-table collegata e l’app fornita per riprodurre i nomi vuoti dei componenti e delle props. Il lavoro è completato quando gli stati di caricamento multi-output identificano il componente e le props interessati, con prop_name rappresentato come array quando sono presenti più valori.