@midscene/visualizer 0.0.1

package/dist/es/component/sidebar.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./sidebar.css";
+import { useEffect } from "react";
+import {
+  ArrowRightOutlined,
+  CheckOutlined,
+  ClockCircleOutlined,
+  CloseOutlined,
+  LogoutOutlined,
+  MinusOutlined
+} from "@ant-design/icons";
+import { Button } from "antd";
+import PanelTitle from "./panel-title";
+import { timeCostStrElement } from "./misc";
+import logo from "../assets/logo-plain2.16842bbc.svg";
+import { useAllCurrentTasks, useExecutionDump } from "./store";
+import { typeStr } from "../utils";
+const SideItem = (props) => {
+  var _a, _b;
+  const { task, onClick, selected } = props;
+  const selectedClass = selected ? "selected" : "";
+  let statusIcon = /* @__PURE__ */ jsx(MinusOutlined, {});
+  if (task.status === "success") {
+    statusIcon = /* @__PURE__ */ jsx(CheckOutlined, {});
+  } else if (task.status === "fail") {
+    statusIcon = /* @__PURE__ */ jsx(CloseOutlined, {});
+  } else if (task.status === "pending") {
+    statusIcon = /* @__PURE__ */ jsx(ClockCircleOutlined, {});
+  } 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);
+  }
+  const contentRow = task.type === "Planning" ? /* @__PURE__ */ jsxs("div", { className: "side-item-content", children: [
+    (_b = task.param) == null ? void 0 : _b.userPrompt,
+    " "
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `side-item ${selectedClass}`,
+      onClick,
+      onMouseEnter: (event) => {
+        var _a2;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = rect.left + rect.width;
+        const y = rect.top;
+        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, task, x, y);
+      },
+      onMouseLeave: () => {
+        var _a2;
+        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, null);
+      },
+      children: [
+        " ",
+        /* @__PURE__ */ jsxs("div", { className: `side-item-name`, children: [
+          /* @__PURE__ */ jsx("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
+          /* @__PURE__ */ jsx("div", { className: "title", children: typeStr(task) }),
+          /* @__PURE__ */ jsx("div", { className: "status-text", children: statusText })
+        ] }),
+        contentRow
+      ]
+    }
+  );
+};
+const Sidebar = () => {
+  const groupedDumps = useExecutionDump((store) => store.dump);
+  const setActiveTask = useExecutionDump((store) => store.setActiveTask);
+  const activeTask = useExecutionDump((store) => store.activeTask);
+  const setHoverTask = useExecutionDump((store) => store.setHoverTask);
+  const setHoverPreviewConfig = useExecutionDump((store) => store.setHoverPreviewConfig);
+  const reset = useExecutionDump((store) => store.reset);
+  const allTasks = useAllCurrentTasks();
+  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex((task) => task === activeTask);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!(allTasks == null ? void 0 : allTasks.length) || (allTasks == null ? void 0 : allTasks.length) <= 1) {
+        return;
+      }
+      if (e.key === "ArrowUp" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const nextIndex = currentSelectedIndex - 1;
+        if (nextIndex < 0) {
+          return;
+        }
+        const nextTask = allTasks[nextIndex];
+        setActiveTask(nextTask);
+      } else if (e.key === "ArrowDown" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const nextIndex = currentSelectedIndex + 1;
+        if (nextIndex >= allTasks.length) {
+          return;
+        }
+        const nextTask = allTasks[nextIndex];
+        setActiveTask(nextTask);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [currentSelectedIndex, allTasks, setActiveTask]);
+  const sideList = (groupedDumps == null ? void 0 : groupedDumps.length) ? groupedDumps.map((group, groupIndex) => {
+    const executions = group.executions.map((execution, indexOfExecution) => {
+      const { tasks } = execution;
+      const taskList = tasks.map((task, index) => {
+        return /* @__PURE__ */ jsx(
+          SideItem,
+          {
+            task,
+            selected: task === activeTask,
+            onClick: () => {
+              setActiveTask(task);
+            },
+            onItemHover: (hoverTask, x, y) => {
+              if (hoverTask && x && y) {
+                setHoverPreviewConfig({ x, y });
+                setHoverTask(hoverTask);
+              } else {
+                setHoverPreviewConfig(null);
+                setHoverTask(null);
+              }
+            }
+          },
+          index
+        );
+      });
+      let seperator;
+      switch (indexOfExecution) {
+        case 0:
+          seperator = /* @__PURE__ */ jsx("div", { className: "side-seperator side-seperator-space-up" });
+          break;
+        default:
+          seperator = /* @__PURE__ */ jsx("div", { className: "side-seperator side-seperator-line side-seperator-space-up side-seperator-space-down" });
+          break;
+      }
+      return /* @__PURE__ */ jsxs("div", { children: [
+        seperator,
+        /* @__PURE__ */ jsx("div", { className: "side-sub-title", children: execution.name }),
+        taskList
+      ] }, indexOfExecution);
+    });
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(PanelTitle, { title: group.groupName }),
+      executions
+    ] }, groupIndex);
+  }) : /* @__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, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logo,
+          alt: "Logo",
+          style: { width: 70, height: 70, margin: "auto" },
+          onClick: () => {
+            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: "use Command + ⬆︎ / ⬇︎ to switch" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bottom-controls", children: /* @__PURE__ */ jsx(Button, { onClick: reset, type: "text", className: "unload_btn", children: "Unload" }) })
+  ] });
+};
+var sidebar_default = Sidebar;
+export {
+  sidebar_default as default
+};

package/dist/es/component/store.js

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { create } from "zustand";
+const useBlackboardPreference = create((set) => ({
+  bgVisible: false,
+  textsVisible: true,
+  setBgVisible: (visible) => {
+    set({ bgVisible: visible });
+  },
+  setTextsVisible: (visible) => {
+    set({ textsVisible: visible });
+  }
+}));
+const useExecutionDump = create((set) => {
+  const initData = {
+    dump: null,
+    activeTask: null,
+    hoverTask: null,
+    hoverPreviewConfig: null
+  };
+  const syncToInsightDump = (dump) => {
+    const { loadData } = useInsightDump.getState();
+    loadData(dump);
+  };
+  const resetInsightDump = () => {
+    const { reset } = useInsightDump.getState();
+    reset();
+  };
+  return __spreadProps(__spreadValues({}, initData), {
+    setGroupedDump: (dump) => {
+      console.log("will set ExecutionDump", dump);
+      set({
+        dump
+      });
+      for (const item of dump) {
+        if (item.executions.length > 0 && item.executions[0].tasks.length > 0) {
+          set({ activeTask: item.executions[0].tasks[0] });
+          break;
+        }
+      }
+    },
+    setActiveTask(task) {
+      var _a, _b;
+      set({ activeTask: task });
+      if ((_b = (_a = task.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.matchedElement) {
+        syncToInsightDump(task.log.dump);
+      } else {
+        resetInsightDump();
+      }
+    },
+    setHoverTask(task) {
+      set({ hoverTask: task });
+    },
+    setHoverPreviewConfig(config) {
+      if (config) {
+        set({
+          hoverPreviewConfig: {
+            x: Math.floor(config.x),
+            y: Math.floor(config.y)
+          }
+        });
+      } else {
+        set({ hoverPreviewConfig: null });
+      }
+    },
+    reset: () => {
+      set(initData);
+      resetInsightDump();
+    }
+  });
+});
+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 useInsightDump = create((set) => {
+  let loadId = 0;
+  const initData = { _loadId: 0, highlightSectionNames: [], highlightElements: [], data: null };
+  return __spreadProps(__spreadValues({}, initData), {
+    loadData: (data) => {
+      set({
+        _loadId: ++loadId,
+        data,
+        highlightSectionNames: [],
+        highlightElements: []
+      });
+    },
+    setHighlightSectionNames: (sections) => {
+      set({ highlightSectionNames: sections });
+    },
+    setHighlightElements: (elements) => {
+      set({ highlightElements: elements });
+    },
+    reset: () => {
+      set(initData);
+    }
+  });
+});
+export {
+  useAllCurrentTasks,
+  useBlackboardPreference,
+  useExecutionDump,
+  useInsightDump
+};

package/dist/es/component/timeline.css

@@ -0,0 +1,18 @@
+.timeline-wrapper {
+  flex-basis: 110px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid #CCCCCC;
+  position: relative;
+  box-sizing: border-box;
+}
+.timeline-wrapper .timeline-canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.timeline-wrapper canvas {
+  width: 100%;
+  height: 100%;
+}