Add filename, line number, better collapsibility to annotations

Gemfile.lock

@@ -210,14 +210,14 @@ GEM
     net-ldap (0.17.1)
     newrelic_rpm (8.8.0)
     nio4r (2.5.8)
-    nokogiri (1.13.6)
+    nokogiri (1.13.9)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.6-arm64-darwin)
+    nokogiri (1.13.9-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.6-x86_64-darwin)
+    nokogiri (1.13.9-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.6-x86_64-linux)
+    nokogiri (1.13.9-x86_64-linux)
       racc (~> 1.4)
     oauth2 (1.4.10)
       faraday (>= 0.17.3, < 3.0)

app/assets/javascripts/annotations.js

@@ -2,8 +2,7 @@
 
 $(document).ready(function () {
   $('.skip-main').remove(); // removes skip main anchor tag
-  $(".collapsible-body").show(); //expands all collapsible initially
-  $('.collapsible').collapsible();
+  $('.collapsible').collapsible({ accordion: false });
   //get line number in URL, if it exists
   var urlParams = new URLSearchParams(location.search);
 
@@ -138,93 +137,12 @@ function plusFix(n) {
 
 // function called after create, update & delete of annotations
 function fillAnnotationBox() {
-
   retrieveSharedComments();
-
-  var annotationsByProblem = {}
-  $(".collapsible.expandable").find('li').remove();
-  for (var i = 0; i < annotations.length; i++) {
-    var problem = getProblemNameWithId(annotations[i].problem_id)
-    if (!annotationsByProblem[problem]) {
-      annotationsByProblem[problem] = []
-    }
-    annotations[i].problem = problem;
-    annotationsByProblem[problem].push(annotations[i]);
-  }
-
-  for (var problem in annotationsByProblem) {
-    var problemElement = $("#li-problem-" + problem);
-    var score = 0;
-    for (var i = 0; i < annotationsByProblem[problem].length; i++) {
-      var annotation = annotationsByProblem[problem][i];
-      var points = parseFloat(annotation.value);
-      if (isNaN(points)) points = 0;
-      score += points;
-    }
-
-    var annotationsSummary = $(".annotationSummary");
-
-    if (problemElement) {
-      problemElement.remove();
-    }
-
-    var newLi = $("<li />");
-    newLi.addClass('active');
-    annotationsSummary.find("ul").append(newLi)
-    newLi.attr("id", "li-problem-" + problem);
-    var collapsible = $('<div />');
-    collapsible.addClass('collapsible-header');
-    collapsible.addClass('active');
-    collapsible.append(
-      '<h4 style="text-transform:capitalize;">' + problem + '<div class="summary_score">' + plusFix(score) + '</div>' +
-      '</h4>'
-    )
-    newLi.append(collapsible);
-
-    var listing = $('<div />');
-    newLi.append(listing);
-    listing.addClass("collapsible-body");
-    listing.addClass("active");
-    listing.css('display', 'block');
-
-    // sorts the annotation by line order
-    annotationsByProblem[problem].sort(function (annotation1, annotation2) { return annotation1.line - annotation2.line });
-    for (var i = 0; i < annotationsByProblem[problem].length; i++) {
-      var annotation = annotationsByProblem[problem][i];
-
-      var annotationElement = $('<div />');
-      annotationElement.addClass('descript');
-      annotationElement.attr('id', 'li-annotation-' + annotation.id);
-
-      var pos = annotation.position ? annotation.position : 0;
-      var line = annotation.line + 1;
-      var link = $('<a />');
-      link.addClass('descript-link');
-      link.attr('data-header_position', pos);
-      link.attr('data-line', line);
-      link.attr('data-remote', true);
-      link.attr('href', `./view?header_position=${pos}&line=${line}`);
-
-      var pointBadge = $('<span />');
-      pointBadge.addClass('point_badge');
-      if (annotation.value > 0) {
-        pointBadge.addClass('positive');
-      } else if (annotation.value < 0) {
-        pointBadge.addClass('negative');
-      } else {
-        pointBadge.addClass('neutral');
-      }
-      pointBadge.text(plusFix(annotation.value));
-      link.append(pointBadge);
-      link.append(annotation.comment);
-      annotationElement.append(link);
-      listing.append(annotationElement);
-
-      attachChangeFileEvents();
-    }
-  }
-  // Reloads the grades part upon update
   $('.problemGrades').load(document.URL + ' .problemGrades');
+  $('#annotationPane').load(document.URL + ' #annotationPane', function() {
+    $('.collapsible').collapsible({ accordion: false });
+    attachChangeFileEvents();
+  });
 }
 
 // Sets up the keybindings
@@ -534,11 +452,16 @@ function newAnnotationFormCode() {
     var problem_id = $(this).find(".problem-id").val();
     var line = $(this).parent().parent().data("lineId");
 
-    if (comment == undefined || comment == "") {
+    if (comment === undefined || comment === "") {
       box.find('.error').text("Annotation comment can not be blank!").show();
       return;
     }
 
+    if (score === undefined || score === "") {
+      box.find('.error').text("Annotation score can not be blank!").show();
+      return;
+    }
+
     if (problem_id == undefined) {
       if ($('.select').children('option').length > 0)
         box.find('.error').text("Problem not selected").show();
@@ -587,15 +510,20 @@ function initializeBoxForm(box, annotation) {
   box.find('.annotation-form').submit(function (e) {
     e.preventDefault();
     var comment = $(this).find(".comment").val();
+    var shared_comment = $(this).find("#shared-comment").is(":checked");
     var score = $(this).find(".score").val();
     var problem_id = $(this).find(".problem-id").val();
-    var shared_comment = $(this).find("#shared-comment").is(":checked");
 
-    if (comment == undefined || comment == "") {
+    if (comment === undefined || comment === "") {
       box.find('.error').text("Annotation comment can not be blank!").show();
       return;
     }
 
+    if (score === undefined || score === "") {
+      box.find('.error').text("Annotation score can not be blank!").show();
+      return;
+    }
+
     var annotationObject = getAnnotationObject(box.data('annotationId'));
     annotationObject.comment = comment;
     annotationObject.value = score;
@@ -619,9 +547,9 @@ function newAnnotationBox(annotation) {
   var shared_comment = annotation.shared_comment;
 
   if (annotation.value < 0) {
-    box.find('.value').parent().removeClass('positive').addClass('negative');
-  } else if (!annotation.value > 0) { // I am a little hesitant about using == 1 here -> what if it's negative 0?
-    box.find('.value').parent().removeClass('positive').addClass('neutral');
+    box.find('.value').parent().removeClass('neutral').addClass('negative');
+  } else if (annotation.value > 0) {
+    box.find('.value').parent().removeClass('neutral').addClass('positive');
   }
 
   box.find('.submitted_by').text(annotation.submitted_by);

app/assets/javascripts/init_handin_datetimepickers.js

@@ -7,6 +7,7 @@ $(document).ready(function() {
     var defaults = {
       enableTime: true,
       altInput: true,
+      disableMobile: true,
       defaultDate: moment(elt.val(), elt.data("date-format")).toDate(),
       parseDate: (datestr, format) => {
         return moment(datestr, format, true).toDate();

app/assets/javascripts/initialize_datetimepickers.js

@@ -13,6 +13,7 @@
       $(datetimeElts[i]).flatpickr({
         enableTime: true,
         altInput: true,
+        disableMobile: true,
         defaultDate: defaultDate,
         formatDate: (date, format) => {
           return moment(date).format(format);
@@ -34,6 +35,7 @@
       $(dateElts[i]).flatpickr({
         altInput: true,
         defaultDate: defaultDate,
+        disableMobile: true
       })
     }
   });

app/assets/stylesheets/annotations.css

@@ -538,22 +538,42 @@
   border: none;
   padding: 5px;
   padding-left: 10px;
+  user-select: none;
 }
 
 .annotationSummary .collapsible-header h4{
   margin: 3px;
   font-size: 1.1em;
 }
 
-.annotationSummary .collapsible-header .dropdown-arrow{
-
-}
-
 .annotationSummary .collapsible-body{
   padding: 0 1rem;
   border: none;
 }
 
+.annotationSummary .collapsible-body .file_annotations {
+  margin-bottom: 10px;
+}
+
+.annotationSummary .collapsible {
+  overflow: auto;
+}
+
+/* Annotations collapsible icons */
+
+.annotationSummary .collapsible i.expand-icon,
+.annotationSummary .collapsible i.collapse-icon {
+  font-size: 2rem;
+}
+
+.annotationSummary .collapsible li.active i.expand-icon {
+  display: none;
+}
+
+.annotationSummary .collapsible li:not(.active) i.collapse-icon {
+  display: none;
+}
+
 .annotationSummary .summary_score {
   float: right;
   font-weight: normal;
@@ -575,6 +595,15 @@
   background: #818181;
 }
 
+.annotationSummary .line_number {
+  background: #818181;
+  margin-left: -8px;
+  border-top-left-radius: 100vw;
+  padding-left: 8px;
+  padding-right: 3px;
+  border-bottom-left-radius: 100vw;
+}
+
 .annotation-comment {
   margin-bottom:0;
   padding-bottom:0 !important;
@@ -788,10 +817,6 @@
     opacity: 0;
   }
 }
-.collapsible {
-  max-height: 50vh;
-  overflow: auto;
-}
 
 .descript {
   cursor: pointer;

app/assets/stylesheets/style.css.scss

@@ -1347,10 +1347,34 @@ a.skip-main:active {
   font-size: 1em;
   z-index: 999;
 }
+
+// used in submission_history_table.html.erb
 table.sub {
-  display: block;
-  overflow-x: scroll;
+  display: table;
 }
-.sub th{
+
+.sub th {
   vertical-align: top;
 }
+
+.submissions {
+  overflow-x: scroll;
+}
+
+.submission-history-button {
+  white-space: nowrap;
+  text-transform: unset !important;
+  font-size: 13px;
+  width: 100%;
+  border-radius: 5px;
+  color: #0882af;
+  box-shadow: 0px -0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
+              0px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.15),
+              0px 0.5px 0.5px -0.5px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: center;
+}
+
+.submission-history-button:hover {
+  color: white !important;
+}

app/controllers/annotations_controller.rb

@@ -34,6 +34,10 @@ def update
     tweaked_params.delete(:submission_id)
     tweaked_params.delete(:filename)
     ActiveRecord::Base.transaction do
+      # Remove effect of annotation to handle updating annotation problem
+      @annotation.update({ "value" => "0" })
+      @annotation.update_non_autograded_score
+
       @annotation.update(tweaked_params)
       @annotation.update_non_autograded_score
     end

app/controllers/submissions_controller.rb

@@ -455,9 +455,9 @@ def view
       @annotations = []
     end
 
-    if Archive.archive? @filename
-      files = Archive.get_files(@filename)
-    end
+    files = if Archive.archive? @filename
+              Archive.get_files(@filename)
+            end
     # extract information from annotations
     @annotations.each do |annotation|
       description = annotation.comment

app/helpers/submission_helper.rb

@@ -1,5 +1,9 @@
 module SubmissionHelper
   def plus_fix(f)
-    f > 0 ? "+#{f}" : "#{f}"
+    if f > 0
+      sprintf("+%.2f", f.round(2))
+    else
+      sprintf("%.2f", f.round(2))
+    end
   end
 end

app/models/annotation.rb

@@ -7,7 +7,7 @@ class Annotation < ApplicationRecord
   belongs_to :submission
   belongs_to :problem
 
-  validates :comment, :filename, :submission_id, :problem_id, presence: true
+  validates :comment, :value, :filename, :submission_id, :problem_id, presence: true
 
   def as_text
     if value