feat: update react ui to present logs of Run/Replay

starpit · starpit · commit 65581854f3b5 · 2025-02-19T16:44:10.000-05:00
Signed-off-by: Nick Mitchell &lt;nickm@us.ibm.com&gt;
diff --git a/pdl-live-react/package-lock.json b/pdl-live-react/package-lock.json
diff --git a/pdl-live-react/package.json b/pdl-live-react/package.json
@@ -9,7 +9,7 @@
     "prod:mac": "npm run prod:mac:1 && npm run prod:mac:2",
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:app": "npm run prep_interpreter && npm run tauri build",
+    "build:app": "npm run prep-interpreter && npm run tauri build",
     "lint": "eslint .",
     "format": "prettier --write 'tests/**/*.ts' 'src/**/*.{ts,tsx,css}' && (cd src-tauri && cargo fmt)",
     "tauri": "tauri",
@@ -19,12 +19,14 @@
     "test": "concurrently -n 'quality,playwright' 'npm run test:quality' 'npm run test:ui'",
     "pdl": "./src-tauri/target/debug/PDL",
     "view": "npm run pdl view",
-    "prep_interpreter": "if [ ! -d .venv ]; then python3.12 -mvenv .venv; source .venv/bin/activate; pip install -e ..; fi",
-    "start": "npm run prep_interpreter && npm run tauri dev"
+    "prep-interpreter": "if [ ! -d .venv ]; then npm run reprep-interpreter; fi",
+    "reprep-interpreter": "source .venv/bin/activate; pip install -e ..",
+    "start": "npm run prep-interpreter && npm run tauri dev"
   },
   "dependencies": {
     "@patternfly/react-code-editor": "^6.1.0",
     "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-log-viewer": "^6.1.0",
     "@patternfly/react-topology": "^6.1.0",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-cli": "^2.2.0",
diff --git a/pdl-live-react/src-tauri/src/cli/run.rs b/pdl-live-react/src-tauri/src/cli/run.rs
@@ -7,8 +7,17 @@ use tempfile::NamedTempFile;
 use tauri::path::BaseDirectory;
 use tauri::Manager;
 
+#[derive(Clone, serde::Serialize)]
+pub struct Payload {
+    done: bool,
+    message: String,
+}
+
 #[cfg(desktop)]
-fn pip_install_if_needed(app_handle: tauri::AppHandle) -> Result<String, tauri::Error> {
+fn pip_install_if_needed(
+    app_handle: tauri::AppHandle,
+    reader: &Option<tauri::ipc::Channel<Payload>>,
+) -> Result<String, tauri::Error> {
     let cache_path = app_handle.path().cache_dir()?.join("pdl");
 
     create_dir_all(&cache_path)?;
@@ -29,7 +38,18 @@ fn pip_install_if_needed(app_handle: tauri::AppHandle) -> Result<String, tauri::
     ); */
 
     if !venv_path.exists() {
-        println!("Creating virtual environment...");
+        match reader {
+            Some(r) => {
+                r.send(Payload {
+                    done: false,
+                    message: "Creating virtual environment...".to_string(),
+                })
+                .unwrap();
+            }
+            None => {
+                println!("Creating virtual environment...");
+            }
+        }
         let venv_path_string = venv_path.into_os_string().into_string().unwrap();
         let output = Command::new("python3.12")
             .args(["-mvenv", venv_path_string.as_str()])
@@ -83,9 +103,10 @@ pub fn run_pdl_program(
     source_file_path: String,
     app_handle: tauri::AppHandle,
     trace: bool,
+    reader: Option<tauri::ipc::Channel<Payload>>,
 ) -> Result<Option<Vec<u8>>, tauri::Error> {
     println!("Running {:?}", source_file_path);
-    let activate = pip_install_if_needed(app_handle)?;
+    let activate = pip_install_if_needed(app_handle, &reader)?;
 
     let (trace_file, trace_arg) = if trace {
         let f = NamedTempFile::new()?;
@@ -118,8 +139,27 @@ pub fn run_pdl_program(
 
     // Stream output.
     let lines = BufReader::new(stdout).lines();
-    for line in lines {
-        println!("{}", line.unwrap());
+    match reader {
+        Some(r) => {
+            for line in lines {
+                r.send(Payload {
+                    done: false,
+                    message: line.unwrap(),
+                })
+                .unwrap();
+            }
+
+            r.send(Payload {
+                done: true,
+                message: "".to_string(),
+            })
+            .unwrap();
+        }
+        None => {
+            for line in lines {
+                println!("{}", line.unwrap());
+            }
+        }
     }
 
     if trace {
diff --git a/pdl-live-react/src-tauri/src/cli/setup.rs b/pdl-live-react/src-tauri/src/cli/setup.rs
@@ -26,6 +26,7 @@ pub fn cli(app: &mut tauri::App) -> Result<(), tauri::Error> {
                                 source_file_path.clone(),
                                 app.handle().clone(),
                                 false,
+                                None,
                             )?;
                             exit(0)
                         }
diff --git a/pdl-live-react/src-tauri/src/commands/replay.rs b/pdl-live-react/src-tauri/src/commands/replay.rs
@@ -2,19 +2,23 @@ use std::io::Write;
 use tempfile::NamedTempFile;
 //use tauri::ipc::Response;
 
-use crate::cli::run::run_pdl_program;
+use crate::cli::run::{run_pdl_program, Payload};
 
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 #[tauri::command]
-pub async fn replay(app_handle: tauri::AppHandle, trace: String) -> Result<String, String> {
+pub async fn replay(
+    app_handle: tauri::AppHandle,
+    trace: String,
+    reader: tauri::ipc::Channel<Payload>,
+) -> Result<String, String> {
     let mut file = NamedTempFile::new().map_err(|e| e.to_string())?;
     file.write_all(trace.as_bytes())
         .map_err(|e| e.to_string())?;
 
     match file.path().to_str() {
         Some(path) => {
-            let data =
-                run_pdl_program(path.to_string(), app_handle, true).map_err(|e| e.to_string())?;
+            let data = run_pdl_program(path.to_string(), app_handle, true, Some(reader))
+                .map_err(|e| e.to_string())?;
             match data {
                 Some(bytes) => {
                     let string = String::from_utf8(bytes).expect("Our bytes should be valid utf8");
diff --git a/pdl-live-react/src/view/masonry/MasonryCombo.tsx b/pdl-live-react/src/view/masonry/MasonryCombo.tsx
@@ -1,5 +1,14 @@
-import { useEffect, useMemo, useState } from "react"
-import { BackToTop, PageSection } from "@patternfly/react-core"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { LogViewer } from "@patternfly/react-log-viewer"
+import {
+  Button,
+  BackToTop,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PageSection,
+} from "@patternfly/react-core"
 
 import Topology from "../memory/Topology"
 import extractVariables from "../memory/model"
@@ -46,6 +55,13 @@ export default function MasonryCombo({ value, setValue }: Props) {
   useEffect(() => setAsUserSetting(as), [as])
   useEffect(() => setSMLUserSetting(sml), [sml])
 
+  const [modalContent, setModalContent] = useState<null | {
+    header: string
+    body: string
+    done?: boolean
+  }>(null)
+  const closeModal = useCallback(() => setModalContent(null), [setModalContent])
+
   const { base, masonry, numbering } = useMemo(
     () => computeModel(block),
     [block],
@@ -69,6 +85,7 @@ export default function MasonryCombo({ value, setValue }: Props) {
           setSML={setSML}
           block={block}
           setValue={setValue}
+          setModalContent={setModalContent}
         />
       </PageSection>
       <PageSection
@@ -91,6 +108,29 @@ export default function MasonryCombo({ value, setValue }: Props) {
       </PageSection>
 
       <BackToTop scrollableSelector=".pdl-masonry-page-section" />
+
+      <Modal variant="medium" isOpen={!!modalContent} onClose={closeModal}>
+        <ModalHeader title={modalContent?.header} />
+        <ModalBody tabIndex={0}>
+          <LogViewer
+            hasLineNumbers={false}
+            data={modalContent?.body}
+            theme="dark"
+            scrollToRow={Number.MAX_VALUE}
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            key="Close"
+            variant="primary"
+            onClick={closeModal}
+            isDisabled={!modalContent?.done}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </Modal>
     </>
   )
 }
diff --git a/pdl-live-react/src/view/masonry/Toolbar.tsx b/pdl-live-react/src/view/masonry/Toolbar.tsx
@@ -19,6 +19,10 @@ export type Props = {
 
   sml: SML
   setSML(sml: SML): void
+
+  setModalContent: import("react").Dispatch<
+    import("react").SetStateAction<{ header: string; body: string } | null>
+  >
 }
 
 export default function MasonryToolbar({
@@ -28,12 +32,17 @@ export default function MasonryToolbar({
   setSML,
   block,
   setValue,
+  setModalContent,
 }: Props) {
   return (
     <Toolbar className="pdl-masonry-toolbar">
       <ToolbarContent>
         <ToolbarGroup variant="action-group-plain">
-          <ToolbarReplayButton block={block} setValue={setValue} />
+          <ToolbarReplayButton
+            block={block}
+            setValue={setValue}
+            setModalContent={setModalContent}
+          />
           <ToolbarShowSourceButton />
         </ToolbarGroup>
         <ToolbarGroup align={alignEnd} variant="action-group">
diff --git a/pdl-live-react/src/view/masonry/ToolbarReplayButton.tsx b/pdl-live-react/src/view/masonry/ToolbarReplayButton.tsx
@@ -1,19 +1,38 @@
-import { invoke } from "@tauri-apps/api/core"
+import { invoke, Channel } from "@tauri-apps/api/core"
 import { Button, Tooltip } from "@patternfly/react-core"
 import { useCallback, useState } from "react"
 
 type Props = {
   block: import("../../pdl_ast").PdlBlock
   setValue(value: string): void
+  setModalContent: import("react").Dispatch<
+    import("react").SetStateAction<{ header: string; body: string } | null>
+  >
 }
 
-export default function ToolbarReplayButton({ block, setValue }: Props) {
+export default function ToolbarReplayButton({
+  block,
+  setValue,
+  setModalContent,
+}: Props) {
   const [isReplaying, setIsReplaying] = useState(false)
 
   const handleClickSource = useCallback(async () => {
     setIsReplaying(true)
+
+    const reader = new Channel<{ message: string; done: boolean }>()
+    reader.onmessage = ({ message, done = false }) => {
+      //console.log(`got event ${message}`)
+      setModalContent((content) => ({
+        done,
+        header: "Running Program",
+        body: !content ? message : content.body + "\n" + message,
+      }))
+    }
+
     try {
       const newTrace = (await invoke("replay", {
+        reader,
         trace: JSON.stringify(block),
       })) as string
       console.log("new trace", newTrace)
@@ -23,7 +42,7 @@ export default function ToolbarReplayButton({ block, setValue }: Props) {
     } finally {
       setIsReplaying(false)
     }
-  }, [block, setValue, setIsReplaying])
+  }, [block, setValue, setIsReplaying, setModalContent])
 
   return (
     <Tooltip content="Re-run this program">

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ pub fn cli(app: &mut tauri::App) -> Result<(), tauri::Error> {`
`26`	`26`	`source_file_path.clone(),`
`27`	`27`	`app.handle().clone(),`
`28`	`28`	`false,`
	`29`	`+ None,`
`29`	`30`	`)?;`
`30`	`31`	`exit(0)`
`31`	`32`	`}`