带有破折号mantine组件和下拉列表的动态表

Question

我想使用 dash_mantine_components 在 Dash 应用程序中创建动态表 (dmc) 库和 dmc.Table() 组件。更新应基于通过 Dash 的默认 dcc.Dropdown() 组件选择的值。

我使用的数据集是 Kaggle 提供的 30000 首 Spotify 歌曲数据集 (https://www.kaggle.com/datasets/joebeachcapital/30000-spotify-songs)。

我正在搜索的输出是一个动态表格，显示特定流派和子流派的前 10 位艺术家。

我尝试创建一些要在布局中使用的回调，但没有任何效果。

例如，我尝试过这个：

@app.callback([Output("10_artist_top", "table")], Input("genre-dropdown", "value"), Input("subgenre-dropdown", "value"))
def top_10_artist_presence(genre, subgenre):    df = data.copy()
    sub_df = df[(df['Genre']==genre) & (df['Subgenre']==subgenre)]
    artists = sub_df['Artist'].value_counts().reset_index()[0:10]

    header = [
        html.Thead(
            html.Tr(
                [
                    html.Th('Artist'),
                    html.Th('Number of songs')
                ]
            )
        )
    ]

    row1 = html.Tr([html.Td(artists['Artist'][0]), html.Td(artists['count'][0])])
    row2 = html.Tr([html.Td(artists['Artist'][1]), html.Td(artists['count'][1])])
    row3 = html.Tr([html.Td(artists['Artist'][2]), html.Td(artists['count'][2])])
    row4 = html.Tr([html.Td(artists['Artist'][3]), html.Td(artists['count'][3])])
    row5 = html.Tr([html.Td(artists['Artist'][4]), html.Td(artists['count'][4])])
    row6 = html.Tr([html.Td(artists['Artist'][5]), html.Td(artists['count'][5])])
    row7 = html.Tr([html.Td(artists['Artist'][6]), html.Td(artists['count'][6])])
    row8 = html.Tr([html.Td(artists['Artist'][7]), html.Td(artists['count'][7])])
    row9 = html.Tr([html.Td(artists['Artist'][8]), html.Td(artists['count'][8])])
    row10 = html.Tr([html.Td(artists['Artist'][9]), html.Td(artists['count'][9])])

    body = [html.Tbody([row1, row2, row3, row4, row5, row6, row7, row8, row9, row10])]
    table = [html.Thead(header), html.Tbody(body)]
    return table

还有这个：

@app.callback(Output("top_10_artists", "table"), Input("genre-dropdown", "value"), Input("subgenre-dropdown", "value"))
def top_10_artist_presence(genre, subgenre):
    df = data.copy()
    sub_df = df[(df['Genre']==genre) & (df['Subgenre']==subgenre)]
    artists = sub_df['Artist'].value_counts().reset_index()[0:10]
    table_data = artists.to_dict('records')
    return table_data

但运气不好。目前，代码返回如下错误（使用第一段代码），或者根本不返回任何内容（使用第二段代码）。

SchemaLengthValidationError: Schema: [<Output `top_10_artists.table`>]
Path: ()
Expected length: 1
Received value of length 2:
    [Thead([Thead(Tr([Th('Artist'), Th('Number of songs')]))]), Tbody([Tbody([Tr([Td('The Chainsmokers'), Td(20)]), Tr([Td('Kygo'), Td(16)]), Tr([Td('Avicii'), Td(15)]), Tr([Td('Martin Garrix'), Td(15)]), Tr([Td('Calvin Harris'), Td(14)]), Tr([Td('David Guetta'), Td(13)]), Tr([Td('Tiësto'), Td(10)]), Tr([Td('Armin van Buuren'), Td(9)]), Tr([Td('Marshmello'), Td(8)]), Tr([Td('Zara Larsson'), Td(8)])])])]

知道如何解决这个问题吗？

Answer 1

通过将表头声明为“row0”找到了解决方案。这样，只向 dmc.Table 提供一个输出。 最终回调如下：

@app.callback([Output("top_10_artists", "children")], Input("genre-dropdown", "value"), Input("subgenre-dropdown", "value"))
def top_10_artist_presence(genre, subgenre):
    df = data.copy()
    sub_df = df[(df['Genre']==genre) & (df['Subgenre']==subgenre)]
    artists = sub_df['Artist'].value_counts().reset_index()[0:10]

    header = [html.Thead(html.Tr([html.Th('Artist'), html.Th('Number of songs')]))]

    row0 = html.Tr([html.Th('Artist'), html.Th('Number of songs')])
    row1 = html.Tr([html.Td(artists['Artist'][0]), html.Td(artists['count'][0])])
    row2 = html.Tr([html.Td(artists['Artist'][1]), html.Td(artists['count'][1])])
    row3 = html.Tr([html.Td(artists['Artist'][2]), html.Td(artists['count'][2])])
    row4 = html.Tr([html.Td(artists['Artist'][3]), html.Td(artists['count'][3])])
    row5 = html.Tr([html.Td(artists['Artist'][4]), html.Td(artists['count'][4])])
    row6 = html.Tr([html.Td(artists['Artist'][5]), html.Td(artists['count'][5])])
    row7 = html.Tr([html.Td(artists['Artist'][6]), html.Td(artists['count'][6])])
    row8 = html.Tr([html.Td(artists['Artist'][7]), html.Td(artists['count'][7])])
    row9 = html.Tr([html.Td(artists['Artist'][8]), html.Td(artists['count'][8])])
    row10 = html.Tr([html.Td(artists['Artist'][9]), html.Td(artists['count'][9])])

    body = [html.Tbody([row0, row1, row2, row3, row4, row5, row6, row7, row8, row9, row10])]
    top_10_artist_table = [html.Tbody(body)]
    return top_10_artist_table

在应用程序中，接收代码如下：

dmc.Col(dmc.Card(children=[
    dmc.Text("Top 10 artist of the Genre", size='lg', color='dimmed', weight=500, align='center'),
    dmc.Table(id='top_10_artists'),
], withBorder=True, shadow='lg', radius='md'), span='auto'),