Resolved Conficts

.github/dependabot.yml

@@ -20,3 +20,10 @@ updates:
     versions:
     - 5.19.0
     - 5.24.2
+- package-ecosystem: pip
+  directory: "/"
+  schedule:
+    interval: monthly
+    time: "10:00"
+  ignore:
+    - dependency-name: markus_exam_matcher

.pre-commit-config.yaml

@@ -15,7 +15,7 @@ repos:
         - id: prettier
           types_or: [javascript, jsx, css, scss, html]
   -   repo: https://github.com/thibaudcolas/pre-commit-stylelint
-      rev: v15.6.3
+      rev: v15.9.0
       hooks:
         - id: stylelint
           additional_dependencies: [
@@ -33,7 +33,7 @@ repos:
               app/assets/stylesheets/common/_reset.scss
             )$
   - repo: https://github.com/rubocop/rubocop
-    rev: v1.52.0
+    rev: v1.54.0
     hooks:
       - id: rubocop
         args: ["--autocorrect"]

Changelog.md

@@ -22,6 +22,8 @@
 - Change icon set to Font Awesome (Free) (#6627)
 - Add feature to generate a PDF report of a result (PDF submission files only) (#6635)
 - Add zoom feature to scanned exam template crop selection (#6640)
+- Ensure Jupyter notebook HTML rendering does not require external CDNs (#6656)
+- Prevent Jupyter notebook from reloading when an annotation is added (#6656)
 - Added a button allowing graders to view a random incomplete submission (#6641)
 
 ## [v2.2.3]

Gemfile.lock

@@ -211,7 +211,7 @@ GEM
       rails-i18n
       rainbow (>= 2.2.2, < 4.0)
       terminal-table (>= 1.5.1)
-    js-routes (2.2.4)
+    js-routes (2.2.5)
       railties (>= 4)
     js_cookie_rails (2.2.0)
       railties (>= 3.1)
@@ -223,9 +223,9 @@ GEM
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.20.0)
+    loofah (2.21.3)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
     machinist (2.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
@@ -253,8 +253,8 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.14.3)
-      mini_portile2 (~> 2.8.0)
+    nokogiri (1.15.2)
+      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     parser (3.2.1.1)
       ast (~> 2.4.1)
@@ -427,7 +427,7 @@ GEM
       unicode-display_width (>= 1.1.1, < 3)
     terser (1.1.14)
       execjs (>= 0.3.0, < 3)
-    thor (1.2.1)
+    thor (1.2.2)
     tilt (2.1.0)
     time-warp (1.0.15)
     timeout (0.3.2)

app/assets/config/manifest.js

@@ -1,6 +1,7 @@
 //= link_tree ../javascripts .js
 //= link_directory ../stylesheets .css
 //= link common/SyntaxHighlighter.css
+//= link common/jupyterlab-markus-custom.css
 
 //= link_tree ../../../vendor/assets/javascripts .js
 //= link_tree ../../../vendor/assets/stylesheets .css

app/assets/javascripts/Components/Helpers/range_selector.js

@@ -112,15 +112,14 @@ function addMouseOverToNode(node, content) {
   });
 }
 
-export function markupTextInRange(range, colour, content) {
+export function markupTextInRange(range, content) {
   if (range.startContainer === range.endContainer) {
     const old_node = range.startContainer;
     const parent = old_node.parentNode;
     let new_node;
     if (old_node.nodeType === Node.TEXT_NODE) {
       new_node = document.createElement("span");
       new_node.className = "markus-annotation";
-      new_node.style.backgroundColor = colour;
       const unmarked1 = document.createTextNode(old_node.nodeValue.substring(0, range.startOffset));
       const marked = document.createTextNode(
         old_node.nodeValue.substring(range.startOffset, range.endOffset)
@@ -133,7 +132,6 @@ export function markupTextInRange(range, colour, content) {
     } else if (old_node.nodeName === "img" || old_node.childNodes.length) {
       new_node = document.createElement("div");
       new_node.className = "markus-annotation";
-      new_node.style.border = `5px solid ${colour}`;
       new_node.appendChild(old_node.cloneNode(true));
       parent.replaceChild(new_node, old_node);
     }
@@ -146,7 +144,6 @@ export function markupTextInRange(range, colour, content) {
         if (old_node.nodeType === Node.TEXT_NODE) {
           new_node = document.createElement("span");
           new_node.className = "markus-annotation";
-          new_node.style.backgroundColor = colour;
           if (old_node === range.startContainer) {
             const unmarked = document.createTextNode(
               old_node.nodeValue.substring(0, range.startOffset)
@@ -170,7 +167,6 @@ export function markupTextInRange(range, colour, content) {
         } else if (old_node.nodeName === "img" || old_node.childNodes.length) {
           new_node = document.createElement("div");
           new_node.className = "markus-annotation";
-          new_node.style.border = `5px solid ${colour}`;
           new_node.appendChild(old_node.cloneNode(true));
           parent.replaceChild(new_node, old_node);
         }

app/assets/javascripts/Components/Result/notebook_viewer.jsx

@@ -2,6 +2,11 @@ import React from "react";
 import {markupTextInRange} from "../Helpers/range_selector";
 
 export class NotebookViewer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.iframe = React.createRef();
+  }
+
   componentDidMount() {
     if (this.props.resultView) {
       this.readyAnnotations();
@@ -12,9 +17,8 @@ export class NotebookViewer extends React.Component {
     annotation_type = ANNOTATION_TYPES.NOTEBOOK;
   };
 
-  renderAnnotations = event => {
-    const doc = event.target.contentDocument;
-    const colour = document.documentElement.style.getPropertyValue("--light_alert");
+  renderAnnotations = () => {
+    const doc = this.iframe.current.contentWindow.document;
     // annotations need to be sorted in the order that they were created so that multiple
     // annotations on the same node get rendered in the order they were created. If they are
     // not, then the ranges may contain nodes/offsets that don't take the other highlighted
@@ -25,21 +29,32 @@ export class NotebookViewer extends React.Component {
         const start_node = doc.evaluate(annotation.start_node, doc).iterateNext();
         const end_node = doc.evaluate(annotation.end_node, doc).iterateNext();
         const newRange = doc.createRange();
-        newRange.setStart(start_node, annotation.start_offset);
-        newRange.setEnd(end_node, annotation.end_offset);
-        markupTextInRange(newRange, colour, annotation.content);
+        try {
+          newRange.setStart(start_node, annotation.start_offset);
+          newRange.setEnd(end_node, annotation.end_offset);
+          markupTextInRange(newRange, annotation.content);
+        } catch (error) {
+          console.error(error);
+        }
       });
   };
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.annotations !== this.props.annotations) {
+      this.renderAnnotations();
+    }
+  }
+
   render() {
     return (
       <div>
         <iframe
           className={"notebook"}
           id={"notebook"}
-          key={this.props.annotations.map(a => [a.id, a.annotation_text_id])} // reload when the annotations change
+          key={this.props.url}
           onLoad={this.renderAnnotations}
           src={this.props.url + "&preview=true"}
+          ref={this.iframe}
         />
       </div>
     );

app/assets/stylesheets/common/_file_viewer.scss

@@ -1,4 +1,4 @@
 .notebook {
-  height: 100vh;
+  height: 595px;
   width: 100%;
 }

app/assets/stylesheets/common/jupyterlab-markus-custom.scss

@@ -0,0 +1,15 @@
+/* MarkUs custom styling */
+@import 'constants';
+
+.markus-annotation {
+  background-color: $light-alert;
+}
+
+div.markus-annotation {
+  border: 5px solid $sharp-line;
+}
+
+/* Override Jupyterlab css defaults */
+.jp-Notebook .jp-Cell .jp-InputPrompt {
+  cursor: initial !important;
+}

app/controllers/submissions_controller.rb

@@ -903,7 +903,9 @@ def notebook_to_html(file_contents, unique_path, type)
       FileUtils.mkdir_p(cache_file.dirname)
       if type == 'jupyter-notebook'
         args = [
-          Rails.application.config.python, '-m', 'nbconvert', '--to', 'html', '--stdin', '--output', cache_file.to_s
+          Rails.application.config.python, '-m', 'nbconvert', '--to', 'html', '--stdin', '--output', cache_file.to_s,
+          "--TemplateExporter.extra_template_basedirs=#{Rails.root.join('lib/jupyter-notebook')}",
+          '--template', 'markus-html-template'
         ]
       end
       _stdout, stderr, status = Open3.capture3(*args, stdin_data: file_contents)

app/helpers/application_helper.rb

@@ -12,7 +12,7 @@ def flash_message(type, text = '', flash_type = flash, **kwargs)
     type = :notice unless available_types.include?(type)
     # If a flash with that type doesn't exist, create a new array
     flash_type[type] ||= []
-    content = kwargs.empty? ? "<p>#{text.to_s.gsub(/\n/, '<br/>')}</p>" : render_to_string(**kwargs).split("\n").join
+    content = kwargs.empty? ? "<p>#{text.to_s.gsub("\n", '<br/>')}</p>" : render_to_string(**kwargs).split("\n").join
     # If the message doesn't already exist, add it
     flash_type[type].push(content) unless flash_type[type].include?(content)
   end

app/views/layouts/notebook.html.erb

@@ -2,7 +2,34 @@
 <html lang="<%= I18n.locale %>">
   <head>
     <% if @notebook_type == 'jupyter-notebook' %>
-      <%= stylesheet_link_tag('jupyter-notebook') %>
+      <%= stylesheet_link_tag 'jupyterlab' %>
+      <%= stylesheet_link_tag 'jupyterlab-extra' %>
+      <%= stylesheet_link_tag 'common/jupyterlab-markus-custom' %>
+      <% if @current_user&.theme == 'dark' %>
+        <%= stylesheet_link_tag 'jupyterlab-theme-dark-extension' %>
+        <%= stylesheet_link_tag 'pygments-monokai' %>
+      <% else %>
+        <%= stylesheet_link_tag 'jupyterlab-theme-light-extension' %>
+        <%= stylesheet_link_tag 'pygments-default' %>
+      <% end %>
+      <%= javascript_tag nonce: true do %>
+        // Same as mathjax_config.js except skipStartupTypeset is false
+        window.MathJax = {
+          root: '<%= File.dirname(asset_path 'MathJax_lib/MathJax') %>',
+          messageStyle: 'none',
+          skipStartupTypeset: false,
+          ShowMathMenu: false,
+          tex2jax: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']],
+            preview: 'none',
+            processEnvironments: false,
+            processRefs: false,
+          },
+          jax: ["input/TeX", "input/MathML", "input/AsciiMath", "output/CommonHTML"],
+          extensions: ['tex2jax.js'],
+        };
+      <% end %>
+      <%= javascript_include_tag 'MathJax_lib/MathJax', nonce: true %>
     <% end %>
   </head>
   <body>

lib/jupyter-notebook/markus-html-template/conf.json

@@ -0,0 +1,12 @@
+{
+  "base_template": "lab",
+  "mimetypes": {
+    "text/html": true
+  },
+  "preprocessors": {
+    "100-pygments": {
+      "type": "nbconvert.preprocessors.CSSHTMLHeaderPreprocessor",
+      "enabled": false
+    }
+  }
+}

lib/jupyter-notebook/markus-html-template/index.html.j2

@@ -0,0 +1,54 @@
+{%- extends 'base.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+
+{%- block header -%}
+<!DOCTYPE html>
+<html>
+<head>
+{%- block html_head -%}
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% set nb_title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}
+<title>{{nb_title}}</title>
+
+{%- block html_head_js -%}
+{%- endblock html_head_js -%}
+
+{% block jupyter_widgets %}
+{% endblock jupyter_widgets %}
+
+{% block extra_css %}
+{% endblock extra_css %}
+
+{% block notebook_css %}
+{% endblock notebook_css %}
+
+{%- block html_head_js_mathjax -%}
+{{ mathjax("") }}
+{%- endblock html_head_js_mathjax -%}
+
+{%- block html_head_css -%}
+{%- endblock html_head_css -%}
+
+{%- endblock html_head -%}
+</head>
+{%- endblock header -%}
+
+{%- block body_header -%}
+{% if resources.theme == 'dark' %}
+<body class="jp-Notebook" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">
+{% else %}
+<body class="jp-Notebook" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
+{% endif %}
+{%- endblock body_header -%}
+
+{% block body_footer %}
+</body>
+{% endblock body_footer %}
+
+{% block footer %}
+{% block footer_js %}
+{% endblock footer_js %}
+{{ super() }}
+</html>
+{% endblock footer %}

requirements-jupyter.txt

@@ -1,2 +1,2 @@
 # TODO: replace requirements files with Pipfile file (when it is stable and supported by pip)
-nbconvert==6.5.1
+nbconvert==7.6.0