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

Question

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

例如，假设我有一个名为TaggedCoordinates的python对象，其实例具有t.x、t.y和t.tag属性。如果我想在页面中显示这样的实例，或者有一个表单要求用户输入一个实例，我会使用x和y的两个数字元素，以及标记的string元素。在回调中，我会得到如下内容

@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):
    …

我怎么才能实现这样的事情呢？我可以用一个特定的id (比如tag_coord_id)将html元素分组到一个div中，但是我该如何让dash明白我想要得到一个作为单个python tag_coord变量的"struct“或者它的组成部分的dict。

Answer 1

这里有一个可能的解决方案(但将等待看看是否有更好的解决方案)。

编写一个转换函数，该函数将对分组与对象相关的html元素的div进行转换，然后在回调函数中使用它。如下所示：

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='')