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

【问题标题】：Transforming a returned list of strings into interactive outputs将返回的字符串列表转换为交互式输出
【发布时间】：2020-05-10 18:38:00
【问题描述】：

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

不过，我想为您提供更多 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?
                )
            ]
        )
    ]
)

目前看起来是这样的：

每条黑线都是一个article['headline']。这里是article[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)}

【问题讨论】：

这似乎是一个 javascript 和样式问题。

标签： python css python-3.x user-interface plotly-dash

【解决方案1】：

这样做的懒惰方式：

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

这样做更好：

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

抱歉，我不能更详细和更具描述性 - 这更多的是示意性响应而不是解决方案。

【讨论】：