@midscene/visualizer 0.2.2 → 0.2.3-beta-20240815082813.0

package/dist/es/index.js

@@ -22,27 +22,29 @@ import "./index.css";
 import DetailSide from "./component/detail-side";
 import Sidebar from "./component/sidebar";
 import { useExecutionDump } from "./component/store";
+import { DownOutlined } from "@ant-design/icons";
 import { Helmet } from "@modern-js/runtime/head";
-import { Button, ConfigProvider, Upload, message } from "antd";
+import { ConfigProvider, Dropdown, Select, Upload, message } from "antd";
 import { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import Logo from "./component/assets/logo-plain.js";
+import logo from "./assets/logo-plain.0f78df8a.png";
 import DetailPanel from "./component/detail-panel";
 import GlobalHoverPreview from "./component/global-hover-preview";
+import { iconForStatus, timeCostStrElement } from "./component/misc";
 import Timeline from "./component/timeline";
-import demoDump from "./demo-dump.json";
 const { Dragger } = Upload;
 let globalRenderCount = 1;
 function Visualizer(props) {
-  const { dump } = props;
+  const { dumps, hideLogo = false } = props;
   const executionDump = useExecutionDump((store) => store.dump);
   const setGroupedDump = useExecutionDump((store) => store.setGroupedDump);
   const reset = useExecutionDump((store) => store.reset);
   const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = useState(0);
   const mainLayoutChangedRef = useRef(false);
   useEffect(() => {
-    if (dump) {
-      setGroupedDump(dump);
+    if (dumps) {
+      setGroupedDump(dumps[0]);
     }
     return () => {
       reset();
@@ -77,7 +79,7 @@ function Visualizer(props) {
         if (typeof result === "string") {
           try {
             const data = JSON.parse(result);
-            setGroupedDump(data);
+            setGroupedDump(data[0]);
           } catch (e2) {
             console.error(e2);
             message.error("failed to parse dump data", e2.message);
@@ -89,30 +91,31 @@ function Visualizer(props) {
       return false;
     }
   };
-  const loadDemoDump = () => {
-    setGroupedDump(demoDump);
-  };
   let mainContent;
   if (!executionDump) {
-    mainContent = /* @__PURE__ */ jsxs("div", { className: "main-right uploader-wrapper", children: [
-      /* @__PURE__ */ jsxs(Dragger, __spreadProps(__spreadValues({ className: "uploader" }, uploadProps), { children: [
-        /* @__PURE__ */ jsx("p", { className: "ant-upload-drag-icon", children: /* @__PURE__ */ jsx(Logo, { style: { width: 100, height: 100, margin: "auto" } }) }),
-        /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
-          "Click or drag the",
-          " ",
-          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: ".web-dump.json" }) }),
-          " ",
-          "file into this area."
-        ] }),
-        /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
-          "The latest dump file is usually placed in",
-          " ",
-          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: "./midscene_run/report" }) })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "demo-loader", children: /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadDemoDump, children: "Load Demo" }) })
-    ] });
+    mainContent = /* @__PURE__ */ jsx("div", { className: "main-right uploader-wrapper", children: /* @__PURE__ */ jsxs(Dragger, __spreadProps(__spreadValues({ className: "uploader" }, uploadProps), { children: [
+      /* @__PURE__ */ jsx("p", { className: "ant-upload-drag-icon", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: "Midscene_logo",
+          style: { width: 80, margin: "auto" },
+          src: logo
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
+        "Click or drag the",
+        " ",
+        /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: ".web-dump.json" }) }),
+        " ",
+        "file into this area."
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
+        "The latest dump file is usually placed in",
+        " ",
+        /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: "./midscene_run/report" }) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
+    ] })) });
   } else {
     mainContent = /* @__PURE__ */ jsxs(
       PanelGroup,
@@ -125,7 +128,7 @@ function Visualizer(props) {
           }
         },
         children: [
-          /* @__PURE__ */ jsx(Panel, { maxSize: 95, defaultSize: 20, children: /* @__PURE__ */ jsx(Sidebar, { hideLogo: props == null ? void 0 : props.hideLogo, logoAction: props == null ? void 0 : props.logoAction }) }),
+          /* @__PURE__ */ jsx(Panel, { maxSize: 95, defaultSize: 20, children: /* @__PURE__ */ jsx(Sidebar, { logoAction: props == null ? void 0 : props.logoAction }) }),
           /* @__PURE__ */ jsx(
             PanelResizeHandle,
             {
@@ -182,6 +185,25 @@ function Visualizer(props) {
       globalRenderCount += 1;
     };
   }, []);
+  const selectOptions = dumps == null ? void 0 : dumps.map((dump, index) => ({
+    value: index,
+    label: `${dump.groupName} - ${dump.groupDescription}`,
+    groupName: dump.groupName,
+    groupDescription: dump.groupDescription
+  }));
+  const selectWidget = selectOptions && selectOptions.length > 1 ? /* @__PURE__ */ jsx(
+    Select,
+    {
+      options: selectOptions,
+      defaultValue: 0,
+      onChange: (value) => {
+        const dump = dumps[value];
+        setGroupedDump(dump);
+      },
+      defaultOpen: true,
+      style: { width: "100%" }
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs(
     ConfigProvider,
     {
@@ -196,13 +218,34 @@ function Visualizer(props) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "Midscene.js - Visualization Tool" }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "Visualization - Midscene.js" }) }),
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: "page-container",
             style: { height: containerHeight },
-            children: mainContent
+            children: [
+              hideLogo ? null : /* @__PURE__ */ jsxs("div", { className: "page-nav", children: [
+                /* @__PURE__ */ jsx("div", { className: "logo", children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "Midscene_logo",
+                    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/logo-light-with-text.png"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  PlaywrightCaseSelector,
+                  {
+                    dumps: props.dumps,
+                    selected: executionDump,
+                    onSelect: (dump) => {
+                      setGroupedDump(dump);
+                    }
+                  }
+                )
+              ] }),
+              mainContent
+            ]
           },
           `render-${globalRenderCount}`
         ),
@@ -211,7 +254,90 @@ function Visualizer(props) {
     }
   );
 }
-var src_default = Visualizer;
+function PlaywrightCaseSelector(props) {
+  if (!props.dumps || props.dumps.length <= 1)
+    return null;
+  const nameForDump = (dump) => `${dump.groupName} - ${dump.groupDescription}`;
+  const items = (props.dumps || []).map((dump, index) => {
+    var _a, _b;
+    const status = iconForStatus((_a = dump.attributes) == null ? void 0 : _a.playwright_test_status);
+    const costStr = (_b = dump.attributes) == null ? void 0 : _b.playwright_test_duration;
+    const cost = costStr ? /* @__PURE__ */ jsxs("span", { className: "cost-str", children: [
+      " ",
+      "(",
+      timeCostStrElement(Number.parseInt(costStr, 10)),
+      ")"
+    ] }, index) : null;
+    return {
+      key: index,
+      label: /* @__PURE__ */ jsx(
+        "a",
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            if (props.onSelect) {
+              props.onSelect(dump);
+            }
+          },
+          children: /* @__PURE__ */ jsxs("div", { children: [
+            status,
+            "  ",
+            nameForDump(dump),
+            cost
+          ] })
+        }
+      )
+    };
+  });
+  const btnName = props.selected ? nameForDump(props.selected) : "Select a case";
+  return /* @__PURE__ */ jsx("div", { className: "playwright-case-selector", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsxs("a", { onClick: (e) => e.preventDefault(), children: [
+    btnName,
+    " ",
+    /* @__PURE__ */ jsx(DownOutlined, {})
+  ] }) }) });
+}
+function mount(id) {
+  const element = document.getElementById(id);
+  if (!element) {
+    throw new Error(`failed to get element for id: ${id}`);
+  }
+  const root = ReactDOM.createRoot(element);
+  const dumpElements = document.querySelectorAll(
+    'script[type="midscene_web_dump"]'
+  );
+  const reportDump = [];
+  Array.from(dumpElements).filter((el) => {
+    const textContent = el.textContent;
+    if (!textContent) {
+      console.warn("empty content in script tag", el);
+    }
+    return !!textContent;
+  }).forEach((el) => {
+    const attributes = {};
+    Array.from(el.attributes).forEach((attr) => {
+      const { name, value } = attr;
+      const valueDecoded = decodeURIComponent(value);
+      if (name.startsWith("playwright_")) {
+        attributes[attr.name] = valueDecoded;
+      }
+    });
+    const content = el.textContent;
+    let jsonContent;
+    try {
+      jsonContent = JSON.parse(content);
+      jsonContent.attributes = attributes;
+      reportDump.push(jsonContent);
+    } catch (e) {
+      console.error(el);
+      console.error("failed to parse json content", e);
+    }
+  });
+  root.render(/* @__PURE__ */ jsx(Visualizer, { dumps: reportDump }));
+}
+var src_default = {
+  mount,
+  Visualizer
+};
 export {
   Visualizer,
   src_default as default

package/dist/es/utils.js

@@ -24,7 +24,7 @@ function insightDumpToExecutionDump(insightDump) {
     const task = {
       type: "Insight",
       subType: insightDump2.type === "locate" ? "Locate" : "Query",
-      status: insightDump2.error ? "fail" : "success",
+      status: insightDump2.error ? "failed" : "success",
       param: __spreadProps(__spreadValues(__spreadValues({}, insightDump2.userQuery.element ? { query: insightDump2.userQuery } : {}), insightDump2.userQuery.dataDemand ? { dataDemand: insightDump2.userQuery.dataDemand } : {}), {
         insight: {}
       }),

package/dist/index.css

@@ -0,0 +1,445 @@
+/* src/index.less */
+html,
+body {
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+}
+.rspress-nav {
+  transition: 0.2s;
+}
+:root {
+  --modern-sidebar-width: 0 !important;
+  --modern-aside-width: 0 !important;
+  --modern-preview-padding: 0 !important;
+}
+.modern-doc-layout,
+.modern-doc {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 100vh;
+}
+.modern-sidebar,
+header.w-full {
+  display: none !important;
+}
+.modern-doc-container {
+  padding: 0 !important;
+}
+footer.mt-8 {
+  display: none;
+}
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: #3b3b3b;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans",
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
+  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;
+  height: 100%;
+}
+.main-right {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.main-right .main-content {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  overflow: hidden;
+  background: #FFF;
+}
+.main-right.uploader-wrapper {
+  box-sizing: border-box;
+  margin: auto;
+  max-width: 800px;
+  flex-direction: column;
+  justify-content: center;
+}
+.main-right.uploader-wrapper .uploader {
+  width: 100%;
+}
+.main-right.uploader-wrapper .demo-loader {
+  width: 100%;
+  text-align: center;
+  margin-top: 10px;
+}
+.main-right .main-canvas-container {
+  flex-grow: 1;
+  height: 100%;
+  background: #ffffff;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-left: 1px solid #E5E5E5;
+}
+.main-right .main-side {
+  box-sizing: border-box;
+  overflow-y: scroll;
+  height: 100%;
+}
+.main-right .json-content {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* src/component/detail-side.less */
+.detail-side h2 {
+  padding-top: 0;
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.detail-side .ant-tag {
+  margin-top: 2px;
+}
+.detail-side .meta-kv {
+  padding: 10px 10px calc(10px + 4px);
+}
+.detail-side .meta-kv .meta {
+  box-sizing: border-box;
+  padding: 2px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  line-height: 1.5;
+}
+.detail-side .meta-kv .meta .meta-key {
+  width: 100px;
+  text-align: right;
+  padding-right: 16px;
+}
+.detail-side .meta-kv .meta .meta-value {
+  flex: 1 1;
+}
+.detail-side .item-list {
+  padding: 10px 10px;
+  cursor: default;
+  margin-bottom: 10px;
+}
+.detail-side .item-list .item {
+  padding: 16px 10px 10px;
+  transition: 0.1s;
+  border: 1px solid #DDD;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.detail-side .item-list .item.item-lite {
+  border: none;
+  padding: 0;
+}
+.detail-side .item-list .item-highlight {
+  color: #FFF;
+}
+.detail-side .item-list .item-highlight .subtitle {
+  color: #CCC;
+}
+.detail-side .item-list .item-extra {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: #777;
+}
+.detail-side .item-list .title-right-padding {
+  padding-right: 15px;
+}
+.detail-side .item-list .title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.detail-side .item-list .title .title-tag {
+  display: inline-block;
+  margin-left: 6px;
+  color: #777;
+  font-size: 14px;
+  line-height: 18px;
+}
+.detail-side .item-list .subtitle {
+  font-weight: normal;
+  font-size: 14px;
+  color: #777;
+}
+.detail-side .item-list .description {
+  margin-top: 5px;
+}
+.detail-side .item-list .description-content {
+  font-size: 14px;
+  margin-top: 10px;
+  white-space: break-spaces;
+  word-wrap: break-word;
+  margin: 0;
+}
+.detail-side .item-list .element-button:hover {
+  color: #fff;
+  background: #F9483E;
+}
+.detail-side .item-list .section-button:hover {
+  color: #fff;
+  background: #01204E;
+}
+.detail-side pre {
+  text-wrap: balance;
+}
+.detail-side .item-list-space-up {
+  margin-top: 10px;
+}
+
+/* src/component/panel-title.less */
+.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;
+}
+
+/* src/component/sidebar.less */
+.side-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid #E5E5E5;
+  overflow: auto;
+  background: #F8F8F8;
+  box-sizing: border-box;
+}
+.side-bar .task-meta-section {
+  margin-top: 6px;
+}
+.side-bar .task-meta {
+  color: #777;
+  font-weight: normal;
+  padding-left: 10px;
+}
+.side-bar .side-seperator {
+  border-top: 1px solid none;
+}
+.side-bar .side-seperator.side-seperator-line {
+  border-top: 1px solid #E5E5E5;
+}
+.side-bar .side-seperator.side-seperator-space-up {
+  margin-top: 10px;
+}
+.side-bar .side-seperator.side-seperator-space-down {
+  margin-bottom: 10px;
+}
+.side-bar .side-sub-title {
+  padding: 0 10px;
+  margin-bottom: 6px;
+}
+.side-bar .name-status {
+  font-size: 12px;
+  display: inline-block;
+  margin-right: 6px;
+}
+.side-bar .side-item {
+  cursor: pointer;
+  transition: 0.1s;
+  padding: 2px 0;
+}
+.side-bar .side-item:hover {
+  background: #dcdcdc80;
+}
+.side-bar .side-item.selected {
+  background: #bfc4da80;
+}
+.side-bar .side-item .side-item-content {
+  padding: 0 10px 0 calc(10px + 18px);
+}
+.side-bar .side-item-name {
+  padding: 0 10px 0 calc(10px + 18px);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+.side-bar .side-item-name .status-icon {
+  position: absolute;
+  left: 10px;
+  display: inline-block;
+  color: #AAA;
+  font-size: 12px;
+  line-height: 10px;
+  top: 50%;
+  margin-top: -5px;
+}
+.side-bar .side-item-name .status-text {
+  color: #777;
+}
+.side-bar .bottom-controls {
+  padding: 10px 10px;
+  text-align: left;
+  text-align: center;
+}
+
+/* src/component/detail-panel.less */
+.detail-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+  background: #FFF;
+}
+.detail-panel .ant-segmented {
+  padding: 0;
+}
+.detail-panel .view-switcher {
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.detail-panel .detail-content {
+  box-sizing: border-box;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  flex-grow: 1;
+}
+.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;
+}
+.detail-panel .screenshot-item .screenshot-item-title {
+  margin-bottom: 5px;
+}
+.detail-panel .screenshot-item img {
+  border: 1px solid #888;
+  max-width: 100%;
+}
+
+/* src/component/blackboard.less */
+.blackboard .footer {
+  color: #aaa;
+}
+.blackboard ul {
+  padding-left: 0px;
+}
+.blackboard li {
+  list-style: none;
+}
+.blackboard .bottom-tip {
+  height: 30px;
+}
+.blackboard .bottom-tip-item {
+  max-width: 500px;
+  color: #AAA;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.blackboard-filter {
+  margin: 10px 0;
+}
+.blackboard-main-content canvas {
+  width: 100%;
+  border: 1px solid #888;
+}
+
+/* src/component/global-hover-preview.less */
+.global-hover-preview {
+  position: fixed;
+  display: block;
+  max-width: 400px;
+  max-height: 400px;
+  overflow: hidden;
+  z-index: 10;
+  text-align: center;
+  border: 1px solid #E5E5E5;
+  box-sizing: border-box;
+  background: #F8F8F8;
+  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
+}
+.global-hover-preview img {
+  max-width: 400px;
+  max-height: 400px;
+  width: auto;
+  height: auto;
+}
+
+/* src/component/timeline.less */
+.timeline-wrapper {
+  flex-basis: 110px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid #E5E5E5;
+  position: relative;
+  box-sizing: border-box;
+}
+.timeline-wrapper .timeline-canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.timeline-wrapper canvas {
+  width: 100%;
+  height: 100%;
+}