Simplify and clean up submission page.

This organizes the flow of information to change the focus on the important things.
meisterT · Apr 7, 2024 · 47fc9b0 · 47fc9b0
1 parent 93f05c3
commit 47fc9b0
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 219 deletions.
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
@@ -215,26 +215,31 @@ public function printtime(string|float|null $datetime, ?string $format = null, ?
         }
     }
 
-    public function printHumanTimeDiff(float|null $datetime): string
+    public function printHumanTimeDiff(float|null $startTime, float|null $endTime): string
     {
-        if ($datetime === null) {
+        if ($startTime === null) {
             return '';
         }
-        $diff = Utils::now() - $datetime;
+        $suffix = '';
+        if ($endTime === null) {
+            $suffix = ' ago';
+            $endTime = Utils::now();
+        }
+        $diff = $endTime - $startTime;
 
         if ($diff < 120) {
-            return (int)($diff) . ' seconds ago';
+            return (int)($diff) . ' seconds' . $suffix;
         }
         $diff /= 60;
         if ($diff < 120) {
-            return (int)($diff) . ' minutes ago';
+            return (int)($diff) . ' minutes' . $suffix;
         }
         $diff /= 60;
         if ($diff < 48) {
-            return (int)($diff) . ' hours ago';
+            return (int)($diff) . ' hours' . $suffix;
         }
         $diff /= 24;
-        return (int)($diff) . ' days ago';
+        return (int)($diff) . ' days' . $suffix;
     }
 
     /**
@@ -438,7 +443,7 @@ public function displayTestcaseResults(array $testcases, bool $submissionDone, b
         $lastTypeSample = true;
         foreach ($testcases as $testcase) {
             if ($testcase->getSample() != $lastTypeSample) {
-                $results        .= ' | ';
+                $results        .= ' <strong>|</strong> ';
                 $lastTypeSample = $testcase->getSample();
             }
 
@@ -662,6 +667,7 @@ private function getCommonPrefix(array $strings): string
      */
     public function printHosts(array $hostnames): string
     {
+        $hostnames = array_values($hostnames);
         if (empty($hostnames)) {
             return "";
         }

diff --git a/webapp/templates/jury/analysis/download_graphs.html.twig b/webapp/templates/jury/analysis/download_graphs.html.twig
@@ -48,7 +48,7 @@
 
     $(function () {
         $('.container-fluid svg').each(function () {
-            var $button = $('<button class="btn btn-sm btn-outline-secondary" style="margin-left: 8px;"><i class="fas fa-download"></i> SVG</button>');
+            var $button = $('<button class="btn btn-sm btn-outline-secondary" style="margin-left: 8px; float:right;"><i class="fas fa-download"></i> SVG</button>');
             var $svg = $(this);
 
             // Pick a good place for the button, on the submission page next to

diff --git a/webapp/templates/jury/partials/submission_graph.html.twig b/webapp/templates/jury/partials/submission_graph.html.twig
@@ -1,21 +1,43 @@
 {% set timelimit = submission.problem.timelimit * submission.language.timeFactor %}
 <div>
     {% if selectedJudging is not null %}
-        <div style="display: inline-block" id="testcaseruntime">
-            <h3 id="graphs">Testcase Runtimes</h3>
+        <div class="card" style="display: inline-block" id="testcaseruntime">
+            <div class="card-header">
+                <span id="graphs" style="font-weight: bold;">testcase CPU times
+                    <span style="font-weight: normal;">
+                            {%- if selectedJudging is not null and selectedJudging.result != 'compiler-error' -%}
+                                | max:
+                                {{ selectedJudging.maxRuntime | number_format(3, '.', '') }}s
+                                | sum: {{ selectedJudging.sumRuntime | number_format(3, '.', '') }}s
+                            {% endif %}
+                    </span>
+                </span>
+            </div>
+            <div class="card-body">
             <svg style="width:500px; height:250px;"></svg>
+            </div>
         </div>
     {% endif %}
     {% if externalJudgement is not null and externalJudgement.result is not null %}
-        <div style="display: inline-block" id="externalruntime">
-            <h3 id="graphs">External Testcase Runtimes</h3>
-            <svg style="width:500px; height:250px;"></svg>
+        <div class="card" style="display: inline-block" id="externalruntime">
+            <div class="card-header">
+                <span id="graphs" style="font-weight: bold;">External Testcase CPU times</span>
+            </div>
+            <div class="card-body">
+                <svg style="width:500px; height:250px;"></svg>
+            </div>
         </div>
     {% endif %}
     {% if judgings|length > 1 %}
-        <div style="display: inline-block" id="maxruntime">
-            <h3 id="graphs">Max Runtimes</h3>
-            <svg style="width:500px; height:250px;"></svg>
+        <div class="card" style="display: inline-block" id="maxruntime">
+            <div class="card" style="display: inline-block" id="externalruntime">
+                <div class="card-header">
+                    <span id="graphs" style="font-weight: bold;">Max. CPU times</span>
+                </div>
+                <div class="card-body">
+                    <svg style="width:500px; height:250px;"></svg>
+                </div>
+            </div>
         </div>
     {% endif %}
 </div>
@@ -59,7 +81,7 @@
         }
         chart.yAxis
             .tickValues(tickValues)
-            .axisLabel('Runtime');
+            .axisLabel('CPU time');
         if (tickStep >= 1) {
             chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d) + 's' });
         } else {
@@ -145,7 +167,7 @@
                 var format = d3.format(".3f");
                 return "<b>Testcase " + obj.data.description + "</b><br><b>Runtime:</b> " + format(obj.data.value) + "s";
             });
-            chart.xAxis.axisLabel("Testcase Rank");
+            chart.xAxis.axisLabel("testcase rank");
             d3.select('#testcaseruntime svg')
                 .datum(testcase_times)
                 .call(chart);

diff --git a/webapp/templates/jury/partials/verify_form.html.twig b/webapp/templates/jury/partials/verify_form.html.twig
@@ -3,7 +3,9 @@
 
     {# Display verification data: verified, by whom, and comment #}
     <p>
-        {{ label }}: <strong>{% if judging.verified %}yes{% else %}no{% endif %}</strong>
+        {% if judging.verified %}
+        {{ label }}: <strong>yes</strong>
+        {% endif %}
         {%- if judging.verified and judging.juryMember is not empty -%}
             , by {{ judging.juryMember }}
             {%- if judging.verifyComment is not empty %}