@sqaitech/visualizer 0.5.0

package/dist/lib/component/blackboard/index.js

@@ -0,0 +1,321 @@
+'use client';
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    pointMarkForItem: ()=>pointMarkForItem,
+    default: ()=>blackboard,
+    Blackboard: ()=>Blackboard,
+    rectMarkForItem: ()=>rectMarkForItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("pixi.js/unsafe-eval");
+const external_antd_namespaceObject = require("antd");
+const external_pixi_js_namespaceObject = require("pixi.js");
+const external_react_namespaceObject = require("react");
+const color_js_namespaceObject = require("../../utils/color.js");
+require("./index.css");
+const extractor_namespaceObject = require("@sqaitech/shared/extractor");
+const external_pixi_filters_namespaceObject = require("pixi-filters");
+const store_js_namespaceObject = require("../../store/store.js");
+const itemFillAlpha = 0.4;
+const highlightAlpha = 0.4;
+const pointRadius = 10;
+const pointMarkForItem = (point, type)=>{
+    const [x, y] = point;
+    const themeColor = (0, color_js_namespaceObject.highlightColorForType)('element');
+    const graphics = new external_pixi_js_namespaceObject.Graphics();
+    graphics.beginFill(themeColor, itemFillAlpha);
+    graphics.drawCircle(x, y, pointRadius);
+    graphics.endFill();
+    return graphics;
+};
+const rectMarkForItem = (rect, name, type)=>{
+    const { left, top, width, height } = rect;
+    let themeColor;
+    themeColor = 'element' === type ? (0, color_js_namespaceObject.colorForName)(name) : 'searchArea' === type ? (0, color_js_namespaceObject.highlightColorForType)('searchArea') : (0, color_js_namespaceObject.highlightColorForType)('element');
+    const alpha = 'highlight' === type ? highlightAlpha : itemFillAlpha;
+    const graphics = new external_pixi_js_namespaceObject.Graphics();
+    graphics.beginFill(themeColor, alpha);
+    graphics.lineStyle(1, themeColor, 1);
+    graphics.drawRect(left, top, width, height);
+    graphics.endFill();
+    const dropShadowFilter = new external_pixi_filters_namespaceObject.DropShadowFilter({
+        blur: 2,
+        quality: 3,
+        alpha: 0.4,
+        offset: {
+            x: 4,
+            y: 4
+        },
+        color: 0x333333
+    });
+    graphics.filters = [
+        dropShadowFilter
+    ];
+    const nameFontSize = 18;
+    if (!name) return [
+        graphics
+    ];
+    const texts = new external_pixi_js_namespaceObject.Text(name, {
+        fontSize: nameFontSize,
+        fill: 0x0
+    });
+    texts.x = left;
+    texts.y = Math.max(top - (nameFontSize + 4), 0);
+    return [
+        graphics,
+        texts
+    ];
+};
+const Blackboard = (props)=>{
+    const highlightElements = props.highlightElements || [];
+    const highlightIds = highlightElements.map((e)=>e.id);
+    const highlightRect = props.highlightRect;
+    const highlightPoints = props.highlightPoints;
+    const context = props.uiContext;
+    const { size, screenshotBase64 } = context;
+    const screenWidth = size.width;
+    const screenHeight = size.height;
+    const domRef = (0, external_react_namespaceObject.useRef)(null);
+    const app = (0, external_react_namespaceObject.useMemo)(()=>new external_pixi_js_namespaceObject.Application(), []);
+    const [appInitialed, setAppInitialed] = (0, external_react_namespaceObject.useState)(false);
+    const highlightContainer = (0, external_react_namespaceObject.useMemo)(()=>new external_pixi_js_namespaceObject.Container(), []);
+    const elementMarkContainer = (0, external_react_namespaceObject.useMemo)(()=>new external_pixi_js_namespaceObject.Container(), []);
+    const [hoverElement, setHoverElement] = (0, external_react_namespaceObject.useState)(null);
+    const pixiBgRef = (0, external_react_namespaceObject.useRef)(void 0);
+    const { backgroundVisible, setBackgroundVisible, elementsVisible, setElementsVisible } = (0, store_js_namespaceObject.useBlackboardPreference)();
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        Promise.resolve((async ()=>{
+            if (!domRef.current || !screenWidth) return;
+            await app.init({
+                width: screenWidth,
+                height: screenHeight,
+                background: 0xffffff
+            });
+            const canvasEl = domRef.current;
+            domRef.current.appendChild(app.canvas);
+            const { clientWidth } = domRef.current.parentElement;
+            const targetHeight = 0.6 * window.innerHeight;
+            const viewportRatio = clientWidth / targetHeight;
+            if (screenWidth / screenHeight <= viewportRatio) {
+                const ratio = targetHeight / screenHeight;
+                canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
+                canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
+            }
+            app.stage.addChild(highlightContainer);
+            app.stage.addChild(elementMarkContainer);
+            setAppInitialed(true);
+        })());
+        return ()=>{
+            console.log('will destroy');
+            try {
+                app.destroy(true, {
+                    children: true,
+                    texture: true
+                });
+            } catch (e) {
+                console.warn('destroy failed', e);
+            }
+        };
+    }, [
+        app,
+        screenWidth,
+        screenHeight
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!appInitialed) return;
+        app.stage.eventMode = 'static';
+        app.stage.hitArea = new external_pixi_js_namespaceObject.Rectangle(0, 0, screenWidth, screenHeight);
+        const clickHandler = (event)=>{
+            var _props_onCanvasClick;
+            console.log('pixi click', event);
+            const { x, y } = event.data.global;
+            null == (_props_onCanvasClick = props.onCanvasClick) || _props_onCanvasClick.call(props, [
+                Math.round(x),
+                Math.round(y)
+            ]);
+        };
+        app.stage.on('click', clickHandler);
+        return ()=>{
+            var _app_stage;
+            null == app || null == (_app_stage = app.stage) || _app_stage.off('click');
+        };
+    }, [
+        appInitialed,
+        props.onCanvasClick,
+        screenWidth,
+        screenHeight
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!appInitialed) return;
+        const img = new Image();
+        img.onload = ()=>{
+            if (!app.stage) return;
+            const screenshotTexture = external_pixi_js_namespaceObject.Texture.from(img);
+            const backgroundSprite = new external_pixi_js_namespaceObject.Sprite(screenshotTexture);
+            backgroundSprite.x = 0;
+            backgroundSprite.y = 0;
+            backgroundSprite.width = screenWidth;
+            backgroundSprite.height = screenHeight;
+            backgroundSprite.eventMode = 'passive';
+            app.stage.addChildAt(backgroundSprite, 0);
+            pixiBgRef.current = backgroundSprite;
+            backgroundSprite.visible = backgroundVisible;
+        };
+        img.onerror = (e)=>{
+            console.error('load screenshot failed', e);
+        };
+        img.src = screenshotBase64;
+    }, [
+        app.stage,
+        appInitialed,
+        screenWidth,
+        screenHeight
+    ]);
+    const { highlightElementRects } = (0, external_react_namespaceObject.useMemo)(()=>{
+        const highlightElementRects = [];
+        highlightContainer.removeChildren();
+        elementMarkContainer.removeChildren();
+        highlightContainer.eventMode = 'passive';
+        elementMarkContainer.eventMode = 'passive';
+        if (highlightRect) {
+            const [graphics] = rectMarkForItem(highlightRect, 'Search Area', 'searchArea');
+            highlightContainer.addChild(graphics);
+        }
+        if (highlightElements.length) highlightElements.forEach((element)=>{
+            const { rect, content, id } = element;
+            const [graphics] = rectMarkForItem(rect, content, 'highlight');
+            highlightContainer.addChild(graphics);
+        });
+        if (null == highlightPoints ? void 0 : highlightPoints.length) highlightPoints.forEach((point)=>{
+            const graphics = pointMarkForItem(point, 'highlightPoint');
+            highlightContainer.addChild(graphics);
+        });
+        const elements = (0, extractor_namespaceObject.treeToList)(context.tree);
+        elements.forEach((element)=>{
+            const { rect, content, id } = element;
+            const ifHighlight = highlightIds.includes(id) || (null == hoverElement ? void 0 : hoverElement.id) === id;
+            if (ifHighlight) return;
+            const [graphics] = rectMarkForItem(rect, content, 'element');
+            elementMarkContainer.addChild(graphics);
+        });
+        elementMarkContainer.visible = elementsVisible;
+        return {
+            highlightElementRects
+        };
+    }, [
+        app,
+        appInitialed,
+        highlightElements,
+        context.tree,
+        hoverElement,
+        highlightRect,
+        highlightPoints
+    ]);
+    const onSetBackgroundVisible = (e)=>{
+        setBackgroundVisible(e.target.checked);
+        if (pixiBgRef.current) pixiBgRef.current.visible = e.target.checked;
+    };
+    const onSetElementsVisible = (e)=>{
+        setElementsVisible(e.target.checked);
+        elementMarkContainer.visible = e.target.checked;
+    };
+    let bottomTipA = null;
+    if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "bottom-tip",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "bottom-tip-item",
+            children: [
+                "Element: ",
+                JSON.stringify(highlightElementRects[0])
+            ]
+        })
+    });
+    else if (highlightElementRects.length > 1) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "bottom-tip",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "bottom-tip-item",
+            children: [
+                "Element: ",
+                JSON.stringify(highlightElementRects)
+            ]
+        })
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "blackboard",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "blackboard-main-content",
+                style: {
+                    width: '100%'
+                },
+                ref: domRef
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "blackboard-filter",
+                style: {
+                    display: props.hideController ? 'none' : 'block'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "overlay-control",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
+                            checked: backgroundVisible,
+                            onChange: onSetBackgroundVisible,
+                            children: "Background"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
+                            checked: elementsVisible,
+                            onChange: onSetElementsVisible,
+                            children: "Elements"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "bottom-tip",
+                style: {
+                    display: props.hideController ? 'none' : 'block'
+                },
+                children: bottomTipA
+            })
+        ]
+    });
+};
+const blackboard = Blackboard;
+exports.Blackboard = __webpack_exports__.Blackboard;
+exports["default"] = __webpack_exports__["default"];
+exports.pointMarkForItem = __webpack_exports__.pointMarkForItem;
+exports.rectMarkForItem = __webpack_exports__.rectMarkForItem;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Blackboard",
+    "default",
+    "pointMarkForItem",
+    "rectMarkForItem"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/config-selector/index.js

@@ -0,0 +1,148 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ConfigSelector: ()=>ConfigSelector
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const setting_js_namespaceObject = require("../../icons/setting.js");
+var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespaceObject);
+const store_js_namespaceObject = require("../../store/store.js");
+const constants_js_namespaceObject = require("../../utils/constants.js");
+const ConfigSelector = (param)=>{
+    let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
+    const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
+    const setForceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setForceSameTabNavigation);
+    const deepThink = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.deepThink);
+    const setDeepThink = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setDeepThink);
+    const screenshotIncluded = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.screenshotIncluded);
+    const setScreenshotIncluded = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setScreenshotIncluded);
+    const domIncluded = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.domIncluded);
+    const setDomIncluded = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setDomIncluded);
+    if (!enableTracking && !showDeepThinkOption && !showDataExtractionOptions) return null;
+    const configItems = buildConfigItems();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "selector-trigger",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+            menu: {
+                items: configItems
+            },
+            trigger: [
+                'click'
+            ],
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
+                width: 24,
+                height: 24
+            })
+        })
+    });
+    function buildConfigItems() {
+        const items = [];
+        if (enableTracking) items.push({
+            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
+                onChange: (e)=>setForceSameTabNavigation(e.target.checked),
+                checked: forceSameTabNavigation,
+                children: constants_js_namespaceObject.trackingTip
+            }),
+            key: 'track-config'
+        });
+        if (showDeepThinkOption) items.push({
+            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
+                onChange: (e)=>{
+                    setDeepThink(e.target.checked);
+                },
+                checked: deepThink,
+                children: constants_js_namespaceObject.deepThinkTip
+            }),
+            key: 'deep-think-config'
+        });
+        if (showDataExtractionOptions && !hideDomAndScreenshotOptions) {
+            items.push({
+                label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
+                    onChange: (e)=>{
+                        setScreenshotIncluded(e.target.checked);
+                    },
+                    checked: screenshotIncluded,
+                    children: constants_js_namespaceObject.screenshotIncludedTip
+                }),
+                key: 'screenshot-included-config'
+            });
+            items.push({
+                label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    style: {
+                        padding: '4px 0'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            style: {
+                                marginBottom: '4px',
+                                fontSize: '14px'
+                            },
+                            children: constants_js_namespaceObject.domIncludedTip
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Radio.Group, {
+                            size: "small",
+                            value: domIncluded,
+                            onChange: (e)=>setDomIncluded(e.target.value),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio, {
+                                    value: false,
+                                    children: "Off"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio, {
+                                    value: true,
+                                    children: "All"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio, {
+                                    value: 'visible-only',
+                                    children: "Visible only"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                key: 'dom-included-config'
+            });
+        }
+        return items;
+    }
+};
+exports.ConfigSelector = __webpack_exports__.ConfigSelector;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ConfigSelector"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/context-preview/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ContextPreview: ()=>ContextPreview
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const index_js_namespaceObject = require("../blackboard/index.js");
+var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
+const external_misc_index_js_namespaceObject = require("../misc/index.js");
+const playground_demo_ui_context_json_namespaceObject = require("../playground/playground-demo-ui-context.json");
+var playground_demo_ui_context_json_default = /*#__PURE__*/ __webpack_require__.n(playground_demo_ui_context_json_namespaceObject);
+const ContextPreview = (param)=>{
+    let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
+    if (!showContextPreview) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "form-part context-panel",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                children: "UI Context"
+            }),
+            uiContextPreview ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
+                uiContext: uiContextPreview,
+                hideController: true
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                children: [
+                    (0, external_misc_index_js_namespaceObject.iconForStatus)('failed'),
+                    " No UI context",
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                        type: "link",
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            setUiContextPreview(playground_demo_ui_context_json_default());
+                        },
+                        children: "Load Demo"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        children: "To load the UI context, you can either use the demo data above, or click the 'Send to Playground' in the report page."
+                    })
+                ]
+            })
+        ]
+    });
+};
+exports.ContextPreview = __webpack_exports__.ContextPreview;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ContextPreview"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});