Use papyros to debug testcases

app/assets/javascripts/coding_scratchpad.ts

@@ -12,7 +12,7 @@
 const PANEL_PARENT_ID = "scratchpad-panel-wrapper";
 const CODE_OUTPUT_PARENT_ID = "scratchpad-output-wrapper";
 const CODE_INPUT_PARENT_ID = "scratchpad-input-wrapper";
-const OFFCANVAS_ID = "scratchpad-offcanvas";
+export const OFFCANVAS_ID = "scratchpad-offcanvas";
 const SHOW_OFFCANVAS_BUTTON_ID = "scratchpad-offcanvas-show-btn";
 const CODE_COPY_BUTTON_ID = "scratchpad-code-copy-btn";
 const CLOSE_BUTTON_ID = "scratchpad-offcanvas-close-btn";
@@ -21,103 +21,80 @@
 const TRACE_TAB_ID = "scratchpad-trace-tab";
 const DESCRIPTION_TAB_ID = "scratchpad-description-tab";
 
-function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
-    if (Papyros.supportsProgrammingLanguage(programmingLanguage)) {
-        let papyros: Papyros | undefined = undefined;
-        let editor: EditorView | undefined = undefined;
-        const closeButton = document.getElementById(CLOSE_BUTTON_ID);
-        // To prevent horizontal scrollbar issues, we delay rendering the button
-        // until after the page is loaded
-        const showButton = document.getElementById(SHOW_OFFCANVAS_BUTTON_ID);
-        showButton.classList.add("offcanvas-show-btn");
-        showButton.classList.remove("hidden");
-        showButton.addEventListener("click", async function () {
-            if (!papyros) { // Only create Papyros once per session, but only when required
-                // Papyros registers a service worker on a specific path
-                // We used to do this on a different path
-                // So we need to unregister old serviceworkers manually as these won't get overwritten
-                navigator.serviceWorker.getRegistrations().then(function (registrations) {
-                    for (const registration of registrations) {
-                        if (registration.scope !== document.location.origin + "/") {
-                            registration.unregister();
-                        }
-                    }
-                });
-
-                papyros = new Papyros(
-                    {
-                        programmingLanguage: Papyros.toProgrammingLanguage(programmingLanguage),
-                        standAlone: false,
-                        locale: i18n.locale(),
-                        inputMode: InputMode.Interactive,
-                        channelOptions: {
-                            serviceWorkerName: "inputServiceWorker.js"
-                        }
-                    });
-
-                // Render once new button is added
-                papyros.render({
-                    codeEditorOptions: {
-                        parentElementId: CODE_EDITOR_PARENT_ID
-                    },
-                    statusPanelOptions: {
-                        parentElementId: PANEL_PARENT_ID
-                    },
-                    outputOptions: {
-                        parentElementId: CODE_OUTPUT_PARENT_ID
-                    },
-                    inputOptions: {
-                        parentElementId: CODE_INPUT_PARENT_ID,
-                        inputStyling: {
-                            // Allows 4 lines of input
-                            maxHeight: "10vh"
-                        }
-                    },
-                    traceOptions: {
-                        parentElementId: CODE_TRACE_PARENT_ID
-                    },
-                    darkMode: themeState.theme === "dark"
-                });
-                editor ||= window.dodona.editor;
-                if (editor) {
-                    // Shortcut to copy code to editor
-                    papyros.addButton(
-                        {
-                            id: CODE_COPY_BUTTON_ID,
-                            buttonText: i18n.t("js.coding_scratchpad.copy_to_submit"),
-                            classNames: "btn-secondary",
-                            icon: "<i class=\"mdi mdi-clipboard-arrow-left-outline\"></i>"
-                        },
-                        () => {
-                            setCode(editor, papyros.getCode());
-                            closeButton.click();
-                            // Open submit panel if possible
-                            document.getElementById(SUBMIT_TAB_ID)?.click();
-                        }
-                    );
+let papyros: Papyros | undefined = undefined;
+let editor: EditorView | undefined = undefined;
+export async function initPapyros(programmingLanguage: ProgrammingLanguage): Promise<Papyros> {
+    if (!papyros) { // Only create Papyros once per session, but only when required
+        // Papyros registers a service worker on a specific path
+        // We used to do this on a different path
+        // So we need to unregister old serviceworkers manually as these won't get overwritten
+        navigator.serviceWorker.getRegistrations().then(function (registrations) {
+            for (const registration of registrations) {
+                if (registration.scope !== document.location.origin + "/") {
+                    registration.unregister();
                 }
-                await papyros.launch();
-
-                papyros.codeRunner.editor.reconfigure([CodeEditor.STYLE, syntaxHighlighting(rougeStyle, {
-                    fallback: true
-                })]);
             }
         });
-        // Ask user to choose after offcanvas is shown
-        document.getElementById(OFFCANVAS_ID).addEventListener("shown.bs.offcanvas", () => {
-            editor ||= window.dodona.editor;
-            if (editor) { // Start with code from the editor, if there is any
-                const editorCode = editor.state.doc.toString();
-                const currentCode = papyros.getCode();
-                if (!currentCode || // Papyros empty
-                    // Neither code areas are empty, but they differ
-                    (editorCode && currentCode !== editorCode &&
-                        // and user chooses to overwrite current code with editor value
-                        confirm(i18n.t("js.coding_scratchpad.overwrite_code")))) {
-                    papyros.setCode(editorCode);
+
+        papyros = new Papyros(
+            {
+                programmingLanguage: Papyros.toProgrammingLanguage(programmingLanguage),
+                standAlone: false,
+                locale: i18n.locale(),
+                inputMode: InputMode.Interactive,
+                channelOptions: {
+                    root: "/",
+                    serviceWorkerName: "inputServiceWorker.js"
                 }
-            }
+            });
+
+        // Render once new button is added
+        papyros.render({
+            codeEditorOptions: {
+                parentElementId: CODE_EDITOR_PARENT_ID
+            },
+            statusPanelOptions: {
+                parentElementId: PANEL_PARENT_ID
+            },
+            outputOptions: {
+                parentElementId: CODE_OUTPUT_PARENT_ID
+            },
+            inputOptions: {
+                parentElementId: CODE_INPUT_PARENT_ID,
+                inputStyling: {
+                    // Allows 4 lines of input
+                    maxHeight: "10vh"
+                }
+            },
+            traceOptions: {
+                parentElementId: CODE_TRACE_PARENT_ID
+            },
+            darkMode: themeState.theme === "dark"
         });
+        editor ||= window.dodona.editor;
+        if (editor) {
+            // Shortcut to copy code to editor
+            papyros.addButton(
+                {
+                    id: CODE_COPY_BUTTON_ID,
+                    buttonText: i18n.t("js.coding_scratchpad.copy_to_submit"),
+                    classNames: "btn-secondary",
+                    icon: "<i class=\"mdi mdi-clipboard-arrow-left-outline\"></i>"
+                },
+                () => {
+                    setCode(editor, papyros.getCode());
+                    const closeButton = document.getElementById(CLOSE_BUTTON_ID);
+                    closeButton.click();
+                    // Open submit panel if possible
+                    document.getElementById(SUBMIT_TAB_ID)?.click();
+                }
+            );
+        }
+        await papyros.launch();
+
+        papyros.codeRunner.editor.reconfigure([CodeEditor.STYLE, syntaxHighlighting(rougeStyle, {
+            fallback: true
+        })]);
 
         // Hide Trace tab when a new run is started
         BackendManager.subscribe(BackendEventType.Start, () => {
@@ -142,6 +119,32 @@
             }
         });
     }
+    return papyros;
+}
+
+function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
+    if (Papyros.supportsProgrammingLanguage(programmingLanguage)) {
+        // To prevent horizontal scrollbar issues, we delay rendering the button
+        // until after the page is loaded
+        const showButton = document.getElementById(SHOW_OFFCANVAS_BUTTON_ID);
+        showButton.classList.add("offcanvas-show-btn");
+        showButton.classList.remove("hidden");
+        showButton.addEventListener("click", () => {
+            initPapyros(programmingLanguage);
+            editor ||= window.dodona.editor;
+            if (editor) { // Start with code from the editor, if there is any
+                const editorCode = editor.state.doc.toString();
+                const currentCode = papyros.getCode();
+                if (!currentCode || // Papyros empty
+                    // Neither code areas are empty, but they differ
+                    (editorCode && currentCode !== editorCode &&
+                        // and user chooses to overwrite current code with editor value
+                        confirm(i18n.t("js.coding_scratchpad.overwrite_code")))) {
+                    papyros.setCode(editorCode);
+                }
+            }
+        });
+    }
 }
 
 export { initCodingScratchpad };

app/assets/javascripts/i18n/translations.json

@@ -427,7 +427,6 @@
       "timeseries_desc": "This graph shows on which moments the students submitted the most solutions.",
       "timeseries_title": "Submissions over time",
       "total": "total",
-      "tutor-failed": "Something went wrong while loading the online python tutor",
       "unfavorite-course-do": "Unfavorite",
       "unfavorite-course-failed": "Unfavoriting course failed",
       "unfavorite-course-succeeded": "Unfavorited course",
@@ -953,7 +952,6 @@
       "timeseries_desc": "Deze grafiek toont op welke momenten het meest aan een bepaalde oefening werd gewerkt.",
       "timeseries_title": "Ingediende oplossingen over tijd",
       "total": "totaal aantal",
-      "tutor-failed": "Er ging iets fout bij het laden van de online python tutor",
       "unfavorite-course-do": "Verwijder uit favorieten",
       "unfavorite-course-failed": "Cursus uit favorieten verwijderen mislukt",
       "unfavorite-course-succeeded": "Cursus verwijderd uit favorieten",

app/assets/javascripts/modal.ts

@@ -2,15 +2,7 @@
 import { render, TemplateResult } from "lit";
 
 
-function showInfoModal(title: TemplateResult | string, content: TemplateResult | string, options?: {allowFullscreen: boolean}): void {
-    const button = document.querySelector("#info-modal .modal-header #fullscreen-button") as HTMLElement;
-
-    if (options?.allowFullscreen) {
-        button.style.display = "inline";
-    } else {
-        button.style.display = "none";
-    }
-
+function showInfoModal(title: TemplateResult | string, content: TemplateResult | string): void {
     render(title, document.querySelector("#info-modal .modal-title") as HTMLElement);
     render(content, document.querySelector("#info-modal .modal-body") as HTMLElement);
 

app/assets/javascripts/tutor.ts

@@ -1,21 +1,12 @@
-import fscreen from "fscreen";
-import { showInfoModal } from "modal";
-import { html } from "lit";
-import { TraceGenerator } from "@dodona/pyodide-trace-library";
+import { initPapyros, OFFCANVAS_ID } from "coding_scratchpad";
+import { InputMode, ProgrammingLanguage } from "@dodona/papyros";
+import { BatchInputHandler } from "@dodona/papyros/dist/input/BatchInputHandler";
+import { Offcanvas } from "bootstrap";
+const DEBUG_BUTTON_ID = "__papyros-debug-code-btn";
 
 export function initTutor(submissionCode: string): void {
-    let traceGenerator: TraceGenerator;
-    let traceGeneratorReady: Promise<void>;
     function init(): void {
         initTutorLinks();
-        if (document.querySelectorAll(".tutormodal").length == 1) {
-            initFullScreen();
-        } else {
-            const tutorModal = Array.from(document.querySelectorAll(".tutormodal")).pop();
-            if (tutorModal) {
-                tutorModal.remove();
-            }
-        }
     }
 
     function initTutorLinks(): void {
@@ -32,7 +23,7 @@
             const exerciseId = (document.querySelector(".feedback-table") as HTMLElement).dataset.exercise_id;
             const tutorLink = e.currentTarget as HTMLLinkElement;
             const group = tutorLink.closest(".group");
-            const stdin = tutorLink.dataset.stdin.slice(0, -1);
+            const stdin = tutorLink.dataset.stdin;
             const statements = tutorLink.dataset.statements;
             const files = { inline: {}, href: {} };
 
@@ -55,105 +46,24 @@
         }));
     }
 
-    function initFullScreen(): void {
-        fscreen.addEventListener("fullscreenchange", resizeFullScreen);
-
-        document.querySelector("#tutor #fullscreen-button").addEventListener("click", () => {
-            const tutor = document.querySelector("#tutor");
-            if (fscreen.fullscreenElement) {
-                document.querySelector("#tutor .modal-dialog").classList.remove("modal-fullscreen");
-                fscreen.exitFullscreen();
-            } else {
-                document.querySelector("#tutor .modal-dialog").classList.add("modal-fullscreen");
-                fscreen.requestFullscreen(tutor);
-            }
-        });
-    }
-
-    function resizeFullScreen(): void {
-        const tutor = document.querySelector("#tutor");
-        const tutorviz = document.querySelector("#tutorviz") as HTMLElement;
-        if (!fscreen.fullscreenElement) {
-            tutor.classList.remove("fullscreen");
-            tutorviz.style.height = tutorviz.dataset.standardheight;
-        } else {
-            tutorviz.dataset.standardheight = `${tutorviz.clientHeight}px`;
-            tutor.classList.add("fullscreen");
-            tutorviz.style.height = "100%";
-        }
-    }
-
     async function loadTutor(exerciseId: string, studentCode: string, statements: string, stdin: string, inlineFiles: Record<string, string>, hrefFiles: Record<string, string>): Promise<void> {
-        if (!traceGenerator) {
-            // only setup the traceGenerator upon first use, as it is a heavy operation
-            traceGenerator = new TraceGenerator();
-            traceGeneratorReady = traceGenerator.setup();
-        }
+        const papyros = await initPapyros(ProgrammingLanguage.Python);
 
-        const lines = studentCode.split("\n");
-        // find and remove main
-        let i = 0;
-        let remove = false;
-        const sourceArray = [];
-        while (i < lines.length) {
-            if (remove && !lines[i].match(/^\s+.*/g)) {
-                remove = false;
-            }
-            if (lines[i].match(/if\s+__name__\s*==\s*(['"])__main__\s*\1:\s*/g)) {
-                remove = true;
-            }
-            if (!remove) {
-                sourceArray.push(lines[i]);
-            }
-            i += 1;
-        }
-        sourceArray.push(statements);
-        const sourceCode = sourceArray.join("\n");
+        papyros.setCode(studentCode);
+        papyros.codeRunner.inputManager.setInputMode(InputMode.Batch);
+        (papyros.codeRunner.inputManager.inputHandler as BatchInputHandler).batchEditor.setText(stdin);
+        papyros.codeRunner.editor.testCode = statements;
 
         // make full url from path
         const hrefFilesFull = Object.keys(hrefFiles).reduce((result, key) => {
             result[key] = `${location.protocol}//${location.hostname}${location.port ? `:${location.port}` : ""}/nl/exercises/${exerciseId}/${hrefFiles[key]}`;
             return result;
         }, {});
 
-        showInfoModal("Python Tutor", html`<div id="tutorcontent"></div>`, { allowFullscreen: true });
-        const modalShown = new Promise<void>(resolve => {
-            const modal = document.querySelector("#tutor #info-modal");
-            modal.addEventListener("shown.bs.modal", () => resolve());
-        });
-
-        const content = document.querySelector("#tutorcontent");
-        if (content) {
-            content.innerHTML = `<div class="dodona-progress dodona-progress-indeterminate" style="visibility: visible">
-            <div class="progressbar bar bar1" style="width: 0%;"></div>
-            <div class="bufferbar bar bar2" style="width: 100%;"></div>
-            <div class="auxbar bar bar3" style="width: 0%;"></div>
-        </div>`;
-        }
-
-        await traceGeneratorReady;
-        const result = await traceGenerator.generateTrace(sourceCode, stdin, inlineFiles, hrefFilesFull);
-        await modalShown;
-        createTutor(result);
-    }
-
-    function createTutor(codeTrace: string): void {
-        const modal = document.querySelector("#tutor #info-modal");
-
-        const content = document.querySelector("#tutorcontent");
-        if (content) {
-            content.innerHTML = `<iframe id="tutorviz" width="100%" frameBorder="0" src="${window.dodona.sandboxUrl}/tutorviz/tutorviz.html"></iframe>`;
-            document.querySelector("#tutorviz").addEventListener("load", () => {
-                window.iFrameResize({ checkOrigin: false, onInit: frame => frame.iFrameResizer.sendMessage(JSON.parse(codeTrace)), scrolling: "omit" }, "#tutorviz");
-            });
-        }
+        new Offcanvas(document.getElementById(OFFCANVAS_ID)).show();
+        await papyros.codeRunner.provideFiles(inlineFiles, hrefFilesFull);
 
-        modal.addEventListener("hidden.bs.modal", () => {
-            if (fscreen.fullscreenElement) {
-                document.querySelector("#tutor .modal-dialog").classList.remove("modal-fullscreen");
-                fscreen.exitFullscreen();
-            }
-        });
+        document.getElementById(DEBUG_BUTTON_ID).click();
     }
 
     init();