@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 + 16px);
57
+ padding: 0 10px 0 calc(10px + 18px);
53
58
  }
54
59
  .side-bar .side-item-name {
55
- padding: 0 10px 0 calc(10px + 16px);
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: 10px;
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
- CheckOutlined,
8
- ClockCircleOutlined,
9
- CloseOutlined,
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, _b, _c;
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(CheckOutlined, {});
25
+ statusIcon = /* @__PURE__ */ jsx(CheckCircleFilled, {});
25
26
  } else if (task.status === "fail") {
26
- statusIcon = /* @__PURE__ */ jsx(CloseOutlined, {});
27
+ statusIcon = /* @__PURE__ */ jsx(CloseCircleFilled, {});
27
28
  } else if (task.status === "pending") {
28
- statusIcon = /* @__PURE__ */ jsx(ClockCircleOutlined, {});
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__ */ jsx("div", { className: "side-sub-title", children: execution.name }),
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 + 16px);
57
+ padding: 0 10px 0 calc(10px + 18px);
53
58
  }
54
59
  .side-bar .side-item-name {
55
- padding: 0 10px 0 calc(10px + 16px);
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: 10px;
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, _b, _c;
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.CheckOutlined, {});
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.CloseOutlined, {});
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.ClockCircleOutlined, {});
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.jsx)("div", { className: "side-sub-title", children: execution.name }),
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-beta-20240809090814.0",
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-beta-20240809090814.0"
22
+ "@midscene/core": "0.2.2"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@modern-js/module-tools": "^2.56.1",