Преобразование возвращенного списка строк в интерактивные выходы - PullRequest
3 голосов
/ 24 января 2020

У меня есть поисковая система, которая возвращает массив статей, содержащий статьи.

Однако я хотел бы дать вам немного больше дизайна ленты новостей в Твиттере. Я также хотел бы иметь возможность щелкнуть по нему и развернуть их.

Вот обратный вызов поисковой системы:

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?
                )
            ]
        )
    ]
)

На данный момент это выглядит так:

introducir la descripción de la imagen aquí

Каждая черная линия 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)}

1 Ответ

2 голосов
/ 02 февраля 2020

Ленивый способ сделать это:

  • Что касается отправки данных в приложение, вы можете хранить значения в объекте dcc.Store (как json).
  • Затем можно создать обратный вызов, который форматирует информацию из этого json в отдельный html objects.
  • Каждый html object может иметь динамический обратный вызов c, который изменяется style атрибут содержимого, так что когда пользователь нажимает на него, он делает то, что вам нужно.

Лучше всего это сделать:

  • Создайте свой собственный компонент da sh, который содержит собственную реакцию, которая будет определять поведение, аналогичное форматированию, которое вы хотите. (Внимание, если вы не опытный дизайнер UX / UI, будет очень трудно заставить его выглядеть хорошо.)
  • Pu sh ваши данные с поддержкой js объект данных - возможно, window.dataLayer или что-то эквивалентное.
  • Напишите несколько js функций, которые взаимодействуют с каждым компонентом da sh, для pu sh данных из интерактивного слоя обратно в ваше основное приложение.

Извините, я не могу быть более подробным и описательным - это скорее схема c ответа, чем решение.

...