@luxonis/depthai-pipeline-lib 1.14.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -78,37 +78,64 @@ const debugSections = [
|
|
|
78
78
|
],
|
|
79
79
|
},
|
|
80
80
|
];
|
|
81
|
-
const
|
|
81
|
+
const inputPortStatusSection = [
|
|
82
82
|
{
|
|
83
|
-
title: 'Port Status',
|
|
83
|
+
title: 'Input Port Status',
|
|
84
84
|
items: [
|
|
85
85
|
{
|
|
86
86
|
0: {
|
|
87
|
-
id: 'port-inactive',
|
|
88
|
-
label: '
|
|
87
|
+
id: 'input-port-inactive',
|
|
88
|
+
label: 'No data received yet',
|
|
89
89
|
marker: _jsx(LegendDot, { tone: "gray" }),
|
|
90
90
|
},
|
|
91
91
|
1: {
|
|
92
|
-
id: 'port-ready',
|
|
93
|
-
label: '
|
|
92
|
+
id: 'input-port-ready',
|
|
93
|
+
label: 'Idle',
|
|
94
94
|
marker: _jsx(LegendDot, { tone: "green" }),
|
|
95
95
|
},
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
0: {
|
|
99
|
-
id: 'port-busy',
|
|
100
|
-
label: 'Busy',
|
|
99
|
+
id: 'input-port-busy',
|
|
100
|
+
label: 'Busy (waiting for messages)',
|
|
101
101
|
marker: _jsx(LegendDot, { tone: "yellow" }),
|
|
102
102
|
},
|
|
103
103
|
1: {
|
|
104
|
-
id: 'port-blocked',
|
|
105
|
-
label:
|
|
104
|
+
id: 'input-port-blocked',
|
|
105
|
+
label: "Blocked (can't receive messages)",
|
|
106
106
|
marker: _jsx(LegendDot, { tone: "red" }),
|
|
107
107
|
},
|
|
108
108
|
},
|
|
109
109
|
],
|
|
110
110
|
},
|
|
111
111
|
];
|
|
112
|
+
const outputPortStatusSection = [
|
|
113
|
+
{
|
|
114
|
+
title: 'Output Port Status',
|
|
115
|
+
items: [
|
|
116
|
+
{
|
|
117
|
+
0: {
|
|
118
|
+
id: 'output-port-inactive',
|
|
119
|
+
label: 'No data received yet',
|
|
120
|
+
marker: _jsx(LegendDot, { tone: "gray" }),
|
|
121
|
+
},
|
|
122
|
+
1: {
|
|
123
|
+
id: 'output-port-ready',
|
|
124
|
+
label: 'Idle',
|
|
125
|
+
marker: _jsx(LegendDot, { tone: "green" }),
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
0: {
|
|
130
|
+
id: 'output-port-busy',
|
|
131
|
+
label: 'Busy (sending messages)',
|
|
132
|
+
marker: _jsx(LegendDot, { tone: "yellow" }),
|
|
133
|
+
},
|
|
134
|
+
1: null,
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
},
|
|
138
|
+
];
|
|
112
139
|
const sharedSections = [
|
|
113
140
|
{
|
|
114
141
|
title: 'Ports',
|
|
@@ -165,17 +192,24 @@ function LegendDot({ tone, square = false, }) {
|
|
|
165
192
|
backgroundColor: color,
|
|
166
193
|
border: 'none',
|
|
167
194
|
borderRadius: square ? undefined : '100%',
|
|
195
|
+
flexShrink: 0,
|
|
168
196
|
} }));
|
|
169
197
|
}
|
|
170
198
|
function LegendCell({ left, right, }) {
|
|
171
|
-
return (_jsxs(Flex, { gap: "
|
|
199
|
+
return (_jsxs(Flex, { gap: "xxs", width: "full", alignItems: "center", children: [_jsxs(Flex, { alignItems: "center", gap: "xxs", width: "full", children: [left.marker, _jsx(SubLabel, { text: `${left.label}` })] }), right ? (_jsxs(Flex, { alignItems: "center", gap: "xxs", width: "full", children: [right.marker, _jsx(SubLabel, { text: `${right.label}` })] })) : (_jsx(_Fragment, {}))] }));
|
|
172
200
|
}
|
|
173
201
|
function LegendSection({ title, items }) {
|
|
174
202
|
return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", children: [_jsx(Label, { text: title, weight: "medium" }), items.map((item) => (_jsx(LegendCell, { left: item[0], right: item[1] }, `${item[0].id}-${item[1]?.id}`)))] }));
|
|
175
203
|
}
|
|
176
204
|
export const PipelineLegend = ({ isDebugging, }) => {
|
|
177
205
|
const sections = isDebugging
|
|
178
|
-
? [
|
|
206
|
+
? [
|
|
207
|
+
...debugSections,
|
|
208
|
+
...sharedSections,
|
|
209
|
+
...inputPortStatusSection,
|
|
210
|
+
...outputPortStatusSection,
|
|
211
|
+
bridgeSection,
|
|
212
|
+
]
|
|
179
213
|
: sharedSections;
|
|
180
|
-
return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "
|
|
214
|
+
return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "390px", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", width: "full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) })] }));
|
|
181
215
|
};
|
|
@@ -25,11 +25,14 @@ function nodeStateToState(state) {
|
|
|
25
25
|
function formatIOStates(values) {
|
|
26
26
|
let returnObj = {};
|
|
27
27
|
for (const [key, value] of Object.entries(values)) {
|
|
28
|
+
const dotColor = isNaN(Number(value.state))
|
|
29
|
+
? 'gray'
|
|
30
|
+
: nodeStateToDotColor(value.state);
|
|
28
31
|
returnObj = {
|
|
29
32
|
...returnObj,
|
|
30
33
|
[key]: {
|
|
31
34
|
...value,
|
|
32
|
-
dotColor:
|
|
35
|
+
dotColor: dotColor,
|
|
33
36
|
},
|
|
34
37
|
};
|
|
35
38
|
}
|
|
@@ -39,7 +42,10 @@ export function parsePipelineState(rawPayload) {
|
|
|
39
42
|
const { nodeStates } = rawPayload;
|
|
40
43
|
const parsedNodeStates = [];
|
|
41
44
|
for (const [nodeId, nodeState] of nodeStates) {
|
|
42
|
-
const
|
|
45
|
+
const parsedState = Number(nodeState?.state);
|
|
46
|
+
const state = isNaN(parsedState)
|
|
47
|
+
? 'IDLE'
|
|
48
|
+
: nodeStateToState(parsedState);
|
|
43
49
|
const currentNode = {
|
|
44
50
|
id: nodeId,
|
|
45
51
|
inputs: formatIOStates(nodeState.inputStates),
|