Plotly-Dash：聚合输入和输出以反映复杂的 python 对象

Question

如何使用多个 html 元素的集合来表示一个对象。

例如，假设我有一个名为 TaggedCoordinates 的 python 对象，其实例具有属性 t.x、t.y 和 t.tag。如果我想在页面中显示这样的实例，或者有一个表单要求用户输入一个，我会使用两个数字元素作为 x 和 y，并使用一个字符串元素作为标签。在回电中，我会说

@callback(..., [...], [State(x_id), State(y_id), State(tag_id)])
def store_tagged_coordinate(x, y, tag):
    …

但我更喜欢这样的东西：

@callback(..., [...], [State(tag_coord_id)])
def store_tagged_coordinate(tag_coord):
    …

我怎样才能实现这样的目标？我可以将 div 中的 html 元素分组为具有特定 ID（比如 tag_coord_id），但是我如何让 dash 理解我想要获得 "struct" 或它的成分作为单个 python tag_coord 变量的字典。

Answer 1

这是一个可能的解决方案（但会等着看是否有更好的解决方案）。

编写一个转换器函数来转换 div 将 object-relevant html 元素分组，然后在回调函数中使用它。像这样：

from dataclasses import dataclass

@dataclass
class TaggedCoord:
    x: float
    y: float
    tag: str

def obj_for_div(d):
    return TaggedCoord(*[c.value for c in d.children])

然后，如果您在布局中有如下内容：

import dash_core_components as dcc
import dash_html_components as html
d = html.Div(children=[dcc.Input(id='x', value=0, type='number'), 
                       dcc.Input(id='y', value=0, type='number'), 
                       dcc.Input(id='tag', value='', type='text')],
      id='tagged_coord')

@callback(..., [...], [State(tag_coord_id)])
def store_tagged_coordinate(..., tag_coord):
    tag_coord = obj_for_div(tag_coord)
    ...

看到那个

>>> obj_for_div(d)
TaggedCoord(x=0, y=0, tag='')

Plotly-Dash：聚合输入和输出以反映复杂的 python 对象

Plotly-Dash: Aggregate inputs and outputs to reflect complex python objects

python

plotly-dash