@midscene/visualizer 0.2.2-beta-20240809090814.0 → 0.2.2
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.
|
@@ -37,6 +37,11 @@
|
|
|
37
37
|
padding: 0 10px;
|
|
38
38
|
margin-bottom: 6px;
|
|
39
39
|
}
|
|
40
|
+
.side-bar .name-status {
|
|
41
|
+
font-size: 12px;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
margin-right: 6px;
|
|
44
|
+
}
|
|
40
45
|
.side-bar .side-item {
|
|
41
46
|
cursor: pointer;
|
|
42
47
|
transition: 0.1s;
|
|
@@ -49,10 +54,10 @@
|
|
|
49
54
|
background: #bfc4da80;
|
|
50
55
|
}
|
|
51
56
|
.side-bar .side-item .side-item-content {
|
|
52
|
-
padding: 0 10px 0 calc(10px +
|
|
57
|
+
padding: 0 10px 0 calc(10px + 18px);
|
|
53
58
|
}
|
|
54
59
|
.side-bar .side-item-name {
|
|
55
|
-
padding: 0 10px 0 calc(10px +
|
|
60
|
+
padding: 0 10px 0 calc(10px + 18px);
|
|
56
61
|
position: relative;
|
|
57
62
|
display: flex;
|
|
58
63
|
justify-content: space-between;
|
|
@@ -62,7 +67,7 @@
|
|
|
62
67
|
left: 10px;
|
|
63
68
|
display: inline-block;
|
|
64
69
|
color: #AAA;
|
|
65
|
-
font-size:
|
|
70
|
+
font-size: 12px;
|
|
66
71
|
line-height: 10px;
|
|
67
72
|
top: 50%;
|
|
68
73
|
margin-top: -5px;
|
|
@@ -4,10 +4,11 @@ import { useAllCurrentTasks, useExecutionDump } from "./store";
|
|
|
4
4
|
import { typeStr } from "../utils";
|
|
5
5
|
import {
|
|
6
6
|
ArrowRightOutlined,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
CheckCircleFilled,
|
|
8
|
+
ClockCircleFilled,
|
|
9
|
+
CloseCircleFilled,
|
|
10
10
|
LogoutOutlined,
|
|
11
|
+
MessageOutlined,
|
|
11
12
|
MinusOutlined
|
|
12
13
|
} from "@ant-design/icons";
|
|
13
14
|
import { Button } from "antd";
|
|
@@ -16,16 +17,16 @@ import Logo from "./assets/logo-plain2.js";
|
|
|
16
17
|
import { timeCostStrElement } from "./misc";
|
|
17
18
|
import PanelTitle from "./panel-title";
|
|
18
19
|
const SideItem = (props) => {
|
|
19
|
-
var _a
|
|
20
|
+
var _a;
|
|
20
21
|
const { task, onClick, selected } = props;
|
|
21
22
|
const selectedClass = selected ? "selected" : "";
|
|
22
23
|
let statusIcon = /* @__PURE__ */ jsx(MinusOutlined, {});
|
|
23
24
|
if (task.status === "success") {
|
|
24
|
-
statusIcon = /* @__PURE__ */ jsx(
|
|
25
|
+
statusIcon = /* @__PURE__ */ jsx(CheckCircleFilled, {});
|
|
25
26
|
} else if (task.status === "fail") {
|
|
26
|
-
statusIcon = /* @__PURE__ */ jsx(
|
|
27
|
+
statusIcon = /* @__PURE__ */ jsx(CloseCircleFilled, {});
|
|
27
28
|
} else if (task.status === "pending") {
|
|
28
|
-
statusIcon = /* @__PURE__ */ jsx(
|
|
29
|
+
statusIcon = /* @__PURE__ */ jsx(ClockCircleFilled, {});
|
|
29
30
|
} else if (task.status === "cancelled") {
|
|
30
31
|
statusIcon = /* @__PURE__ */ jsx(LogoutOutlined, {});
|
|
31
32
|
} else if (task.status === "running") {
|
|
@@ -35,15 +36,6 @@ const SideItem = (props) => {
|
|
|
35
36
|
if ((_a = task.timing) == null ? void 0 : _a.cost) {
|
|
36
37
|
statusText = timeCostStrElement(task.timing.cost);
|
|
37
38
|
}
|
|
38
|
-
let contentRow;
|
|
39
|
-
if (task.type === "Planning") {
|
|
40
|
-
contentRow = /* @__PURE__ */ jsx("div", { className: "side-item-content", children: (_b = task.param) == null ? void 0 : _b.userPrompt });
|
|
41
|
-
} else if (task.type === "Insight" && task.subType === "Query") {
|
|
42
|
-
const demand = (_c = task.param) == null ? void 0 : _c.dataDemand;
|
|
43
|
-
const contentToShow = typeof demand === "string" ? demand : JSON.stringify(demand);
|
|
44
|
-
contentRow = /* @__PURE__ */ jsx("div", { className: "side-item-content", children: contentToShow });
|
|
45
|
-
} else {
|
|
46
|
-
}
|
|
47
39
|
return /* @__PURE__ */ jsxs(
|
|
48
40
|
"div",
|
|
49
41
|
{
|
|
@@ -66,8 +58,7 @@ const SideItem = (props) => {
|
|
|
66
58
|
/* @__PURE__ */ jsx("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
|
|
67
59
|
/* @__PURE__ */ jsx("div", { className: "title", children: typeStr(task) }),
|
|
68
60
|
/* @__PURE__ */ jsx("div", { className: "status-text", children: statusText })
|
|
69
|
-
] })
|
|
70
|
-
contentRow
|
|
61
|
+
] })
|
|
71
62
|
]
|
|
72
63
|
}
|
|
73
64
|
);
|
|
@@ -149,7 +140,10 @@ const Sidebar = (props) => {
|
|
|
149
140
|
}
|
|
150
141
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
151
142
|
seperator,
|
|
152
|
-
/* @__PURE__ */
|
|
143
|
+
/* @__PURE__ */ jsxs("div", { className: "side-sub-title", children: [
|
|
144
|
+
/* @__PURE__ */ jsx("span", { className: "name-status", children: /* @__PURE__ */ jsx(MessageOutlined, {}) }),
|
|
145
|
+
execution.name
|
|
146
|
+
] }),
|
|
153
147
|
taskList
|
|
154
148
|
] }, indexOfExecution);
|
|
155
149
|
});
|
|
@@ -37,6 +37,11 @@
|
|
|
37
37
|
padding: 0 10px;
|
|
38
38
|
margin-bottom: 6px;
|
|
39
39
|
}
|
|
40
|
+
.side-bar .name-status {
|
|
41
|
+
font-size: 12px;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
margin-right: 6px;
|
|
44
|
+
}
|
|
40
45
|
.side-bar .side-item {
|
|
41
46
|
cursor: pointer;
|
|
42
47
|
transition: 0.1s;
|
|
@@ -49,10 +54,10 @@
|
|
|
49
54
|
background: #bfc4da80;
|
|
50
55
|
}
|
|
51
56
|
.side-bar .side-item .side-item-content {
|
|
52
|
-
padding: 0 10px 0 calc(10px +
|
|
57
|
+
padding: 0 10px 0 calc(10px + 18px);
|
|
53
58
|
}
|
|
54
59
|
.side-bar .side-item-name {
|
|
55
|
-
padding: 0 10px 0 calc(10px +
|
|
60
|
+
padding: 0 10px 0 calc(10px + 18px);
|
|
56
61
|
position: relative;
|
|
57
62
|
display: flex;
|
|
58
63
|
justify-content: space-between;
|
|
@@ -62,7 +67,7 @@
|
|
|
62
67
|
left: 10px;
|
|
63
68
|
display: inline-block;
|
|
64
69
|
color: #AAA;
|
|
65
|
-
font-size:
|
|
70
|
+
font-size: 12px;
|
|
66
71
|
line-height: 10px;
|
|
67
72
|
top: 50%;
|
|
68
73
|
margin-top: -5px;
|
|
@@ -42,16 +42,16 @@ var import_logo_plain2 = __toESM(require("./assets/logo-plain2.js"));
|
|
|
42
42
|
var import_misc = require("./misc");
|
|
43
43
|
var import_panel_title = __toESM(require("./panel-title"));
|
|
44
44
|
const SideItem = (props) => {
|
|
45
|
-
var _a
|
|
45
|
+
var _a;
|
|
46
46
|
const { task, onClick, selected } = props;
|
|
47
47
|
const selectedClass = selected ? "selected" : "";
|
|
48
48
|
let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {});
|
|
49
49
|
if (task.status === "success") {
|
|
50
|
-
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.
|
|
50
|
+
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, {});
|
|
51
51
|
} else if (task.status === "fail") {
|
|
52
|
-
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.
|
|
52
|
+
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleFilled, {});
|
|
53
53
|
} else if (task.status === "pending") {
|
|
54
|
-
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.
|
|
54
|
+
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleFilled, {});
|
|
55
55
|
} else if (task.status === "cancelled") {
|
|
56
56
|
statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LogoutOutlined, {});
|
|
57
57
|
} else if (task.status === "running") {
|
|
@@ -61,15 +61,6 @@ const SideItem = (props) => {
|
|
|
61
61
|
if ((_a = task.timing) == null ? void 0 : _a.cost) {
|
|
62
62
|
statusText = (0, import_misc.timeCostStrElement)(task.timing.cost);
|
|
63
63
|
}
|
|
64
|
-
let contentRow;
|
|
65
|
-
if (task.type === "Planning") {
|
|
66
|
-
contentRow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-item-content", children: (_b = task.param) == null ? void 0 : _b.userPrompt });
|
|
67
|
-
} else if (task.type === "Insight" && task.subType === "Query") {
|
|
68
|
-
const demand = (_c = task.param) == null ? void 0 : _c.dataDemand;
|
|
69
|
-
const contentToShow = typeof demand === "string" ? demand : JSON.stringify(demand);
|
|
70
|
-
contentRow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-item-content", children: contentToShow });
|
|
71
|
-
} else {
|
|
72
|
-
}
|
|
73
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
65
|
"div",
|
|
75
66
|
{
|
|
@@ -92,8 +83,7 @@ const SideItem = (props) => {
|
|
|
92
83
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
|
|
93
84
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: (0, import_utils.typeStr)(task) }),
|
|
94
85
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status-text", children: statusText })
|
|
95
|
-
] })
|
|
96
|
-
contentRow
|
|
86
|
+
] })
|
|
97
87
|
]
|
|
98
88
|
}
|
|
99
89
|
);
|
|
@@ -175,7 +165,10 @@ const Sidebar = (props) => {
|
|
|
175
165
|
}
|
|
176
166
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
177
167
|
seperator,
|
|
178
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
168
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-sub-title", children: [
|
|
169
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "name-status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MessageOutlined, {}) }),
|
|
170
|
+
execution.name
|
|
171
|
+
] }),
|
|
179
172
|
taskList
|
|
180
173
|
] }, indexOfExecution);
|
|
181
174
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@midscene/visualizer",
|
|
3
|
-
"version": "0.2.2
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"types": "./dist/types/index.d.ts",
|
|
5
5
|
"jsnext:source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/lib/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"react-dom": "^18.2.0",
|
|
20
20
|
"react-resizable-panels": "2.0.22",
|
|
21
21
|
"zustand": "4.5.2",
|
|
22
|
-
"@midscene/core": "0.2.2
|
|
22
|
+
"@midscene/core": "0.2.2"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@modern-js/module-tools": "^2.56.1",
|