python - 将返回的字符串列表转换为交互式输出

Question

我有一个搜索引擎，它返回包含文章的数组“文章”。

不过，我想为您提供更多 Twitter 新闻提要设计。我还希望能够单击它并展开它们。

这是搜索引擎回调:

from dash.dependencies import Input, Output, State
import dash_core_components as dcc

import pickle

from ..server import app

@app.callback(
    Output('output-container-button', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')])
def update_search(n_clicks, value):
    f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
    # let's filter f according to value
    articles = []
    for article in f:
        if value in article['headline']:
            # We want to print this
            articles.append(article)
    print(articles[0])
    return dcc.Markdown([f"{article['headline']}\n" for article in articles])

这是我的“app.py”:

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    label='Search article',
                    value= 'search',
                    children = article_search() # here handle the potential array
                                                # of articles and put it in form?
                )
            ]
        )
    ]
)

目前看起来像这样:

每条黑线都是一篇文章['headline']。这是文章[0]:

{'headline': 'this is the headline', 
 'body': 'Lorem Ipsum is simply dummy text of the printing and typesetting '
         'industry. Lorem Ipsum has been the industry's standard dummy text '
         'ever since the 1500s, when an unknown printer took a galley of '
         'type and scrambled it to make a type specimen book. It has '
         'survived not only five centuries, but also the leap into '
         'electronic typesetting, remaining essentially unchanged. It was '
         'popularised in the 1960s with the release of Letraset sheets '
         'containing Lorem Ipsum passages, and more recently with desktop '
         'publishing software like Aldus PageMaker including versions of '
         'Lorem Ipsum.', 
 'sentiment': -0.4000000059604645, 
 'topics': {'/Finance': 0.6600000262260437}, 
 'topics_kw': ['Politics', 'The financial sector', 'Media', 
               'Society', 'Social projects'], 
 'date': datetime.datetime(2019, 9, 25, 0, 0)}

Answer 1

这样做的懒惰方式:

• 就将数据推送到应用程序而言，您可以将值存储在 dcc.Store 中。对象(作为 json)。
• 然后您可以创建一个回调，将该 json 中的信息格式化为单独的 html objects .
• 每个html object可以有动态回调来改变 style内容的属性，以便当用户单击它时，它会执行您想要的操作。

这样做的好处:

• 创建您自己的破折号组件，其中包含自己的 react ，它将定义与您想要的格式类似的行为。 (警告，除非您是一位经验丰富的 UX/UI 设计师，否则很难让它看起来不错。)
• 将您的数据推送到 js启用的数据对象 – 也许 window.dataLayer或类似的东西。
• 写一些js与每个仪表板组件交互的函数，将数据从交互层推送回核心应用程序。

抱歉，我无法提供更详细和描述性的信息 - 这更多的是示意性响应，而不是解决方案。