1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//! Property inspector panel.
use blinc_app::prelude::*;
use blinc_core::State;
use crate::state::{GraphData, Selection};
use crate::theme;
/// Build the inspector panel.
pub fn inspector_view(
selection: State<Selection>,
graph_data: State<GraphData>,
) -> impl ElementBuilder {
stateful::<NoState>()
.deps([selection.signal_id(), graph_data.signal_id()])
.on_state(move |_ctx| {
let sel = selection.get();
let graph = graph_data.get();
let mut panel = div()
.id("inspector")
.flex_col()
.p(3.0)
.gap(1.0)
.border_top(1.0, theme::BORDER);
panel = panel.child(
div()
.class("section-title")
.child(text("Inspector").color(theme::TEXT_DIM)),
);
match sel {
Selection::None => {
panel = panel.child(
div()
.class("inspector-hint")
.child(text("Click a node or edge to inspect").color(theme::TEXT_DIM)),
);
}
Selection::Node(idx) => {
if let Some(node) = graph.nodes.get(idx) {
panel = panel.child(div().class("inspector-title").child(
text(format!("{}: {}", node.label, node.id)).color(theme::ACCENT),
));
for (key, val) in &node.properties {
panel = panel.child(
div()
.class("prop-row")
.child(
div()
.class("prop-key")
.child(text(key).color(theme::TEXT_DIM)),
)
.child(
div()
.class("prop-val")
.child(text(val).color(theme::TEXT_COLOR)),
),
);
}
}
}
Selection::Edge(idx) => {
if let Some(edge) = graph.edges.get(idx) {
let src_label = graph
.nodes
.get(edge.src)
.map(|n| n.id.as_str())
.unwrap_or("?");
let dst_label = graph
.nodes
.get(edge.dst)
.map(|n| n.id.as_str())
.unwrap_or("?");
panel = panel.child(
div().class("inspector-title").child(
text(format!("{src_label} -[{}]-> {dst_label}", edge.rel_type))
.color(theme::ACCENT),
),
);
for (key, val) in &edge.properties {
panel = panel.child(
div()
.class("prop-row")
.child(
div()
.class("prop-key")
.child(text(key).color(theme::TEXT_DIM)),
)
.child(
div()
.class("prop-val")
.child(text(val).color(theme::TEXT_COLOR)),
),
);
}
}
}
}
panel
})
}