reafactor(report): Optimize the style of the playground (#134)

packages/visualizer/modern.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
       platform: 'browser',
       outDir: 'dist/report',
       minify: {
-        compress: true,
+        compress: !!process.env.CI,
       },
       define: {
         __VERSION__: version,
@@ -36,7 +36,7 @@ export default defineConfig({
       platform: 'browser',
       outDir: 'dist/playground',
       minify: {
-        compress: true,
+        compress: !!process.env.CI,
       },
       define: {
         __VERSION__: JSON.stringify(version),

packages/visualizer/src/component/blackboard.tsx

@@ -107,7 +107,7 @@ const Blackboard = (props: {
         const canvasEl = domRef.current;
         domRef.current.appendChild(app.canvas); // Ensure app.view is appended
         const { clientWidth } = domRef.current.parentElement!;
-        const targetHeight = window.innerHeight * 0.7;
+        const targetHeight = window.innerHeight * 0.5;
         const viewportRatio = clientWidth / targetHeight;
         if (screenWidth / screenHeight <= viewportRatio) {
           const ratio = targetHeight / screenHeight;

packages/visualizer/src/component/detail-panel.tsx

@@ -11,8 +11,8 @@ import {
 import { ConfigProvider, Segmented } from 'antd';
 import { useEffect, useState } from 'react';
 import Blackboard from './blackboard';
+import OpenPlayground from './open-playground';
 import Player from './player';
-import SendToPlayground from './send-to-playground';
 
 const ScreenshotItem = (props: { time: string; img: string }) => {
   return (
@@ -165,7 +165,6 @@ const DetailPanel = (): JSX.Element => {
       value: type,
     };
   });
-
   return (
     <div className="detail-panel">
       <div className="view-switcher">
@@ -187,7 +186,7 @@ const DetailPanel = (): JSX.Element => {
             }}
           />
 
-          <SendToPlayground context={insightDump?.context} />
+          <OpenPlayground context={insightDump?.context} />
         </ConfigProvider>
       </div>
       <div className="detail-content">{content}</div>

packages/visualizer/src/component/open-playground.tsx

@@ -1,7 +1,8 @@
-import { SendOutlined } from '@ant-design/icons';
+import { PlayCircleOutlined, SendOutlined } from '@ant-design/icons';
 import type { UIContext } from '@midscene/core/.';
-import { Button, Tooltip } from 'antd';
+import { Button, Drawer, Tooltip } from 'antd';
 import { useEffect, useState } from 'react';
+import { Playground } from '../playground';
 
 declare const __VERSION__: string;
 
@@ -10,8 +11,8 @@ export const serverBase = 'http://localhost:5800';
 const errorMessageServerNotReady = `To debug the prompt together with this UI context, please follow the steps below:
 
 1. Start the local playground server (Select one of the commands):
- a. npx --yes @midscene/web
- b. npx midscene-playground  (Under the midscene project directory)
+ a. npx midscene-playground  (Under the midscene project directory)
+ b. npx --yes @midscene/web
 2. Click this button again.
 `;
 
@@ -57,8 +58,10 @@ export const useServerValid = () => {
   return serverValid;
 };
 
-export default function SendToPlayground(props?: { context?: UIContext }) {
+export default function OpenPlayground(props?: { context?: UIContext }) {
   const serverValid = useServerValid();
+  const [context, setContext] = useState<UIContext | undefined>();
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
 
   let ifPlaygroundValid = true;
   let invalidReason: React.ReactNode = '';
@@ -70,22 +73,13 @@ export default function SendToPlayground(props?: { context?: UIContext }) {
     invalidReason = errorMessageNoContext;
   }
 
-  const launchPlayground = async () => {
-    // post a form to server, use a new window to open the playground
+  const showPlayground = () => {
+    setContext(props?.context || undefined);
+    setIsDrawerVisible(true);
+  };
 
-    const res = await fetch(`${serverBase}/playground-with-context`, {
-      method: 'POST',
-      body: JSON.stringify({
-        context: JSON.stringify(props?.context),
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'omit',
-    });
-    const data = await res.json();
-    const location = data.location;
-    window.open(`${serverBase}${location}`, '_blank');
+  const handleClose = () => {
+    setIsDrawerVisible(false);
   };
 
   if (!ifPlaygroundValid) {
@@ -105,15 +99,33 @@ export default function SendToPlayground(props?: { context?: UIContext }) {
         }
         overlayInnerStyle={{ width: '380px' }}
       >
-        <Button disabled icon={<SendOutlined />}>
-          Send to Playground
+        <Button disabled icon={<PlayCircleOutlined />}>
+          Open in Playground
         </Button>
       </Tooltip>
     );
   }
   return (
-    <Button onClick={launchPlayground} icon={<SendOutlined />}>
-      Send to Playground
-    </Button>
+    <>
+      <Button onClick={showPlayground} icon={<PlayCircleOutlined />}>
+        Open in Playground
+      </Button>
+      <Drawer
+        title={null}
+        placement="right"
+        onClose={handleClose}
+        open={isDrawerVisible}
+        width="90%"
+        styles={{
+          header: { display: 'none' },
+        }}
+      >
+        <Playground
+          propsContext={context}
+          hideLogo={true}
+          key={Math.random().toString(36).substring(7)}
+        />
+      </Drawer>
+    </>
   );
 }

packages/visualizer/src/playground.less

@@ -29,6 +29,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow-y: auto !important;
 
     .ant-form {
       flex-grow: 1;

packages/visualizer/src/playground.tsx

@@ -16,7 +16,7 @@ import { allScriptsFromDump } from './component/replay-scripts';
 
 import './playground.less';
 import Logo from './component/logo';
-import { serverBase, useServerValid } from './component/send-to-playground';
+import { serverBase, useServerValid } from './component/open-playground';
 
 const requestPlaygroundServer = async (
   context: UIContext,
@@ -53,11 +53,16 @@ const useContextId = () => {
   const match = path.match(/^\/playground\/([a-zA-Z0-9-]+)$/);
   return match ? match[1] : null;
 };
-
 const { TextArea } = Input;
-function Playground() {
+
+export function Playground({
+  propsContext,
+  hideLogo,
+}: { propsContext?: UIContext; hideLogo?: boolean }) {
   const contextId = useContextId();
-  const [uiContext, setUiContext] = useState<UIContext | null>(null);
+  const [uiContext, setUiContext] = useState<UIContext | null>(
+    propsContext || null,
+  );
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<{
     result: any;
@@ -73,7 +78,7 @@ function Playground() {
   const serverValid = useServerValid();
 
   useEffect(() => {
-    if (contextId) {
+    if (!uiContext && contextId) {
       fetch(`${serverBase}/context/${contextId}`)
         .then((res) => res.json())
         .then((data) => {
@@ -200,9 +205,11 @@ function Playground() {
           minSize={20}
           className="playground-left-panel"
         >
-          <div className="playground-header">
-            <Logo />
-          </div>
+          {!hideLogo && (
+            <div className="playground-header">
+              <Logo />
+            </div>
+          )}
 
           <Form
             form={form}