@midscene/visualizer 0.1.4 → 0.2.0

package/dist/lib/index.css

@@ -32,16 +32,20 @@ footer.mt-8 {
   display: flex;
   flex-direction: column;
   height: 100%;
-  color: #000;
+  color: #3b3b3b;
   font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans",
+    Helvetica,
     Arial,
-    sans-serif;
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
   font-size: 14px;
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px solid #CCCCCC;
+  border-top: 1px solid #E5E5E5;
+  border-bottom: 1px solid #E5E5E5;
 }
 .ant-layout {
   flex-grow: 1;
@@ -59,7 +63,7 @@ footer.mt-8 {
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
-  background: #f7f7f7;
+  background: #FFF;
 }
 .main-right.uploader-wrapper {
   box-sizing: border-box;
@@ -82,7 +86,7 @@ footer.mt-8 {
   background: #ffffff;
   overflow-x: hidden;
   overflow-y: scroll;
-  border-left: 1px solid #CCCCCC;
+  border-left: 1px solid #E5E5E5;
 }
 .main-right .main-side {
   box-sizing: border-box;

package/dist/lib/index.js

@@ -51,17 +51,18 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_index = require("./index.css");
+var import_detail_side = __toESM(require("./component/detail-side"));
+var import_sidebar = __toESM(require("./component/sidebar"));
+var import_store = require("./component/store");
+var import_head = require("@modern-js/runtime/head");
 var import_antd = require("antd");
 var import_react = require("react");
-var import_head = require("@modern-js/runtime/head");
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_timeline = __toESM(require("./component/timeline"));
-var import_detail_panel = __toESM(require("./component/detail-panel"));
 var import_logo_plain = __toESM(require("./component/assets/logo-plain.js"));
+var import_detail_panel = __toESM(require("./component/detail-panel"));
 var import_global_hover_preview = __toESM(require("./component/global-hover-preview"));
-var import_store = require("./component/store");
-var import_detail_side = __toESM(require("./component/detail-side"));
-var import_sidebar = __toESM(require("./component/sidebar"));
+var import_timeline = __toESM(require("./component/timeline"));
+var import_demo_dump = __toESM(require("./demo-dump.json"));
 const { Dragger } = import_antd.Upload;
 let globalRenderCount = 1;
 function Visualizer(props) {
@@ -120,9 +121,8 @@ function Visualizer(props) {
       return false;
     }
   };
-  const loadTasksDemo = () => {
-  };
-  const loadInsightDemo = () => {
+  const loadDemoDump = () => {
+    setGroupedDump(import_demo_dump.default);
   };
   let mainContent;
   if (!executionDump) {
@@ -139,14 +139,11 @@ function Visualizer(props) {
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "ant-upload-text", children: [
           "The latest dump file is usually placed in",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "./midscene_run/" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "./midscene_run/report" }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
       ] })),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "demo-loader", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "link", onClick: loadTasksDemo, children: "Load Tasks Demo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "link", onClick: loadInsightDemo, children: "Load Insight Demo" })
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "demo-loader", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "link", onClick: loadDemoDump, children: "Load Demo" }) })
     ] });
   } else {
     mainContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -174,11 +171,18 @@ function Visualizer(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "main-right", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_timeline.default, {}, mainLayoutChangeFlag),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_resizable_panels.PanelGroup, { autoSaveId: "page-detail-layout", direction: "horizontal", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-canvas-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) })
-            ] }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_react_resizable_panels.PanelGroup,
+              {
+                autoSaveId: "page-detail-layout",
+                direction: "horizontal",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-canvas-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) })
+                ]
+              }
+            ) })
           ] }) })
         ]
       }
@@ -188,14 +192,20 @@ function Visualizer(props) {
   (0, import_react.useEffect)(() => {
     const ifInRspressPage = document.querySelector(".rspress-nav");
     const navHeightKey = "--rp-nav-height";
-    const originalNavHeight = getComputedStyle(document.documentElement).getPropertyValue(navHeightKey);
+    const originalNavHeight = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue(navHeightKey);
     if (ifInRspressPage) {
-      setContainerHeight("calc(100vh - 72px)");
-      document.documentElement.style.setProperty(navHeightKey, "42px");
+      const newNavHeight = "42px";
+      setContainerHeight(`calc(100vh - ${newNavHeight})`);
+      document.documentElement.style.setProperty(navHeightKey, newNavHeight);
     }
     return () => {
       if (ifInRspressPage) {
-        document.documentElement.style.setProperty(navHeightKey, originalNavHeight);
+        document.documentElement.style.setProperty(
+          navHeightKey,
+          originalNavHeight
+        );
       }
     };
   }, []);
@@ -218,8 +228,16 @@ function Visualizer(props) {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_head.Helmet, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "MidScene.js - Visualization Tool" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "page-container", style: { height: containerHeight }, children: mainContent }, `render-${globalRenderCount}`),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_head.Helmet, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Midscene.js - Visualization Tool" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "page-container",
+            style: { height: containerHeight },
+            children: mainContent
+          },
+          `render-${globalRenderCount}`
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global_hover_preview.default, {})
       ]
     }

package/dist/lib/utils.js

@@ -76,22 +76,21 @@ function insightDumpToExecutionDump(insightDump) {
     return task;
   };
   if (!Array.isArray(insightDump)) {
-    const result = {
+    const result2 = {
       sdkVersion: insightDump.sdkVersion,
       logTime: insightDump.logTime,
       name: "Insight",
       tasks: [insightToTask(insightDump)]
     };
-    return result;
-  } else {
-    const result = {
-      sdkVersion: insightDump[0].sdkVersion,
-      logTime: insightDump[0].logTime,
-      name: "Insight",
-      tasks: insightDump.map(insightToTask)
-    };
-    return result;
+    return result2;
   }
+  const result = {
+    sdkVersion: insightDump[0].sdkVersion,
+    logTime: insightDump[0].logTime,
+    name: "Insight",
+    tasks: insightDump.map(insightToTask)
+  };
+  return result;
 }
 function timeStr(timestamp) {
   return timestamp ? (0, import_dayjs.default)(timestamp).format("YYYY-MM-DD HH:mm:ss") : "-";

package/dist/types/component/store.d.ts

@@ -1,4 +1,4 @@
-import { InsightDump, BaseElement, ExecutionTask, GroupedActionDump } from '../../../midscene/dist/types';
+import type { BaseElement, ExecutionTask, GroupedActionDump, InsightDump } from '../../../midscene/dist/types';
 export declare const useBlackboardPreference: import("zustand").UseBoundStore<import("zustand").StoreApi<{
     bgVisible: boolean;
     textsVisible: boolean;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './index.less';
-import { GroupedActionDump } from '@midscene/core';
+import type { GroupedActionDump } from '@midscene/core';
 export declare function Visualizer(props: {
     hideLogo?: boolean;
     logoAction?: () => void;

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ExecutionDump, InsightDump, ExecutionTask } from '@midscene/core';
+import type { ExecutionDump, ExecutionTask, InsightDump } from '@midscene/core';
 export declare function insightDumpToExecutionDump(insightDump: InsightDump | InsightDump[]): ExecutionDump;
 export declare function timeStr(timestamp?: number): string;
 export declare function typeStr(task: ExecutionTask): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "types": "./dist/types/index.d.ts",
   "jsnext:source": "./src/index.ts",
   "main": "./dist/lib/index.js",
@@ -11,24 +11,24 @@
   ],
   "dependencies": {
     "@ant-design/icons": "5.3.7",
-    "@modern-js/runtime": "^2.54.2",
-    "antd": "5.17.3",
+    "@modern-js/runtime": "^2.56.2",
+    "antd": "5.19.3",
     "dayjs": "1.11.11",
     "pixi.js": "8.1.1",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-resizable-panels": "2.0.22",
     "zustand": "4.5.2",
-    "@midscene/core": "0.1.4"
+    "@midscene/core": "0.2.0"
   },
   "devDependencies": {
-    "@modern-js/module-tools": "^2.54.2",
+    "@modern-js/module-tools": "^2.56.1",
     "@modern-js/plugin-module-doc": "^2.33.1",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/node": "^18.0.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "~3.0.2",
     "typescript": "~5.0.4"
   },