Switch diff viewers to single viewer

Render the diff viewers for a submission as if it was a single IDE, in
which you can select the submission to diff against. We move the button
interface out of the tabs and create functions to update the state of
individual enditors.

Author: Kevinjil

webapp/public/js/domjudge.js

@@ -1290,3 +1290,170 @@ function initScoreboardSubmissions() {
         });
     });
 }
+
+const editors = [];
+function initDiffEditor(editorId) {
+    const wrapper = $(`#${editorId}-wrapper`);
+
+    // TODO: store and restore tag preference in local storage.
+    const initialSelect = "";
+    const select = wrapper.find(".diff-select");
+    select[0].selectedIndex = 0;
+
+    const initialDiffMode = getDiffMode();
+    const radios = wrapper.find(`.diff-mode > input[type='radio']`);
+    radios.each((_, radio) => {
+        radio.checked = radio.value === initialDiffMode
+    });
+
+    const download = wrapper.find(".download")[0];
+    const edit = wrapper.find(".edit")[0];
+    const updateTabRank = (rank) => {
+        if (rank) {
+            let url = new URL(download.href);
+            url.searchParams.set("fetch", rank);
+            download.href = url;
+
+            url = new URL(edit.href);
+            url.searchParams.set("rank", rank);
+            edit.href = url;
+        } else {
+            download.href = "#";
+            edit.href = "#";
+        }
+    };
+    wrapper.find(".nav").on('show.bs.tab', (e) => {
+        updateTabRank(e.target.dataset.rank);
+    })
+
+    const editor = {
+        'getDiffMode': () => {
+            for (let radio of radios) {
+                if (radio.checked) {
+                    return radio.value;
+                }
+            }
+        },
+        'getDiffSelection': () => {
+            let s = select[0];
+            return s.options[s.selectedIndex].value;
+        },
+        'updateIcon': (rank, icon) => {
+            const element = wrapper.find(".nav-link[data-rank]")[rank].querySelector('.fa-fw');
+            element.className = 'fas fa-fw fa-' + icon;
+        },
+        'onDiffModeChange': (f) => {
+            radios.change((e) => {
+                const diffMode = e.target.value;
+                f(diffMode);
+            });
+        },
+        'onDiffSelectChange': (f) => {
+            select.change((e) => {
+                const submitId = e.target.value;
+                const noDiff = submitId === "";
+                f(submitId, noDiff);
+            });
+        }
+    };
+    editors[editorId] = editor;
+
+    const updateMode = (diffMode) => {
+        setDiffMode(diffMode);
+    };
+    updateMode(initialDiffMode);
+    editor.onDiffModeChange(updateMode);
+
+    const updateSelect = (submitId, noDiff) => {
+        radios.each((_, radio) => {
+            radio.disabled = noDiff;
+        });
+        // TODO: add tab panes for deleted source files.
+    };
+    updateSelect("", true);
+    editor.onDiffSelectChange(updateSelect);
+}
+
+function initDiffEditorTab(editorId, diffId, rank, models, modifiedModel) {
+    const empty = monaco.editor.getModel(monaco.Uri.file("empty")) ?? monaco.editor.createModel("", undefined, monaco.Uri.file("empty"));
+
+    const diffEditor = monaco.editor.createDiffEditor(
+        document.getElementById(diffId), {
+        scrollbar: {
+            alwaysConsumeMouseWheel: false,
+            vertical: 'auto',
+            horizontal: 'auto'
+        },
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        readOnly: true,
+        theme: getCurrentEditorTheme(),
+    });
+
+    const updateSelect = (submitId, noDiff) => {
+        if (!noDiff) {
+            const model = models[submitId];
+            if (model === undefined) {
+                models[submitId] = {'model': empty};
+            } else if (model !== undefined && !model['model']) {
+                // TODO: show source code instead of diff to empty file?
+                model['model'] = monaco.editor.createModel(model['source'], undefined, monaco.Uri.file("test/" + submitId + "/" + model['filename']));
+            }
+        }
+
+        diffEditor.updateOptions({
+            renderOverviewRuler: !noDiff,
+        });
+        if (noDiff) {
+            diffEditor.updateOptions({
+                renderSideBySide: false,
+            });
+        } else {
+            // Reset the diff mode to the currently selected mode.
+            updateMode(editors[editorId].getDiffMode())
+        }
+        // TODO: handle single-file submission case with renamed file.
+        const oldViewState = diffEditor.saveViewState();
+        diffEditor.setModel({
+            original: noDiff ? modifiedModel : models[submitId]['model'],
+            modified: modifiedModel,
+        });
+        diffEditor.restoreViewState(oldViewState);
+
+        diffEditor.getOriginalEditor().updateOptions({
+            lineNumbers: !noDiff,
+        });
+        diffEditor.getModifiedEditor().updateOptions({
+            minimap: {
+                enabled: noDiff,
+            },
+        })
+    };
+    editors[editorId].onDiffSelectChange(updateSelect);
+    updateSelect("", true);
+
+    const updateIcon = () => {
+        const noDiff = editors[editorId].getDiffSelection() === "";
+        if (noDiff) {
+            editors[editorId].updateIcon(rank, 'file');
+            return;
+        }
+
+        const lineChanges = diffEditor.getLineChanges();
+        if (diffEditor.getModel().original == empty) {
+            editors[editorId].updateIcon(rank, 'file-circle-plus');
+        } else if (lineChanges !== null && lineChanges.length > 0) {
+            editors[editorId].updateIcon(rank, 'file-circle-exclamation');
+        } else {
+            editors[editorId].updateIcon(rank, 'file-circle-check');
+        }
+    }
+    diffEditor.onDidUpdateDiff(updateIcon);
+
+    const updateMode = (diffMode) => {
+        diffEditor.updateOptions({
+            renderSideBySide: diffMode === 'side-by-side',
+        });
+    };
+    editors[editorId].onDiffModeChange(updateMode);
+}

webapp/src/Controller/Jury/SubmissionController.php

@@ -907,10 +907,6 @@ public function sourceAction(
             $otherFiles[$submitId][] = $f;
         }
 
-        foreach ($otherFiles as $s => $v) {
-            $otherFiles[$s] = $this->determineFileChanged($files, $v);
-        }
-
         return $this->render('jury/submission_source.html.twig', [
             'submission' => $submission,
             'files' => $files,

webapp/src/Twig/TwigExtension.php

@@ -34,6 +34,7 @@
 use Symfony\Component\Routing\RouterInterface;
 use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
 use Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface;
+use Symfony\Component\Serializer\SerializerInterface;
 use Twig\Environment;
 use Twig\Extension\AbstractExtension;
 use Twig\Extension\GlobalsInterface;
@@ -57,6 +58,7 @@ public function __construct(
         protected readonly TokenStorageInterface $tokenStorage,
         protected readonly AuthorizationCheckerInterface $authorizationChecker,
         protected readonly RouterInterface $router,
+        protected readonly SerializerInterface $serializer,
         #[Autowire('%kernel.project_dir%')]
         protected readonly string $projectDir,
         protected array $renderedSources = []
@@ -177,7 +179,6 @@ public function getGlobals(): array
                 'hc-black'                  => ['name' => 'High contrast (dark)'],
             ],
             'diff_modes'                    => [
-                'no-diff'                   => ["name"  => "No diff"],
                 'side-by-side'              => ["name"  => "Side-by-side"],
                 'inline'                    => ["name"  => "Inline"],
             ],
@@ -954,71 +955,44 @@ public function getMonacoModel(SubmissionFile $file): string
         );
     }
 
-    public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
+    /** @param array<int, SubmissionFile[]> $otherFiles */
+    public function showDiff(string $editorId, string $diffId, SubmissionFile $newFile, array $otherFiles): string
     {
         $editor = <<<HTML
-<div class="editor" id="__EDITOR__"></div>
+<div class="editor" id="$diffId"></div>
 <script>
 $(function() {
-    require(['vs/editor/editor.main'], function () {
-        const originalModel = %s
-        const modifiedModel = %s
-
-        const initialDiffMode = getDiffMode();
-        const radios = $("#diffselect-__EDITOR__ > input[name='__EDITOR__-mode']");
-        radios.each((_, radio) => {
-            $(radio).prop('checked', radio.value === initialDiffMode);
-        });
-
-        const diffEditor = monaco.editor.createDiffEditor(
-            document.getElementById("__EDITOR__"), {
-            scrollbar: {
-                alwaysConsumeMouseWheel: false,
-                vertical: 'auto',
-                horizontal: 'auto'
-            },
-            scrollBeyondLastLine: false,
-            automaticLayout: true,
-            readOnly: true,
-            theme: getCurrentEditorTheme(),
-        });
-
-        const updateMode = (diffMode) => {
-            setDiffMode(diffMode);
-            const noDiff = diffMode === 'no-diff';
-            diffEditor.updateOptions({
-                renderOverviewRuler: !noDiff,
-                renderSideBySide: diffMode === 'side-by-side',
-            });
-
-            const oldViewState = diffEditor.saveViewState();
-            diffEditor.setModel({
-                original: noDiff ? modifiedModel : originalModel,
-                modified: modifiedModel,
-            });
-            diffEditor.restoreViewState(oldViewState);
-
-            diffEditor.getOriginalEditor().updateOptions({
-                lineNumbers: !noDiff,
-            });
-            diffEditor.getModifiedEditor().updateOptions({
-                minimap: {
-                    enabled: noDiff,
-                },
-            })
-        };
-        radios.change((e) => {
-            updateMode(e.target.value);
-        });
-        updateMode(initialDiffMode);
+    const editorId = '%s';
+    const diffId = '%s';
+    const rank = %d;
+    const models = %s;
+    require(['vs/editor/editor.main'], () => {
+        const modifiedModel = %s;
+        initDiffEditorTab(editorId, diffId, rank, models, modifiedModel)
     });
 });
 </script>
 HTML;
 
+        $others = [];
+        foreach ($otherFiles as $submissionId => $files) {
+            foreach ($files as $f) {
+                if ($f->getFilename() == $newFile->getFilename()) {
+                    // TODO: add `tag` containing `previous` / `original`
+                    $others[$submissionId] = [
+                        'filename' => $f->getFilename(),
+                        'source'   => $f->getSourcecode(),
+                    ];
+                }
+            }
+        }
+
         return sprintf(
-            str_replace('__EDITOR__', $id, $editor),
-            $this->getMonacoModel($oldFile),
+            $editor,
+            $editorId,
+            $diffId,
+            $newFile->getRank(),
+            $this->serializer->serialize($others, 'json'),
             $this->getMonacoModel($newFile),
         );
     }