Disable run button when running (#38)

Co-authored-by: Samuel Colvin <[email protected]>

Author: Jamie-Chang

src/frontend/src/app.tsx

@@ -10,6 +10,7 @@ const ansiConverter = new Convert({ colors: { 1: '#CE9178', 4: '#569CFF', 5: '#F
 
 export default function () {
   const [status, setStatus] = createSignal<string | null>(null)
+  const [running, setRunning] = createSignal(false)
   const [installed, setInstalled] = createSignal('')
   const [outputHtml, setOutputHtml] = createSignal('')
   const [versions, setVersions] = createSignal<Versions | null>(null)
@@ -33,6 +34,8 @@ export default function () {
         terminalOutput += data.message
       } else if (data.kind == 'installed') {
         setInstalled(data.message.length > 0 ? `Installed dependencies: ${data.message}` : '')
+      } else if (data.kind == 'end') {
+        setRunning(false)
       } else {
         setVersions(data as Versions)
       }
@@ -53,6 +56,7 @@ export default function () {
   })
 
   async function runCode(files: CodeFile[]) {
+    setRunning(true)
     setStatus('Starting Python...')
     setInstalled('')
     setOutputHtml('')
@@ -74,7 +78,7 @@ export default function () {
         </aside>
       </header>
       <section>
-        <Editor runCode={runCode} />
+        <Editor runCode={runCode} running={running()} />
         <div class="col">
           <div class="status my-5">{status() || <>&nbsp;</>}</div>
           <div class="installed">{installed()}</div>

src/frontend/src/editor.tsx

@@ -7,9 +7,10 @@ import type { Editor } from './monacoEditor'
 
 interface EditorProps {
   runCode: (files: CodeFile[]) => void
+  running: boolean
 }
 
-export default function ({ runCode }: EditorProps) {
+export default function (props: EditorProps) {
   const [saveActive, setSaveActive] = createSignal(false)
   const [saveStatus, setSaveStatus] = createSignal('Changes not saved')
   const [showSave, setShowSave] = createSignal(false)
@@ -93,7 +94,7 @@ export default function ({ runCode }: EditorProps) {
 
   function run() {
     const files = updateFiles(editor!.getValue())
-    runCode(files)
+    props.runCode(files)
     save(files)
   }
 
@@ -187,7 +188,12 @@ export default function ({ runCode }: EditorProps) {
               </div>
             )}
             <div>
-              <button class="green" onClick={run} title="Run code in your browser and display the output">
+              <button
+                class="green"
+                onClick={run}
+                disabled={props.running}
+                title="Run code in your browser and display the output"
+              >
                 Run
               </button>
             </div>

src/frontend/src/style.scss

@@ -113,6 +113,11 @@ button {
     &:hover {
       background: color.adjust($btn-green, $lightness: -10%);
     }
+    &:disabled {
+      background: color.adjust($btn-green, $lightness: 20%);
+      opacity: 0.6;
+      cursor: default;
+    }
   }
   &.blue {
     background: $btn-blue;

src/frontend/src/types.d.ts

@@ -22,5 +22,8 @@ export interface Versions {
   python: string
   pyodide: string
 }
+export interface EndRun {
+  kind: 'end'
+}
 
-export type WorkerResponse = Print | Message | Versions
+export type WorkerResponse = Print | Message | Versions | EndRun

src/frontend/src/worker.ts

@@ -49,11 +49,13 @@ self.onmessage = async ({ data }: { data: RunCode }) => {
     sys.stderr.flush()
     postPrint()
     post({ kind: 'status', message: `${msg}ran code in ${asMs(execTime)}` })
+    post({ kind: 'end' })
   } catch (err) {
     postPrint()
     console.warn(err)
     post({ kind: 'status', message: `${msg}Error occurred` })
     post({ kind: 'error', message: formatError(err) })
+    post({ kind: 'end' })
   }
 }