@midscene/visualizer 0.2.2 → 0.2.3-beta-20240815082813.0

package/dist/es/component/blackboard.js

@@ -33,9 +33,6 @@ const noop = () => {
 };
 const BlackBoard = () => {
   const dump = useInsightDump((store) => store.data);
-  const setHighlightSectionNames = useInsightDump(
-    (store) => store.setHighlightSectionNames
-  );
   const setHighlightElements = useInsightDump(
     (store) => store.setHighlightElements
   );
@@ -43,17 +40,18 @@ const BlackBoard = () => {
     (store) => store.highlightSectionNames
   );
   const highlightElements = useInsightDump((store) => store.highlightElements);
-  const { context, matchedSection: sections, matchedElement: elements } = dump;
+  const highlightIds = highlightElements.map((e) => e.id);
+  const { context } = dump;
   const { size, screenshotBase64 } = context;
   const screenWidth = size.width;
   const screenHeight = size.height;
   const domRef = useRef(null);
   const app = useMemo(() => new PIXI.Application(), []);
   const [appInitialed, setAppInitialed] = useState(false);
-  const itemMarkContainer = useMemo(() => new PIXI.Container(), []);
-  const textContainer = useMemo(() => new PIXI.Container(), []);
+  const highlightContainer = useMemo(() => new PIXI.Container(), []);
+  const elementMarkContainer = useMemo(() => new PIXI.Container(), []);
   const pixiBgRef = useRef();
-  const { bgVisible, setBgVisible, textsVisible, setTextsVisible } = useBlackboardPreference();
+  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = useBlackboardPreference();
   useEffect(() => {
     Promise.resolve(
       (() => __async(void 0, null, function* () {
@@ -75,8 +73,8 @@ const BlackBoard = () => {
           canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
           canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
         }
-        app.stage.addChild(itemMarkContainer);
-        app.stage.addChild(textContainer);
+        app.stage.addChild(highlightContainer);
+        app.stage.addChild(elementMarkContainer);
         setAppInitialed(true);
       }))()
     );
@@ -126,52 +124,25 @@ const BlackBoard = () => {
     texts.y = Math.max(top - (nameFontSize + 4), 0);
     return [graphics, texts];
   };
-  const { highlightSectionRects, highlightElementRects } = useMemo(() => {
-    const highlightSectionRects2 = [];
+  const { highlightElementRects } = useMemo(() => {
     const highlightElementRects2 = [];
-    itemMarkContainer.removeChildren();
-    textContainer.removeChildren();
-    sections.forEach((section) => {
-      const ifHighlight = highlightSectionNames.includes(section.name);
+    highlightContainer.removeChildren();
+    elementMarkContainer.removeChildren();
+    context.content.forEach((element) => {
+      const { rect, content, id } = element;
+      const ifHighlight = highlightIds.includes(id);
       if (ifHighlight) {
-        highlightSectionRects2.push(section.rect);
-      }
-      const [graphics, texts] = rectMarkForItem(
-        section.rect,
-        section.name,
-        ifHighlight ? highlightColorForType("section") : colorForName("section", section.name),
-        ifHighlight ? 1 : itemFillAlpha,
-        () => {
-          setHighlightSectionNames([section.name]);
-        },
-        () => {
-          setHighlightSectionNames([]);
-        }
-      );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    highlightElements.forEach((element) => {
-      const { rect } = element;
-      highlightElementRects2.push(rect);
-      if (elements.includes(element)) {
-        return;
+        const [graphics2] = rectMarkForItem(
+          rect,
+          content,
+          ifHighlight ? highlightColorForType("element") : colorForName("element", content),
+          ifHighlight ? 1 : itemFillAlpha,
+          noop,
+          noop
+        );
+        highlightContainer.addChild(graphics2);
       }
-      const [graphics, texts] = rectMarkForItem(
-        rect,
-        "",
-        highlightColorForType("element"),
-        1,
-        noop,
-        noop
-      );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    elements.forEach((element) => {
-      const { rect, content } = element;
-      const ifHighlight = highlightElements.includes(element);
-      const [graphics, texts] = rectMarkForItem(
+      const [graphics] = rectMarkForItem(
         rect,
         content,
         ifHighlight ? highlightColorForType("element") : colorForName("element", content),
@@ -183,47 +154,19 @@ const BlackBoard = () => {
           setHighlightElements([]);
         }
       );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    sections.forEach((section) => {
-      const { content } = section;
-      const ifHighlight = highlightSectionNames.includes(section.name);
-      const sectionTheme = ifHighlight ? "#FFFFFF" : colorForName("section", section.name);
-      content.forEach((text) => {
-        const { content: content2, rect } = text;
-        const { left, top } = rect;
-        const style = new PIXI.TextStyle({
-          wordWrap: true,
-          wordWrapWidth: rect.width,
-          fontSize: 18,
-          fill: sectionTheme
-        });
-        const textElement = new PIXI.Text(content2, style);
-        textElement.x = left;
-        textElement.y = top;
-        textContainer.addChild(textElement);
-        const textBorder = new PIXI.Graphics();
-        textBorder.beginFill(11184810, 0.2);
-        textBorder.lineStyle(1, 0, 1);
-        textBorder.drawRect(left, top, rect.width, rect.height);
-        textBorder.endFill();
-        textContainer.addChild(textBorder);
-      });
+      elementMarkContainer.addChild(graphics);
     });
-    textContainer.visible = textsVisible;
+    elementMarkContainer.visible = elementsVisible;
     return {
-      highlightSectionRects: highlightSectionRects2,
       highlightElementRects: highlightElementRects2
     };
   }, [
     app,
     appInitialed,
-    sections,
-    highlightSectionNames,
-    highlightElements
+    highlightElements,
+    context.content
     // bgVisible,
-    // textsVisible,
+    // elementsVisible,
   ]);
   const onSetBg = (e) => {
     setBgVisible(e.target.checked);
@@ -231,9 +174,9 @@ const BlackBoard = () => {
       pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
     }
   };
-  const onSetTextsVisible = (e) => {
+  const onSetElementsVisible = (e) => {
     setTextsVisible(e.target.checked);
-    textContainer.visible = e.target.checked;
+    elementMarkContainer.visible = e.target.checked;
   };
   let bottomTipA = null;
   if (highlightElementRects.length === 1) {
@@ -247,18 +190,6 @@ const BlackBoard = () => {
       JSON.stringify(highlightElementRects)
     ] }) });
   }
-  let bottomTipB = null;
-  if (highlightSectionRects.length === 1) {
-    bottomTipB = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
-      "Section: ",
-      JSON.stringify(highlightSectionRects[0])
-    ] }) });
-  } else if (highlightSectionRects.length > 1) {
-    bottomTipB = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
-      "Sections: ",
-      JSON.stringify(highlightSectionRects)
-    ] }) });
-  }
   return /* @__PURE__ */ jsxs("div", { className: "blackboard", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -270,12 +201,9 @@ const BlackBoard = () => {
     ),
     /* @__PURE__ */ jsx("div", { className: "blackboard-filter", children: /* @__PURE__ */ jsxs("div", { className: "overlay-control", children: [
       /* @__PURE__ */ jsx(Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
-      /* @__PURE__ */ jsx(Checkbox, { checked: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })
+      /* @__PURE__ */ jsx(Checkbox, { checked: elementsVisible, onChange: onSetElementsVisible, children: "Elements" })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "bottom-tip", children: [
-      bottomTipA,
-      bottomTipB
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: bottomTipA })
   ] });
 };
 var blackboard_default = BlackBoard;

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

@@ -22,6 +22,12 @@
 .detail-panel .blackboard {
   margin: 0 auto;
 }
+.detail-panel .screenshot-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
 .detail-panel .screenshot-item {
   margin-bottom: 10px;
 }

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

@@ -41,7 +41,7 @@ const DetailPanel = () => {
     }
   } else if (viewType === VIEW_TYPE_SCREENSHOT) {
     if ((_a = activeTask.recorder) == null ? void 0 : _a.length) {
-      content = /* @__PURE__ */ jsx("div", { children: activeTask.recorder.filter((item) => item.screenshot).map((item, index) => {
+      content = /* @__PURE__ */ jsx("div", { className: "screenshot-item-wrapper", children: activeTask.recorder.filter((item) => item.screenshot).map((item, index) => {
         const fullTime = timeStr(item.ts);
         const str = item.timing ? `${fullTime} / ${item.timing}` : fullTime;
         return /* @__PURE__ */ jsx(ScreenshotItem, { time: str, img: item.screenshot }, index);

package/dist/es/component/misc.js

@@ -1,4 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import {
+  ArrowRightOutlined,
+  CheckCircleFilled,
+  ClockCircleFilled,
+  CloseCircleFilled,
+  LogoutOutlined,
+  MinusOutlined
+} from "@ant-design/icons";
 function timeCostStrElement(timeCost) {
   let str;
   if (typeof timeCost !== "number") {
@@ -19,6 +27,27 @@ function timeCostStrElement(timeCost) {
     }
   );
 }
+const iconForStatus = (status) => {
+  switch (status) {
+    case "success":
+    case "passed":
+      return /* @__PURE__ */ jsx("span", { style: { color: "#2B8243" }, children: /* @__PURE__ */ jsx(CheckCircleFilled, {}) });
+    case "failed":
+    case "timedOut":
+    case "interrupted":
+      return /* @__PURE__ */ jsx("span", { style: { color: "#FF0A0A" }, children: /* @__PURE__ */ jsx(CloseCircleFilled, {}) });
+    case "pending":
+      return /* @__PURE__ */ jsx(ClockCircleFilled, {});
+    case "cancelled":
+    case "skipped":
+      return /* @__PURE__ */ jsx(LogoutOutlined, {});
+    case "running":
+      return /* @__PURE__ */ jsx(ArrowRightOutlined, {});
+    default:
+      return /* @__PURE__ */ jsx(MinusOutlined, {});
+  }
+};
 export {
+  iconForStatus,
   timeCostStrElement
 };

package/dist/es/component/panel-title.css

@@ -1,8 +1,10 @@
-.task-list-name {
-  padding: 2px 10px;
-  font-weight: bold;
+.panel-title {
   background: #F8F8F8;
   border-top: 1px solid #E5E5E5;
   border-bottom: 1px solid #E5E5E5;
   margin-top: -1px;
+  padding: 2px 10px;
+}
+.panel-title .task-list-name {
+  font-weight: bold;
 }

package/dist/es/component/panel-title.js

@@ -1,7 +1,11 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "./panel-title.css";
 const PanelTitle = (props) => {
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "task-list-name", children: props.title }) });
+  const subTitleEl = props.subTitle ? /* @__PURE__ */ jsx("div", { className: "task-list-sub-name", children: props.subTitle }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "panel-title", children: [
+    /* @__PURE__ */ jsx("div", { className: "task-list-name", children: props.title }),
+    subTitleEl
+  ] });
 };
 var panel_title_default = PanelTitle;
 export {

package/dist/es/component/sidebar.css

@@ -7,11 +7,7 @@
   border-right: 1px solid #E5E5E5;
   overflow: auto;
   background: #F8F8F8;
-}
-.side-bar .brand {
-  padding: 10px 5px;
-  cursor: pointer;
-  display: flex;
+  box-sizing: border-box;
 }
 .side-bar .task-meta-section {
   margin-top: 6px;
@@ -72,12 +68,6 @@
   top: 50%;
   margin-top: -5px;
 }
-.side-bar .side-item-name .status-icon-success {
-  color: #2B8243;
-}
-.side-bar .side-item-name .status-icon-fail {
-  color: #ff0a0a;
-}
 .side-bar .side-item-name .status-text {
   color: #777;
 }

package/dist/es/component/sidebar.js

@@ -2,36 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "./sidebar.css";
 import { useAllCurrentTasks, useExecutionDump } from "./store";
 import { typeStr } from "../utils";
-import {
-  ArrowRightOutlined,
-  CheckCircleFilled,
-  ClockCircleFilled,
-  CloseCircleFilled,
-  LogoutOutlined,
-  MessageOutlined,
-  MinusOutlined
-} from "@ant-design/icons";
+import { MessageOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { useEffect } from "react";
-import Logo from "./assets/logo-plain2.js";
-import { timeCostStrElement } from "./misc";
+import { iconForStatus, timeCostStrElement } from "./misc";
 import PanelTitle from "./panel-title";
 const SideItem = (props) => {
   var _a;
   const { task, onClick, selected } = props;
   const selectedClass = selected ? "selected" : "";
-  let statusIcon = /* @__PURE__ */ jsx(MinusOutlined, {});
-  if (task.status === "success") {
-    statusIcon = /* @__PURE__ */ jsx(CheckCircleFilled, {});
-  } else if (task.status === "fail") {
-    statusIcon = /* @__PURE__ */ jsx(CloseCircleFilled, {});
-  } else if (task.status === "pending") {
-    statusIcon = /* @__PURE__ */ jsx(ClockCircleFilled, {});
-  } else if (task.status === "cancelled") {
-    statusIcon = /* @__PURE__ */ jsx(LogoutOutlined, {});
-  } else if (task.status === "running") {
-    statusIcon = /* @__PURE__ */ jsx(ArrowRightOutlined, {});
-  }
   let statusText = task.status;
   if ((_a = task.timing) == null ? void 0 : _a.cost) {
     statusText = timeCostStrElement(task.timing.cost);
@@ -55,7 +34,7 @@ const SideItem = (props) => {
       children: [
         " ",
         /* @__PURE__ */ jsxs("div", { className: "side-item-name", children: [
-          /* @__PURE__ */ jsx("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
+          /* @__PURE__ */ jsx("span", { className: "status-icon", children: iconForStatus(task.status) }),
           /* @__PURE__ */ jsx("div", { className: "title", children: typeStr(task) }),
           /* @__PURE__ */ jsx("div", { className: "status-text", children: statusText })
         ] })
@@ -64,7 +43,7 @@ const SideItem = (props) => {
   );
 };
 const Sidebar = (props) => {
-  const groupedDumps = useExecutionDump((store) => store.dump);
+  const groupedDump = useExecutionDump((store) => store.dump);
   const setActiveTask = useExecutionDump((store) => store.setActiveTask);
   const activeTask = useExecutionDump((store) => store.activeTask);
   const setHoverTask = useExecutionDump((store) => store.setHoverTask);
@@ -104,7 +83,7 @@ const Sidebar = (props) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [currentSelectedIndex, allTasks, setActiveTask]);
-  const sideList = (groupedDumps == null ? void 0 : groupedDumps.length) ? groupedDumps.map((group, groupIndex) => {
+  const sideList = groupedDump ? [groupedDump].map((group, groupIndex) => {
     const executions = group.executions.map((execution, indexOfExecution) => {
       const { tasks } = execution;
       const taskList = tasks.map((task, index) => {
@@ -154,27 +133,6 @@ const Sidebar = (props) => {
   }) : /* @__PURE__ */ jsx("span", { children: "no tasks" });
   return /* @__PURE__ */ jsxs("div", { className: "side-bar", children: [
     /* @__PURE__ */ jsxs("div", { className: "top-controls", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "brand",
-          onClick: reset,
-          style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" },
-          children: /* @__PURE__ */ jsx(
-            Logo,
-            {
-              style: { width: 70, height: 70, margin: "auto" },
-              onClick: () => {
-                if (props.logoAction) {
-                  props.logoAction();
-                } else {
-                  location.reload();
-                }
-              }
-            }
-          )
-        }
-      ),
       /* @__PURE__ */ jsx("div", { className: "task-list", children: sideList }),
       /* @__PURE__ */ jsx("div", { className: "side-seperator side-seperator-line side-seperator-space-up" }),
       /* @__PURE__ */ jsx("div", { className: "task-meta-section", children: /* @__PURE__ */ jsx("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })

package/dist/es/component/store.js

@@ -17,15 +17,16 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { create } from "zustand";
+import * as Z from "zustand";
+const { create } = Z;
 const useBlackboardPreference = create((set) => ({
-  bgVisible: false,
-  textsVisible: true,
+  bgVisible: true,
+  elementsVisible: false,
   setBgVisible: (visible) => {
     set({ bgVisible: visible });
   },
   setTextsVisible: (visible) => {
-    set({ textsVisible: visible });
+    set({ elementsVisible: visible });
   }
 }));
 const useExecutionDump = create((set, get) => {
@@ -47,14 +48,12 @@ const useExecutionDump = create((set, get) => {
   return __spreadProps(__spreadValues({}, initData), {
     setGroupedDump: (dump) => {
       console.log("will set ExecutionDump", dump);
-      set({
+      set(__spreadProps(__spreadValues({}, initData), {
         dump
-      });
-      for (const item of dump) {
-        if (item.executions.length > 0 && item.executions[0].tasks.length > 0) {
-          get().setActiveTask(item.executions[0].tasks[0]);
-          break;
-        }
+      }));
+      resetInsightDump();
+      if (dump.executions.length > 0 && dump.executions[0].tasks.length > 0) {
+        get().setActiveTask(dump.executions[0].tasks[0]);
       }
     },
     setActiveTask(task) {
@@ -89,15 +88,14 @@ const useExecutionDump = create((set, get) => {
   });
 });
 const useAllCurrentTasks = () => {
-  const groupedDumps = useExecutionDump((store) => store.dump);
-  const allTasks = (groupedDumps == null ? void 0 : groupedDumps.reduce((acc, group) => {
-    const tasksInside = group.executions.reduce(
-      (acc2, execution) => acc2.concat(execution.tasks),
-      []
-    );
-    return acc.concat(tasksInside);
-  }, [])) || [];
-  return allTasks;
+  const groupedDump = useExecutionDump((store) => store.dump);
+  if (!groupedDump)
+    return [];
+  const tasksInside = groupedDump.executions.reduce(
+    (acc2, execution) => acc2.concat(execution.tasks),
+    []
+  );
+  return tasksInside;
 };
 const useInsightDump = create((set) => {
   let loadId = 0;

package/dist/es/index.css

@@ -2,6 +2,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  line-height: 1;
 }
 .rspress-nav {
   transition: 0.2s;
@@ -46,6 +47,46 @@ footer.mt-8 {
   font-size: 14px;
   border-top: 1px solid #E5E5E5;
   border-bottom: 1px solid #E5E5E5;
+  font-synthesis: style;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+.page-container blockquote,
+.page-container dl,
+.page-container dd,
+.page-container h1,
+.page-container h2,
+.page-container h3,
+.page-container h4,
+.page-container h5,
+.page-container h6,
+.page-container hr,
+.page-container figure,
+.page-container p,
+.page-container pre {
+  margin: 0;
+}
+.page-nav {
+  height: 30px;
+  padding: 10px;
+  border-bottom: 1px solid #E5E5E5;
+  display: flex;
+  flex-direction: row;
+}
+.page-nav .logo img {
+  height: 20px;
+  line-height: 30px;
+  vertical-align: baseline;
+  vertical-align: -webkit-baseline-middle;
+}
+.page-nav .playwright-case-selector {
+  margin-left: 20px;
+  line-height: 30px;
+  width: 320px;
+}
+.cost-str {
+  color: #777;
 }
 .ant-layout {
   flex-grow: 1;
@@ -91,6 +132,7 @@ footer.mt-8 {
 .main-right .main-side {
   box-sizing: border-box;
   overflow-y: scroll;
+  height: 100%;
 }
 .main-right .json-content {
   word-wrap: break-word;