feat: in UI allow pty execution to be canceled

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/MasonryCombo.tsx

@@ -28,6 +28,7 @@ import MasonryTileWrapper from "./MasonryTileWrapper"
 import Toolbar, { type SML } from "./Toolbar"
 
 import computeModel from "./model"
+import ConditionVariable from "./condvar"
 import {
   hasContextInformation,
   hasTimingInformation,
@@ -83,11 +84,17 @@ export default function MasonryCombo({ value, setValue }: Props) {
     cmd: string
     args?: string[]
     onExit?: (exitCode: number) => void
+    cancelCondVar?: ConditionVariable
   }>(null)
+  const cancelModal = useCallback(
+    () => modalContent?.cancelCondVar?.signal(),
+    [modalContent?.cancelCondVar],
+  )
   const closeModal = useCallback(() => {
+    modalContent?.cancelCondVar?.signal()
     setModalContent(null)
     setModalIsDone(-1)
-  }, [setModalContent, setModalIsDone])
+  }, [modalContent?.cancelCondVar, setModalContent, setModalIsDone])
   const onExit = useCallback(
     (exitCode: number) => {
       setModalIsDone(exitCode)
@@ -97,6 +104,7 @@ export default function MasonryCombo({ value, setValue }: Props) {
     },
     [setModalIsDone, modalContent],
   )
+  useEffect(() => setModalIsDone(-2), [modalContent])
 
   // special form of setModalContent for running a PDL program
   const run = useCallback<Runner>(
@@ -132,6 +140,7 @@ export default function MasonryCombo({ value, setValue }: Props) {
           ...(!data ? [] : ["--data", JSON.stringify(data)]),
           input,
         ],
+        cancelCondVar: new ConditionVariable(),
         onExit: async () => {
           onExit()
           try {
@@ -206,7 +215,7 @@ export default function MasonryCombo({ value, setValue }: Props) {
         <ModalHeader
           title={modalContent?.header}
           titleIconVariant={
-            modalIsDone === -1
+            modalIsDone < 0
               ? RunningIcon
               : modalIsDone === 0
                 ? "success"
@@ -218,6 +227,7 @@ export default function MasonryCombo({ value, setValue }: Props) {
             <RunTerminal
               cmd={modalContent?.cmd ?? ""}
               args={modalContent?.args}
+              cancel={modalContent?.cancelCondVar}
               onExit={onExit}
             />
           </Suspense>
@@ -228,10 +238,18 @@ export default function MasonryCombo({ value, setValue }: Props) {
             key="Close"
             variant={modalIsDone > 0 ? "danger" : "primary"}
             onClick={closeModal}
-            isDisabled={modalIsDone === -1}
+            isDisabled={modalIsDone < 0}
           >
             Close
           </Button>
+          <Button
+            key="Cancel"
+            variant="secondary"
+            onClick={cancelModal}
+            isDisabled={modalIsDone !== -2}
+          >
+            Cancel
+          </Button>
         </ModalFooter>
       </Modal>
     </>

pdl-live-react/src/view/masonry/condvar.ts

@@ -0,0 +1,29 @@
+export default class ConditionVariable {
+  private condition: boolean = false
+  private waitingPromises: {
+    resolve: () => void
+    reject: (reason?: unknown) => void
+  }[] = []
+
+  public async wait(): Promise<void> {
+    if (this.condition) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      this.waitingPromises.push({ resolve, reject })
+    })
+  }
+
+  public signal(): void {
+    if (this.waitingPromises.length > 0) {
+      const { resolve } = this.waitingPromises.shift()!
+      resolve()
+      this.condition = true
+    }
+  }
+
+  public reset(): void {
+    this.condition = false
+  }
+}

pdl-live-react/src/view/term/RunTerminal.tsx

@@ -8,16 +8,25 @@ import { ClipboardAddon } from "@xterm/addon-clipboard"
 import "./RunTerminal.css"
 
 type Props = {
+  /** The cmd part of `cmd ...args` */
   cmd: string
+
+  /** The args part of `cmd ...args */
   args?: string[]
+
+  /** A callback provided by caller to be invoked upon pty completion */
   onExit?: (exitCode: number) => void
+
+  /** A condition variable used by caller to request pty cancellation */
+  cancel?: import("../masonry/condvar").default
 }
 
-export default function RunTerminal({ cmd, args = [], onExit }: Props) {
+export default function RunTerminal({ cmd, args = [], onExit, cancel }: Props) {
   const ref = createRef<HTMLDivElement>()
   const [term, setTerm] = useState<null | Terminal>(null)
   const [exitCode, setExitCode] = useState(-1)
 
+  /** Schema adapter from our props.onExit to that of tauri-pty */
   const onExit2 = useCallback(
     ({ exitCode }: { exitCode: number }) => {
       setExitCode(exitCode)
@@ -28,7 +37,8 @@ export default function RunTerminal({ cmd, args = [], onExit }: Props) {
     [onExit, setExitCode],
   )
 
-  useEffect(() => setExitCode(-1), [cmd, args, onExit])
+  /** Re-initialization of exit code if props change */
+  useEffect(() => setExitCode(-1), [cmd, args, onExit, cancel])
 
   // Why a two-stage useEffect? Otherwise: cannot read properties of
   // undefined (reading 'dimensions')
@@ -64,6 +74,11 @@ export default function RunTerminal({ cmd, args = [], onExit }: Props) {
         rows: term.rows,
       })
 
+      /** Respond to cancellation request by killing the pty */
+      cancel?.wait().then(() => {
+        pty.kill()
+      })
+
       pty.onData((data) => term.write(data))
       term.onData((data) => pty.write(data))
 
@@ -78,7 +93,7 @@ export default function RunTerminal({ cmd, args = [], onExit }: Props) {
         }
       }
     }
-  }, [term, ref, exitCode, args, cmd, onExit2])
+  }, [term, ref, exitCode, cmd, args, cancel, onExit2])
 
   return (
     <div className="pdl-run-terminal" ref={ref} style={{ height: "600px" }} />