@midscene/visualizer 0.1.0 → 0.1.1

package/dist/es/component/blackboard.js

@@ -72,7 +72,11 @@ const BlackBoard = () => {
     );
     return () => {
       console.log("will destroy");
-      app == null ? void 0 : app.destroy(true, { children: true, texture: true });
+      try {
+        app.destroy(true, { children: true, texture: true });
+      } catch (e) {
+        console.warn("destroy failed", e);
+      }
     };
   }, [app, screenWidth, screenHeight]);
   useEffect(() => {

package/dist/es/component/detail-side.css

@@ -18,9 +18,10 @@
   line-height: 1.5;
 }
 .detail-side .meta-kv .meta .meta-key {
+  font-weight: bold;
   width: 100px;
   text-align: right;
-  padding-right: 10px;
+  padding-right: 16px;
 }
 .detail-side .meta-kv .meta .meta-value {
   flex: 1 1;

package/dist/es/component/detail-side.js

@@ -135,19 +135,19 @@ const DetailSide = () => {
   const metaKVElement = MetaKV({
     data: [
       {
-        key: "Status",
+        key: "status",
         content: (task == null ? void 0 : task.status) || ""
       },
       {
-        key: "Start",
+        key: "start",
         content: timeStr((_a = task == null ? void 0 : task.timing) == null ? void 0 : _a.start)
       },
       {
-        key: "End",
+        key: "end",
         content: timeStr((_b = task == null ? void 0 : task.timing) == null ? void 0 : _b.end)
       },
       {
-        key: "Time Cost",
+        key: "time cost",
         content: timeCostStrElement((_c = task == null ? void 0 : task.timing) == null ? void 0 : _c.cost)
       }
     ]

package/dist/es/component/global-hover-preview.js

@@ -7,11 +7,16 @@ const GlobalHoverPreview = () => {
   var _a;
   const wrapperRef = useRef(null);
   const hoverTask = useExecutionDump((store) => store.hoverTask);
+  const hoverTimestamp = useExecutionDump((store) => store.hoverTimestamp);
   const hoverPreviewConfig = useExecutionDump((store) => store.hoverPreviewConfig);
   const [imageW, setImageW] = useState(size);
   const [imageH, setImageH] = useState(size);
   const images = (_a = hoverTask == null ? void 0 : hoverTask.recorder) == null ? void 0 : _a.filter((item) => {
-    return item.screenshot;
+    let valid = Boolean(item.screenshot);
+    if (hoverTimestamp) {
+      valid = valid && item.ts >= hoverTimestamp;
+    }
+    return valid;
   }).map((item) => item.screenshot);
   const { x, y } = hoverPreviewConfig || {};
   let left = 0;

package/dist/es/component/store.js

@@ -33,6 +33,7 @@ const useExecutionDump = create((set, get) => {
     dump: null,
     activeTask: null,
     hoverTask: null,
+    hoverTimestamp: null,
     hoverPreviewConfig: null
   };
   const syncToInsightDump = (dump) => {
@@ -65,8 +66,8 @@ const useExecutionDump = create((set, get) => {
         resetInsightDump();
       }
     },
-    setHoverTask(task) {
-      set({ hoverTask: task });
+    setHoverTask(task, timestamp) {
+      set({ hoverTask: task, hoverTimestamp: timestamp || null });
     },
     setHoverPreviewConfig(config) {
       if (config) {

package/dist/es/component/timeline.js

@@ -394,7 +394,7 @@ const Timeline = () => {
     const refBounding = (_a = wrapper.current) == null ? void 0 : _a.getBoundingClientRect();
     const task = idTaskMap[item.id];
     if (task) {
-      setHoverTask(task);
+      setHoverTask(task, item.timeOffset + startingTime);
       setHoverPreviewConfig({
         x: mouseX + ((refBounding == null ? void 0 : refBounding.left) || 0),
         y: ((refBounding == null ? void 0 : refBounding.bottom) || 1) - 1

package/dist/es/index.css

@@ -2,13 +2,9 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
-    Arial,
-    sans-serif;
-  font-size: 14px;
+}
+.rspress-nav {
+  transition: 0.2s;
 }
 :root {
   --modern-sidebar-width: 0 !important;
@@ -37,6 +33,15 @@ footer.mt-8 {
   flex-direction: column;
   height: 100%;
   color: #000;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  font-size: 14px;
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px solid #CCCCCC;
 }
 .ant-layout {
   flex-grow: 1;

package/dist/es/index.js

@@ -31,6 +31,7 @@ import { useExecutionDump } from "./component/store";
 import DetailSide from "./component/detail-side";
 import Sidebar from "./component/sidebar";
 const { Dragger } = Upload;
+let globalRenderCount = 1;
 function Visualizer(props) {
   const { dump } = props;
   const executionDump = useExecutionDump((store) => store.dump);
@@ -151,6 +152,26 @@ function Visualizer(props) {
       }
     );
   }
+  const [containerHeight, setContainerHeight] = useState("100%");
+  useEffect(() => {
+    const ifInRspressPage = document.querySelector(".rspress-nav");
+    const navHeightKey = "--rp-nav-height";
+    const originalNavHeight = getComputedStyle(document.documentElement).getPropertyValue(navHeightKey);
+    if (ifInRspressPage) {
+      setContainerHeight("calc(100vh - 72px)");
+      document.documentElement.style.setProperty(navHeightKey, "42px");
+    }
+    return () => {
+      if (ifInRspressPage) {
+        document.documentElement.style.setProperty(navHeightKey, originalNavHeight);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      globalRenderCount += 1;
+    };
+  }, []);
   return /* @__PURE__ */ jsxs(
     ConfigProvider,
     {
@@ -166,7 +187,7 @@ function Visualizer(props) {
       },
       children: [
         /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "MidScene.js - Visualization Tool" }) }),
-        /* @__PURE__ */ jsx("div", { className: "page-container", children: mainContent }),
+        /* @__PURE__ */ jsx("div", { className: "page-container", style: { height: containerHeight }, children: mainContent }, `render-${globalRenderCount}`),
         /* @__PURE__ */ jsx(GlobalHoverPreview, {})
       ]
     }

package/dist/lib/component/blackboard.js

@@ -105,7 +105,11 @@ const BlackBoard = () => {
     );
     return () => {
       console.log("will destroy");
-      app == null ? void 0 : app.destroy(true, { children: true, texture: true });
+      try {
+        app.destroy(true, { children: true, texture: true });
+      } catch (e) {
+        console.warn("destroy failed", e);
+      }
     };
   }, [app, screenWidth, screenHeight]);
   (0, import_react.useEffect)(() => {

package/dist/lib/component/detail-side.css

@@ -18,9 +18,10 @@
   line-height: 1.5;
 }
 .detail-side .meta-kv .meta .meta-key {
+  font-weight: bold;
   width: 100px;
   text-align: right;
-  padding-right: 10px;
+  padding-right: 16px;
 }
 .detail-side .meta-kv .meta .meta-value {
   flex: 1 1;

package/dist/lib/component/detail-side.js

@@ -166,19 +166,19 @@ const DetailSide = () => {
   const metaKVElement = MetaKV({
     data: [
       {
-        key: "Status",
+        key: "status",
         content: (task == null ? void 0 : task.status) || ""
       },
       {
-        key: "Start",
+        key: "start",
         content: (0, import_utils.timeStr)((_a = task == null ? void 0 : task.timing) == null ? void 0 : _a.start)
       },
       {
-        key: "End",
+        key: "end",
         content: (0, import_utils.timeStr)((_b = task == null ? void 0 : task.timing) == null ? void 0 : _b.end)
       },
       {
-        key: "Time Cost",
+        key: "time cost",
         content: (0, import_misc.timeCostStrElement)((_c = task == null ? void 0 : task.timing) == null ? void 0 : _c.cost)
       }
     ]

package/dist/lib/component/global-hover-preview.js

@@ -30,11 +30,16 @@ const GlobalHoverPreview = () => {
   var _a;
   const wrapperRef = (0, import_react.useRef)(null);
   const hoverTask = (0, import_store.useExecutionDump)((store) => store.hoverTask);
+  const hoverTimestamp = (0, import_store.useExecutionDump)((store) => store.hoverTimestamp);
   const hoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.hoverPreviewConfig);
   const [imageW, setImageW] = (0, import_react.useState)(size);
   const [imageH, setImageH] = (0, import_react.useState)(size);
   const images = (_a = hoverTask == null ? void 0 : hoverTask.recorder) == null ? void 0 : _a.filter((item) => {
-    return item.screenshot;
+    let valid = Boolean(item.screenshot);
+    if (hoverTimestamp) {
+      valid = valid && item.ts >= hoverTimestamp;
+    }
+    return valid;
   }).map((item) => item.screenshot);
   const { x, y } = hoverPreviewConfig || {};
   let left = 0;

package/dist/lib/component/store.js

@@ -57,6 +57,7 @@ const useExecutionDump = (0, import_zustand.create)((set, get) => {
     dump: null,
     activeTask: null,
     hoverTask: null,
+    hoverTimestamp: null,
     hoverPreviewConfig: null
   };
   const syncToInsightDump = (dump) => {
@@ -89,8 +90,8 @@ const useExecutionDump = (0, import_zustand.create)((set, get) => {
         resetInsightDump();
       }
     },
-    setHoverTask(task) {
-      set({ hoverTask: task });
+    setHoverTask(task, timestamp) {
+      set({ hoverTask: task, hoverTimestamp: timestamp || null });
     },
     setHoverPreviewConfig(config) {
       if (config) {

package/dist/lib/component/timeline.js

@@ -425,7 +425,7 @@ const Timeline = () => {
     const refBounding = (_a = wrapper.current) == null ? void 0 : _a.getBoundingClientRect();
     const task = idTaskMap[item.id];
     if (task) {
-      setHoverTask(task);
+      setHoverTask(task, item.timeOffset + startingTime);
       setHoverPreviewConfig({
         x: mouseX + ((refBounding == null ? void 0 : refBounding.left) || 0),
         y: ((refBounding == null ? void 0 : refBounding.bottom) || 1) - 1

package/dist/lib/index.css

@@ -2,13 +2,9 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
-    Arial,
-    sans-serif;
-  font-size: 14px;
+}
+.rspress-nav {
+  transition: 0.2s;
 }
 :root {
   --modern-sidebar-width: 0 !important;
@@ -37,6 +33,15 @@ footer.mt-8 {
   flex-direction: column;
   height: 100%;
   color: #000;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  font-size: 14px;
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px solid #CCCCCC;
 }
 .ant-layout {
   flex-grow: 1;

package/dist/lib/index.js

@@ -63,6 +63,7 @@ var import_store = require("./component/store");
 var import_detail_side = __toESM(require("./component/detail-side"));
 var import_sidebar = __toESM(require("./component/sidebar"));
 const { Dragger } = import_antd.Upload;
+let globalRenderCount = 1;
 function Visualizer(props) {
   const { dump } = props;
   const executionDump = (0, import_store.useExecutionDump)((store) => store.dump);
@@ -183,6 +184,26 @@ function Visualizer(props) {
       }
     );
   }
+  const [containerHeight, setContainerHeight] = (0, import_react.useState)("100%");
+  (0, import_react.useEffect)(() => {
+    const ifInRspressPage = document.querySelector(".rspress-nav");
+    const navHeightKey = "--rp-nav-height";
+    const originalNavHeight = getComputedStyle(document.documentElement).getPropertyValue(navHeightKey);
+    if (ifInRspressPage) {
+      setContainerHeight("calc(100vh - 72px)");
+      document.documentElement.style.setProperty(navHeightKey, "42px");
+    }
+    return () => {
+      if (ifInRspressPage) {
+        document.documentElement.style.setProperty(navHeightKey, originalNavHeight);
+      }
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      globalRenderCount += 1;
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_antd.ConfigProvider,
     {
@@ -198,7 +219,7 @@ 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", children: mainContent }),
+        /* @__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/types/component/store.d.ts

@@ -11,7 +11,8 @@ export declare const useExecutionDump: import("zustand").UseBoundStore<import("z
     activeTask: ExecutionTask | null;
     setActiveTask: (task: ExecutionTask) => void;
     hoverTask: ExecutionTask | null;
-    setHoverTask: (task: ExecutionTask | null) => void;
+    hoverTimestamp: number | null;
+    setHoverTask: (task: ExecutionTask | null, timestamp?: number | null) => void;
     hoverPreviewConfig: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "types": "./dist/types/index.d.ts",
   "jsnext:source": "./src/index.ts",
   "main": "./dist/lib/index.js",
@@ -19,7 +19,7 @@
     "react-dom": "~18.2.0",
     "react-resizable-panels": "2.0.22",
     "zustand": "4.5.2",
-    "@midscene/core": "0.1.0"
+    "@midscene/core": "0.1.1"
   },
   "devDependencies": {
     "@modern-js/module-tools": "^2.54.2",