@midscene/visualizer 0.0.1 → 0.1.1

package/src/index.tsx

@@ -1,210 +0,0 @@
-import './index.less';
-import { ConfigProvider, message, Upload, Button } from 'antd';
-import type { UploadProps } 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 './component/assets/logo-plain.svg';
-import GlobalHoverPreview from './component/global-hover-preview';
-import { useExecutionDump, useInsightDump } from '@/component/store';
-import DetailSide from '@/component/detail-side';
-import Sidebar from '@/component/sidebar';
-
-const { Dragger } = Upload;
-const Index = (): JSX.Element => {
-  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);
-    };
-  }, []);
-
-  // TODO
-  // const loadInsightDump = (dump: InsightDump) => {
-  //   console.log('will convert insight dump to execution dump');
-  //   const data = insightDumpToExecutionDump(dump);
-  //   console.log(data);
-
-  //   setExecutionDump(data);
-  // };
-
-  const uploadProps: UploadProps = {
-    name: 'file',
-    multiple: false,
-    capture: false,
-    customRequest: () => {
-      // noop
-    },
-    beforeUpload(file) {
-      const ifValidFile = file.name.endsWith('web-dump.json'); // || file.name.endsWith('.insight.json');
-      // const ifActionFile =
-      //   file.name.endsWith('.actions.json') || /_force_regard_as_action_file/.test(location.href);
-      if (!ifValidFile) {
-        message.error('invalid file extension');
-        return false;
-      }
-      const reader = new FileReader();
-      reader.readAsText(file);
-      reader.onload = (e) => {
-        const result = e.target?.result;
-        if (typeof result === 'string') {
-          try {
-            const data = JSON.parse(result);
-            // setMainLayoutChangeFlag((prev) => prev + 1);
-            setGroupedDump(data);
-            // if (ifActionFile) {
-            // } else {
-            //   loadInsightDump(data);
-            // }
-          } catch (e: any) {
-            console.error(e);
-            message.error('failed to parse dump data', e.message);
-          }
-        } else {
-          message.error('Invalid dump file');
-        }
-      };
-      return false;
-    },
-  };
-
-  const loadTasksDemo = () => {
-    // setExecutionDump(actionDemo);
-    // message.info('Your are viewing the demo data.');
-  };
-
-  const loadInsightDemo = () => {
-    // loadInsightDump(InsightDemo);
-    // message.info('Your are viewing the demo data.');
-  };
-
-  let mainContent: JSX.Element;
-  if (!executionDump) {
-    mainContent = (
-      <div className="main-right uploader-wrapper">
-        <Dragger className="uploader" {...uploadProps}>
-          <p className="ant-upload-drag-icon">
-            <img src={logo} alt="Logo" style={{ width: 100, height: 100, margin: 'auto' }} />
-          </p>
-          <p className="ant-upload-text">
-            Click or drag the{' '}
-            <b>
-              <i>.web-dump.json</i>
-            </b>{' '}
-            {/* or{' '}
-            <b>
-              <i>.actions.json</i>
-            </b>{' '} */}
-            file into this area.
-          </p>
-          <p className="ant-upload-text">
-            The latest dump file is usually placed in{' '}
-            <b>
-              <i>./midscene_run/</i>
-            </b>
-          </p>
-          <p className="ant-upload-text">
-            All data will be processed locally by the browser. No data will be sent to the server.
-          </p>
-        </Dragger>
-        <div className="demo-loader">
-          <Button type="link" onClick={loadTasksDemo}>
-            Load Tasks Demo
-          </Button>
-          <Button type="link" onClick={loadInsightDemo}>
-            Load Insight Demo
-          </Button>
-        </div>
-      </div>
-    );
-
-    // dump
-  } else {
-    mainContent = (
-      <PanelGroup
-        autoSaveId="main-page-layout"
-        direction="horizontal"
-        onLayout={() => {
-          if (!mainLayoutChangedRef.current) {
-            setMainLayoutChangeFlag((prev) => prev + 1);
-          }
-        }}
-      >
-        <Panel maxSize={95}>
-          <Sidebar />
-        </Panel>
-        <PanelResizeHandle
-          onDragging={(isChanging) => {
-            if (mainLayoutChangedRef.current && !isChanging) {
-              // not changing anymore
-              setMainLayoutChangeFlag((prev) => prev + 1);
-            }
-            mainLayoutChangedRef.current = isChanging;
-          }}
-        />
-        <Panel defaultSize={80} maxSize={95}>
-          <div className="main-right">
-            <Timeline key={mainLayoutChangeFlag} />
-            <div className="main-content">
-              <PanelGroup autoSaveId="page-detail-layout" direction="horizontal">
-                <Panel maxSize={95}>
-                  <div className="main-side">
-                    <DetailSide />
-                  </div>
-                </Panel>
-                <PanelResizeHandle />
-
-                <Panel defaultSize={75} maxSize={95}>
-                  <div className="main-canvas-container">
-                    <DetailPanel />
-                  </div>
-                </Panel>
-              </PanelGroup>
-            </div>
-          </div>
-        </Panel>
-      </PanelGroup>
-    );
-  }
-
-  return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Layout: {
-            headerHeight: 60,
-            headerPadding: '0 30px',
-            headerBg: '#FFF',
-            bodyBg: '#FFF',
-          },
-        },
-      }}
-    >
-      <Helmet>
-        <title>MidScene.js - Visualization Tool</title>
-      </Helmet>
-      <div className="page-container">{mainContent}</div>
-      <GlobalHoverPreview />
-    </ConfigProvider>
-  );
-};
-
-export default Index;

package/src/utils.ts

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import dayjs from 'dayjs';
-import type { ExecutionDump, ExecutionTaskInsightLocate, InsightDump, ExecutionTask } from '@midscene/core';
-
-export function insightDumpToExecutionDump(insightDump: InsightDump | InsightDump[]): ExecutionDump {
-  const insightToTask = (insightDump: InsightDump): ExecutionTaskInsightLocate => {
-    const task: ExecutionTaskInsightLocate = {
-      type: 'Insight',
-      subType: insightDump.type === 'locate' ? 'Locate' : 'Query',
-      status: insightDump.error ? 'fail' : 'success',
-      param: {
-        ...(insightDump.userQuery.element ? { query: insightDump.userQuery } : {}),
-        ...(insightDump.userQuery.dataDemand ? { dataDemand: insightDump.userQuery.dataDemand } : {}),
-        insight: {} as any,
-      } as any,
-      log: {
-        dump: insightDump,
-      },
-      timing: {
-        end: insightDump.logTime,
-        cost: insightDump.taskInfo?.durationMs,
-        start: insightDump.logTime - insightDump.taskInfo?.durationMs,
-      },
-      executor: () => {},
-    };
-    return task;
-  };
-
-  if (!Array.isArray(insightDump)) {
-    const result: ExecutionDump = {
-      sdkVersion: insightDump.sdkVersion,
-      logTime: insightDump.logTime,
-      name: 'Insight',
-      tasks: [insightToTask(insightDump)],
-    };
-    return result;
-  } else {
-    const result: ExecutionDump = {
-      sdkVersion: insightDump[0].sdkVersion,
-      logTime: insightDump[0].logTime,
-      name: 'Insight',
-      tasks: insightDump.map(insightToTask),
-    };
-    return result;
-  }
-}
-
-export function timeStr(timestamp?: number) {
-  return timestamp ? dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') : '-';
-}
-
-export function typeStr(task: ExecutionTask) {
-  return task.subType ? `${task.type} / ${task.subType || ''}` : task.type;
-}
-
-export function filterBase64Value(input: string) {
-  return input.replace(/data:image\/[^"]+"/g, 'data:image..."');
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "resolveJsonModule": true,
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "strict": true,
-    "types": ["react"],
-  },
-  "exclude": ["**/node_modules"],
-  "include": ["src"]
-}
-