Speedgrader Draggable/Resizable Components (#1486)

* initial implementation of golden layout * commented out extraneous jquery script tag * moved grades to separate partial * moved logic for file tree and code symbol tree to golden-layout.html.erb * loading annotations is working * moved include_javascript_tag for annotations into separate html.erb & render it in observer * fixed bugs! annotations are working correctly now but solution is a bit hacky... * removed unnecessary tests * updated method of loading annotations * fixed width issues * fixed grades load bug * save layout state * fixed highlightLongLines styling bug * add symbol tree & file outline for all views by default * added reset button, changed download button * fixed symbol-tree-container div not loading properly * fix pdf viewer * keep track of need for file/symbol tree in storage * fixed bug where annotations_js wasn't loading on page change * reset by third column instead of symbol tree & file tree individually * disable pop-out * fixed symbol tree issue
autolab · Apr 5, 2022 · af7f303 · af7f303
1 parent 4e7d523
commit af7f303
Show file tree

Hide file tree

Showing 14 changed files with 259 additions and 144 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -193,7 +193,7 @@ GEM
       railties (>= 3.1)
     jwt (2.3.0)
     libv8-node (15.14.0.1)
-    libv8-node (15.14.0.1-x86_64-darwin-19)
+    libv8-node (15.14.0.1-x86_64-darwin-20)
     libv8-node (15.14.0.1-x86_64-linux)
     lockbox (0.6.8)
     loofah (2.14.0)
@@ -424,7 +424,7 @@ GEM
 
 PLATFORMS
   ruby
-  x86_64-darwin-19
+  x86_64-darwin-20
   x86_64-linux
 
 DEPENDENCIES

diff --git a/app/assets/javascripts/annotations.js b/app/assets/javascripts/annotations.js
@@ -6,6 +6,7 @@ $(document).ready(function () {
   $('.collapsible').collapsible();
   //get line number in URL, if it exists
   var urlParams = new URLSearchParams(location.search);
+
   if (urlParams.has("line")) {
     scrollToLine(urlParams.get("line"));
   }
@@ -53,12 +54,7 @@ function changeFile(headerPos) {
     newFile = localCache[headerPos];
     // Update the code viewer and symbol tree with the cached data
     $('#code-box').replaceWith(newFile.codeBox);
-
-    if (newFile.symbolTree == null) {
-      $('#symbol-tree-box').hide();
-    } else {
-      $('#symbol-tree-container').html(newFile.symbolTree);
-    }
+    $('#symbol-tree-container').replaceWith(newFile.symbolTree);
 
     // Add syntax highlighting to the new code viewer
     $('pre code').each(function () {
@@ -76,17 +72,10 @@ function changeFile(headerPos) {
 }
 
 function purgeCurrentPageCache() {
-  var symbolTree = $("#symbol-tree-box").html();
-  if (symbolTree) {
-    symbolTree = `<div id="symbol-tree-box">${symbolTree}</div>`
-  }
-  else {
-    symbolTree = null;
-  }
   localCache[currentHeaderPos] = {
     codeBox: `<div id="code-box">${$('#code-box').html()}</div>`,
     pdf: false,
-    symbolTree,
+    symbolTree: `<div id="symbol-tree-box">${$('#symbol-tree-box').html()}</div>`,
     url: window.location.href,
   };
 }
@@ -141,7 +130,7 @@ function fillAnnotationBox() {
       annotationsByProblem[problem] = []
     }
     annotations[i].problem = problem;
-    annotationsByProblem[problem].push(annotations[i])
+    annotationsByProblem[problem].push(annotations[i]);
   }
 
   for (var problem in annotationsByProblem) {
@@ -181,7 +170,6 @@ function fillAnnotationBox() {
 
     // 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];
 
@@ -217,7 +205,7 @@ function fillAnnotationBox() {
     }
   }
   // Reloads the grades part upon update
-  $('.problemGrades').load(document.URL + ' .problemGrades');
+  $('.problemGrades').load(document.URL + ' .problemGrades')
 }
 
 // Sets up the keybindings
@@ -373,7 +361,6 @@ function attachEvents() {
   highlightLines(status);
 
   $(".add-button").on("click", function (e) {
-
     e.preventDefault();
     var line = $(this).parent().parent().parent();
     var annotationContainer = line.data("lineId");
@@ -395,7 +382,6 @@ function attachChangeFileEvents() {
     if (wasCachedLocally) {
       e.preventDefault();
       if ($(this).data("line")) {
-        console.log("called")
         scrollToLine($(this).data("line"));
       }
       return false;
@@ -865,7 +851,7 @@ var newAnnotationFormTemplatePDF = function (name, pageInd) {
     style: "width: 100%;"
   }, scoreDiv, space, problemSelect);
 
-  var hr = elt("hr");
+  var br = elt("br");
 
   var submitButton = elt("input", {
     type: "submit",
@@ -881,8 +867,6 @@ var newAnnotationFormTemplatePDF = function (name, pageInd) {
     name: "cancel"
   });
 
-  var hr = elt("hr");
-
   // Creates a dictionary of problem and grader_id
   var autogradedproblems = {}
 
@@ -902,7 +886,7 @@ var newAnnotationFormTemplatePDF = function (name, pageInd) {
     title: "Press <Enter> to Submit",
     class: name,
     id: name + "-" + pageInd
-  }, commentLabel, rowDiv1, scoreLabel, colDiv2, hr, submitButton, cancelButton);
+  }, commentLabel, rowDiv1, scoreLabel, colDiv2, br, submitButton, cancelButton);
 
   return newForm;
 }

diff --git a/app/assets/stylesheets/annotations.css b/app/assets/stylesheets/annotations.css
@@ -8,7 +8,7 @@
 }
 
 .row {
-  max-height: calc(100vh - 190px);
+  max-height: calc(100vh - 173px);
 }
 
 #code-loader {
@@ -492,6 +492,7 @@
   display: flex;
   flex-flow: column;
   height: 100%;
+  overflow-y: scroll;
 }
 .annotationSummary{
   border: solid 2px #0882af;
@@ -564,7 +565,6 @@
 }
 
 .problemGrades{
-  border: solid 2px #ebebeb;
   overflow: auto;
 }
 .problemGrades h1{
@@ -609,7 +609,7 @@
 
 /* File Tree Styling CSS */
 .file-explorer{
-  max-height: 60%;
+  max-height: 100%;
   overflow: auto;
 }
 
@@ -667,14 +667,10 @@
 
 /* Symbol Tree Styling */
 #symbol-tree-container {
-  height: 30%;
+  max-height: 100%;
   overflow: auto;
 }
 
-#symbol-tree-box {
-  /* overflow: auto; */
-}
-
 #symbol-tree-box ul {
   font-weight: bold;
   color: gray;

diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
@@ -149,6 +149,13 @@ div.main-header img {
   margin-left: -10px;
 }
 
+#speedgrader {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+}
+
 /* Custom Form Styling */
 form#edit_editCourse {
   margin-top: 80px;

diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb
@@ -372,7 +372,6 @@ def view
             # General case -- language can be inferred from file extension
             `ctags --extras=+q --output-format=json --fields="Nnk" #{codePath}`.split("\n")
           end
-
         @ctag_obj = []
         i = 0
         while i < @ctags_json.length

diff --git a/app/views/submissions/_annotation_pane.html.erb b/app/views/submissions/_annotation_pane.html.erb
@@ -36,29 +36,4 @@
         <% end %>
     </ul>
   </div>
-
-  <div class="problemGrades">
-    <h1>Grades</h1>
-    <div class="collection">
-      <% p_scores = @submission.problems_to_scores %>
-      <% @assessment.problems.each_with_index do |p,i| %>
-        <% p_score = p_scores[p.id] %>
-        <div class="problem-grade-item collection-item">
-          <div class="problem_name"> <%= p.name.capitalize %>: </div>
-          <div class="problem_score">
-            <% if @cud.instructor? or @cud.course_assistant? %>
-              <b class="student_score" data-problem-id="<%= p.id %>" data-submission-id="<%= @submission.id %>"> <%= p_score && p_score.score ? p_score.score : raw("&ndash;") %> </b>
-            <% else %>
-              <% if p_score && p_score.released %> 
-                <b class="student_score"> <%= p_score.score %> </b>
-              <% else %>
-                <b> &ndash; </b>
-              <% end %>
-            <% end %>
-            <b> / <%= p.max_score %></b>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  </div>
 </div>
diff --git a/app/views/submissions/_annotations_js.html.erb b/app/views/submissions/_annotations_js.html.erb
@@ -0,0 +1,26 @@
+<%= javascript_include_tag "annotations.js" %>
+<%= javascript_include_tag "submission_view.js" %>
+<script type="text/javascript">
+  setActiveFilePos(currentHeaderPos)
+  initializeAnnotationsForCode();
+  attachEvents();
+  attachChangeFileEvents();
+</script>
+
+<script>
+  var newFile = {};
+  newFile.url = '<%= url_for(params.permit(:header_position, :action, :controller).to_h) %>'
+
+  <% if @is_pdf %>
+  newFile.pdf = true;
+  newFile.pdfUrl = "<%= url_for [:download, @course, @assessment, @submission, header_position: params[:header_position]] %>";
+  newFile.annotatedPdfUrl = "<%= url_for [:download, @course, @assessment, @submission, header_position: params[:header_position], annotated: true] %>";
+  newFile.previewMode = false;
+  <% if @preview_mode %>
+      newFile.previewMode = true;
+  <% end %>
+  <% else %>
+  newFile.pdf = false;
+  <% end %>
+</script>
+
diff --git a/app/views/submissions/_code_symbol_tree.html.erb b/app/views/submissions/_code_symbol_tree.html.erb
@@ -1,11 +1,15 @@
-<div id="symbol-tree-box">
-    <h5>Symbol Tree</h5>
-    <ul>
-    <% ctag_obj.each do |fdef| %>
-        <li onclick="scrollToLine(<%=fdef['line']%>)">
-            <%= image_tag "function_icon.svg" %>
-            <%= fdef["name"] %>
-        </li>
-    <% end %>
-    </ul>
+<div id="symbol-tree-container">
+<% unless @is_pdf %>
+    <div id="symbol-tree-box">
+        <h5>Symbol Tree</h5>
+        <ul>
+        <% @ctag_obj.each do |fdef| %>
+            <li onclick="scrollToLine(<%=fdef['line']%>)">
+                <%= image_tag "function_icon.svg" %>
+                <%= fdef["name"] %>
+            </li>
+        <% end %>
+        </ul>
+    </div>
+<% end %>
 </div>
diff --git a/app/views/submissions/_code_viewer.html.erb b/app/views/submissions/_code_viewer.html.erb
@@ -1,4 +1,12 @@
 <div id="code-box">
+  <% if @is_pdf %>
+    <div type="checkbox" id="highlightLongLines" style="display: none"></div>
+  <% else %>
+    <label>
+      <input type="checkbox" id="highlightLongLines" checked>
+      <span>Highlight lines longer than 80 characters</span>
+    </label>
+  <% end %>
   <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
   <div class="file-header">
     <div class="file-name">