@midscene/visualizer 0.0.1

package/dist/es/component/timeline.js

@@ -0,0 +1,438 @@
+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));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import * as PIXI from "pixi.js";
+import "./timeline.css";
+import { useAllCurrentTasks, useExecutionDump } from "./store";
+function cloneSprite(sprite) {
+  const clonedSprite = new PIXI.Sprite(sprite.texture);
+  clonedSprite.position.copyFrom(sprite.position);
+  clonedSprite.scale.copyFrom(sprite.scale);
+  clonedSprite.rotation = sprite.rotation;
+  clonedSprite.alpha = sprite.alpha;
+  clonedSprite.visible = sprite.visible;
+  return clonedSprite;
+}
+const TimelineWidget = (props) => {
+  var _a, _b, _c, _d;
+  const domRef = useRef(null);
+  const app = useMemo(() => new PIXI.Application(), []);
+  const gridsContainer = useMemo(() => new PIXI.Container(), []);
+  const screenshotsContainer = useMemo(() => new PIXI.Container(), []);
+  const highlightMaskContainer = useMemo(() => new PIXI.Container(), []);
+  const containerUpdaterRef = useRef(
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    (_s, _e, _hs, _he) => {
+    }
+  );
+  const indicatorContainer = useMemo(() => new PIXI.Container(), []);
+  const allScreenshots = props.screenshots || [];
+  const maxTime = allScreenshots[allScreenshots.length - 1].timeOffset;
+  const sizeRatio = 2;
+  const titleBg = 14540253;
+  const sideBg = 15527148;
+  const gridTextColor = 0;
+  const shotBorderColor = 7829367;
+  const gridLineColor = 13421772;
+  const gridHighlightColor = 438699;
+  const timeContentFontSize = 20;
+  const commonPadding = 12;
+  const timeTextTop = commonPadding;
+  const timeTitleBottom = timeTextTop * 2 + timeContentFontSize;
+  const highlightMaskAlpha = 0.6;
+  const hoverMaskAlpha = 0.3;
+  const closestScreenshotItemOnXY = (x, _y) => {
+    let closestScreenshot;
+    let closestIndex = -1;
+    for (let i = 0; i < allScreenshots.length; i++) {
+      const shot = allScreenshots[i];
+      if (shot.x <= x) {
+        closestScreenshot = allScreenshots[i];
+        closestIndex = i;
+      } else {
+        break;
+      }
+    }
+    return {
+      closestScreenshot,
+      closestIndex
+    };
+  };
+  useMemo(() => {
+    const { startMs, endMs } = props.highlightMask || {};
+    const { startMs: hoverStartMs, endMs: hoverEndMs } = props.hoverMask || {};
+    const fn = containerUpdaterRef.current;
+    fn(startMs, endMs, hoverStartMs, hoverEndMs);
+  }, [
+    (_a = props.highlightMask) == null ? void 0 : _a.startMs,
+    (_b = props.highlightMask) == null ? void 0 : _b.endMs,
+    (_c = props.hoverMask) == null ? void 0 : _c.startMs,
+    (_d = props.hoverMask) == null ? void 0 : _d.endMs
+  ]);
+  useEffect(() => {
+    Promise.resolve(
+      (() => __async(void 0, null, function* () {
+        var _a2, _b2;
+        if (!domRef.current) {
+          return;
+        }
+        const { clientWidth, clientHeight } = domRef.current;
+        const canvasWidth = clientWidth * sizeRatio;
+        const canvasHeight = clientHeight * sizeRatio;
+        let singleGridWidth = 100 * sizeRatio;
+        let gridCount = Math.floor(canvasWidth / singleGridWidth);
+        const stepCandidate = [
+          50,
+          100,
+          200,
+          300,
+          500,
+          1e3,
+          2e3,
+          3e3,
+          5e3,
+          6e3,
+          8e3,
+          9e3,
+          1e4,
+          2e4,
+          3e4,
+          4e4,
+          6e4,
+          9e4,
+          12e3,
+          3e5
+        ];
+        let timeStep = stepCandidate[0];
+        for (let i = stepCandidate.length - 1; i >= 0; i--) {
+          if (gridCount * stepCandidate[i] >= maxTime) {
+            timeStep = stepCandidate[i];
+          }
+        }
+        const gridRatio = maxTime / (gridCount * timeStep);
+        if (gridRatio <= 0.8) {
+          singleGridWidth = Math.floor(singleGridWidth * (1 / gridRatio) * 0.9);
+          gridCount = Math.floor(canvasWidth / singleGridWidth);
+        }
+        const leftForTimeOffset = (timeOffset) => {
+          return Math.floor(singleGridWidth * timeOffset / timeStep);
+        };
+        const timeOffsetForLeft = (left) => {
+          return Math.floor(left * timeStep / singleGridWidth);
+        };
+        yield app.init({
+          width: canvasWidth,
+          height: canvasHeight,
+          backgroundColor: sideBg
+        });
+        if (!domRef.current) {
+          app.destroy();
+          return;
+        }
+        domRef.current.replaceChildren(app.canvas);
+        const pixiTextForNumber = (num) => {
+          const textContent = `${num}ms`;
+          const text = new PIXI.Text(`${textContent}`, {
+            fontSize: timeContentFontSize,
+            fill: gridTextColor
+          });
+          return text;
+        };
+        gridsContainer.removeChildren();
+        const titleBgSection = new PIXI.Graphics();
+        titleBgSection.beginFill(titleBg);
+        titleBgSection.drawRect(0, 0, canvasWidth, timeTitleBottom);
+        titleBgSection.endFill();
+        gridsContainer.addChild(titleBgSection);
+        const gridHeight = canvasHeight;
+        for (let i = 1; i <= gridCount; i++) {
+          const gridLine = new PIXI.Graphics();
+          const gridLineLeft = leftForTimeOffset(i * timeStep);
+          gridLine.beginFill(gridLineColor);
+          gridLine.drawRect(gridLineLeft, 0, sizeRatio, gridHeight);
+          gridLine.endFill();
+          gridsContainer.addChild(gridLine);
+          const text = pixiTextForNumber(i * timeStep);
+          const textLeft = gridLineLeft - text.width - commonPadding;
+          text.x = textLeft;
+          text.y = timeTextTop;
+          gridsContainer.addChild(text);
+        }
+        app.stage.addChild(gridsContainer);
+        if (!allScreenshots.length) {
+          console.warn("No screenshots found");
+          return;
+        }
+        const shotContainers = [];
+        screenshotsContainer.removeChildren();
+        const screenshotTop = timeTitleBottom + commonPadding * 1.5;
+        const screenshotMaxHeight = canvasHeight - screenshotTop - commonPadding * 1.5;
+        allScreenshots.forEach((screenshot, index) => {
+          const container = new PIXI.Container();
+          shotContainers.push(container);
+          app.stage.addChild(container);
+          const img = new Image();
+          img.src = screenshot.img;
+          img.onload = () => {
+            const screenshotTexture = PIXI.Texture.from(img);
+            const screenshotSprite = new PIXI.Sprite(screenshotTexture);
+            const originalWidth = img.width;
+            const originalHeight = img.height;
+            const screenshotHeight = screenshotMaxHeight;
+            const screenshotWidth = Math.floor(screenshotHeight / originalHeight * originalWidth);
+            const screenshotX = leftForTimeOffset(screenshot.timeOffset);
+            allScreenshots[index].x = screenshotX;
+            allScreenshots[index].y = screenshotTop;
+            allScreenshots[index].width = screenshotWidth;
+            allScreenshots[index].height = screenshotMaxHeight;
+            const border = new PIXI.Graphics();
+            border.lineStyle(sizeRatio, shotBorderColor, 1);
+            border.drawRect(screenshotX, screenshotTop, screenshotWidth, screenshotMaxHeight);
+            border.endFill();
+            container.addChild(border);
+            screenshotSprite.x = screenshotX;
+            screenshotSprite.y = screenshotTop;
+            screenshotSprite.width = screenshotWidth;
+            screenshotSprite.height = screenshotMaxHeight;
+            container.addChild(screenshotSprite);
+          };
+        });
+        const highlightMaskUpdater = (start, end, hoverStart, hoverEnd) => {
+          highlightMaskContainer.removeChildren();
+          const mask = (start2, end2, alpha) => {
+            if (typeof start2 === "undefined" || typeof end2 === "undefined" || end2 === 0) {
+              return;
+            }
+            const leftBorder = new PIXI.Graphics();
+            leftBorder.beginFill(gridHighlightColor, 1);
+            leftBorder.drawRect(leftForTimeOffset(start2), 0, sizeRatio, canvasHeight);
+            leftBorder.endFill();
+            highlightMaskContainer.addChild(leftBorder);
+            const rightBorder = new PIXI.Graphics();
+            rightBorder.beginFill(gridHighlightColor, 1);
+            rightBorder.drawRect(leftForTimeOffset(end2), 0, sizeRatio, canvasHeight);
+            rightBorder.endFill();
+            highlightMaskContainer.addChild(rightBorder);
+            const mask2 = new PIXI.Graphics();
+            mask2.beginFill(gridHighlightColor, alpha);
+            mask2.drawRect(
+              leftForTimeOffset(start2),
+              0,
+              leftForTimeOffset(end2) - leftForTimeOffset(start2),
+              canvasHeight
+            );
+            mask2.endFill();
+            highlightMaskContainer.addChild(mask2);
+          };
+          mask(start, end, highlightMaskAlpha);
+          mask(hoverStart, hoverEnd, hoverMaskAlpha);
+        };
+        highlightMaskUpdater((_a2 = props.highlightMask) == null ? void 0 : _a2.startMs, (_b2 = props.highlightMask) == null ? void 0 : _b2.endMs, 0, 0);
+        containerUpdaterRef.current = highlightMaskUpdater;
+        app.stage.interactive = true;
+        const onPointerMove = (event) => {
+          var _a3, _b3;
+          const x = event.offsetX * sizeRatio;
+          const y = event.offsetY * sizeRatio;
+          indicatorContainer.removeChildren();
+          const { closestScreenshot, closestIndex } = closestScreenshotItemOnXY(x, y);
+          if (closestIndex < 0) {
+            (_a3 = props.onUnhighlight) == null ? void 0 : _a3.call(props);
+            return;
+          }
+          const closestContainer = shotContainers[closestIndex];
+          closestContainer.children.forEach((child) => {
+            if (child instanceof PIXI.Sprite) {
+              const newSpirit = new PIXI.Graphics();
+              newSpirit.lineStyle(2, gridHighlightColor, 1);
+              newSpirit.drawRect(
+                x,
+                // follow mouse
+                closestScreenshot.y,
+                closestScreenshot.width,
+                closestScreenshot.height
+              );
+              newSpirit.endFill();
+              indicatorContainer.addChild(newSpirit);
+              const screenshotSpirit = cloneSprite(child);
+              screenshotSpirit.x = x;
+              indicatorContainer.addChild(screenshotSpirit);
+            }
+          });
+          const indicator = new PIXI.Graphics();
+          indicator.beginFill(gridHighlightColor, 1);
+          indicator.drawRect(x - 1, 0, 3, canvasHeight);
+          indicator.endFill();
+          indicatorContainer.addChild(indicator);
+          const text = pixiTextForNumber(timeOffsetForLeft(x));
+          text.x = x + 5;
+          text.y = timeTextTop;
+          const textBg = new PIXI.Graphics();
+          textBg.beginFill(titleBg, 1);
+          textBg.drawRect(text.x, text.y, text.width + 10, text.height);
+          textBg.endFill();
+          indicatorContainer.addChild(textBg);
+          indicatorContainer.addChild(text);
+          (_b3 = props.onHighlight) == null ? void 0 : _b3.call(props, {
+            mouseX: x / sizeRatio,
+            mouseY: y / sizeRatio,
+            item: closestScreenshot
+          });
+        };
+        const onPointerOut = () => {
+          var _a3;
+          indicatorContainer.removeChildren();
+          (_a3 = props.onUnhighlight) == null ? void 0 : _a3.call(props);
+        };
+        const onPointerTap = (event) => {
+          var _a3;
+          const x = event.offsetX * sizeRatio;
+          const y = event.offsetY * sizeRatio;
+          const { closestScreenshot } = closestScreenshotItemOnXY(x, y);
+          if (closestScreenshot) {
+            (_a3 = props.onTap) == null ? void 0 : _a3.call(props, closestScreenshot);
+          }
+        };
+        app.stage.addChild(screenshotsContainer);
+        app.stage.addChild(highlightMaskContainer);
+        app.stage.addChild(indicatorContainer);
+        const canvas = app.view;
+        canvas.addEventListener("pointermove", onPointerMove);
+        canvas.addEventListener("pointerout", onPointerOut);
+        canvas.addEventListener("pointerdown", onPointerTap);
+      }))()
+    );
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "timeline-canvas-wrapper", ref: domRef });
+};
+const Timeline = () => {
+  const allTasks = useAllCurrentTasks();
+  const wrapper = useRef(null);
+  const setActiveTask = useExecutionDump((store) => store.setActiveTask);
+  const activeTask = useExecutionDump((store) => store.activeTask);
+  const hoverTask = useExecutionDump((store) => store.hoverTask);
+  const setHoverTask = useExecutionDump((store) => store.setHoverTask);
+  const setHoverPreviewConfig = useExecutionDump((store) => store.setHoverPreviewConfig);
+  let startingTime = -1;
+  let idCount = 1;
+  const idTaskMap = {};
+  const allScreenshots = allTasks.reduce((acc, current) => {
+    var _a;
+    const recorders = current.recorder || [];
+    recorders.forEach((item) => {
+      if (startingTime === -1 || startingTime > item.ts) {
+        startingTime = item.ts;
+      }
+    });
+    if (((_a = current.timing) == null ? void 0 : _a.start) && (startingTime === -1 || startingTime > current.timing.start)) {
+      startingTime = current.timing.start;
+    }
+    const recorderItemWithId = recorders.map((item) => {
+      const idStr = `id_${idCount++}`;
+      idTaskMap[idStr] = current;
+      return __spreadProps(__spreadValues({}, item), {
+        id: idStr
+      });
+    });
+    return acc.concat(recorderItemWithId || []);
+  }, []).filter((item) => {
+    return item.screenshot;
+  }).map((recorderItem) => {
+    return {
+      id: recorderItem.id,
+      img: recorderItem.screenshot,
+      timeOffset: recorderItem.ts - startingTime
+    };
+  }).sort((a, b) => a.timeOffset - b.timeOffset);
+  const itemOnTap = (item) => {
+    const task = idTaskMap[item.id];
+    if (task) {
+      setActiveTask(task);
+    }
+  };
+  const onHighlightItem = (param) => {
+    var _a;
+    const { mouseX, item } = param;
+    const refBounding = (_a = wrapper.current) == null ? void 0 : _a.getBoundingClientRect();
+    const task = idTaskMap[item.id];
+    if (task) {
+      setHoverTask(task);
+      setHoverPreviewConfig({
+        x: mouseX + ((refBounding == null ? void 0 : refBounding.left) || 0),
+        y: ((refBounding == null ? void 0 : refBounding.bottom) || 1) - 1
+      });
+    } else {
+      setHoverTask(null);
+      setHoverPreviewConfig(null);
+    }
+  };
+  const unhighlight = () => {
+    setHoverTask(null);
+    setHoverPreviewConfig(null);
+  };
+  const maskConfigForTask = (task) => {
+    var _a, _b;
+    if (!task) {
+      return void 0;
+    }
+    return ((_a = task.timing) == null ? void 0 : _a.start) && ((_b = task.timing) == null ? void 0 : _b.end) ? {
+      startMs: task.timing.start - startingTime || 0,
+      endMs: task.timing.end - startingTime || 0
+    } : void 0;
+  };
+  const highlightMaskConfig = maskConfigForTask(activeTask);
+  const hoverMaskConfig = maskConfigForTask(hoverTask);
+  return /* @__PURE__ */ jsx("div", { className: "timeline-wrapper", ref: wrapper, children: /* @__PURE__ */ jsx(
+    TimelineWidget,
+    {
+      screenshots: allScreenshots,
+      onTap: itemOnTap,
+      onHighlight: onHighlightItem,
+      onUnhighlight: unhighlight,
+      highlightMask: highlightMaskConfig,
+      hoverMask: hoverMaskConfig
+    }
+  ) });
+};
+var timeline_default = Timeline;
+export {
+  timeline_default as default
+};

package/dist/es/index.css

@@ -0,0 +1,89 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  font-size: 14px;
+}
+: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: #000;
+}
+.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: #ECECEC;
+}
+.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: #F5F5F5;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-left: 1px solid #CCCCCC;
+}
+.main-right .main-side {
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+.main-right .json-content {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}

package/dist/es/index.js

@@ -0,0 +1,174 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+import { ConfigProvider, message, Upload, Button } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { Helmet } from "@modern-js/runtime/head";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import Timeline from "./component/timeline";
+import DetailPanel from "./component/detail-panel";
+import logo from "./assets/logo-plain.16842bbc.svg";
+import GlobalHoverPreview from "./component/global-hover-preview";
+import { useExecutionDump } from "./component/store";
+import DetailSide from "./component/detail-side";
+import Sidebar from "./component/sidebar";
+const { Dragger } = Upload;
+const Index = () => {
+  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(() => {
+    return () => {
+      reset();
+    };
+  }, []);
+  useEffect(() => {
+    const onResize = () => {
+      setMainLayoutChangeFlag((prev) => prev + 1);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  const uploadProps = {
+    name: "file",
+    multiple: false,
+    capture: false,
+    customRequest: () => {
+    },
+    beforeUpload(file) {
+      const ifValidFile = file.name.endsWith("web-dump.json");
+      if (!ifValidFile) {
+        message.error("invalid file extension");
+        return false;
+      }
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = (e) => {
+        var _a;
+        const result = (_a = e.target) == null ? void 0 : _a.result;
+        if (typeof result === "string") {
+          try {
+            const data = JSON.parse(result);
+            setGroupedDump(data);
+          } catch (e2) {
+            console.error(e2);
+            message.error("failed to parse dump data", e2.message);
+          }
+        } else {
+          message.error("Invalid dump file");
+        }
+      };
+      return false;
+    }
+  };
+  const loadTasksDemo = () => {
+  };
+  const loadInsightDemo = () => {
+  };
+  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("img", { src: logo, alt: "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/" }) })
+        ] }),
+        /* @__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__ */ jsxs("div", { className: "demo-loader", children: [
+        /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadTasksDemo, children: "Load Tasks Demo" }),
+        /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadInsightDemo, children: "Load Insight Demo" })
+      ] })
+    ] });
+  } else {
+    mainContent = /* @__PURE__ */ jsxs(
+      PanelGroup,
+      {
+        autoSaveId: "main-page-layout",
+        direction: "horizontal",
+        onLayout: () => {
+          if (!mainLayoutChangedRef.current) {
+            setMainLayoutChangeFlag((prev) => prev + 1);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx(Sidebar, {}) }),
+          /* @__PURE__ */ jsx(
+            PanelResizeHandle,
+            {
+              onDragging: (isChanging) => {
+                if (mainLayoutChangedRef.current && !isChanging) {
+                  setMainLayoutChangeFlag((prev) => prev + 1);
+                }
+                mainLayoutChangedRef.current = isChanging;
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ jsxs("div", { className: "main-right", children: [
+            /* @__PURE__ */ jsx(Timeline, {}, mainLayoutChangeFlag),
+            /* @__PURE__ */ jsx("div", { className: "main-content", children: /* @__PURE__ */ jsxs(PanelGroup, { autoSaveId: "page-detail-layout", direction: "horizontal", children: [
+              /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-side", children: /* @__PURE__ */ jsx(DetailSide, {}) }) }),
+              /* @__PURE__ */ jsx(PanelResizeHandle, {}),
+              /* @__PURE__ */ jsx(Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-canvas-container", children: /* @__PURE__ */ jsx(DetailPanel, {}) }) })
+            ] }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    ConfigProvider,
+    {
+      theme: {
+        components: {
+          Layout: {
+            headerHeight: 60,
+            headerPadding: "0 30px",
+            headerBg: "#FFF",
+            bodyBg: "#FFF"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "MidScene.js - Visualization Tool" }) }),
+        /* @__PURE__ */ jsx("div", { className: "page-container", children: mainContent }),
+        /* @__PURE__ */ jsx(GlobalHoverPreview, {})
+      ]
+    }
+  );
+};
+var src_default = Index;
+export {
+  src_default as default
+};