Update Bootstrap to v4.1, fix chosen.js and pagedown on multiple sites

2018-10-07 23:55:11 +02:00
parent 4d1cf972e4
commit 7bdb962616
99 changed files with 2758 additions and 472 deletions
--- a/app/assets/javascripts/base.js
+++ b/app/assets/javascripts/base.js
@@ -8,20 +8,18 @@ window.CodeOcean = {
  }
 };

-$(function() {
-  var ANIMATION_DURATION = 500;
+var ANIMATION_DURATION = 500;

-  $.isController = function(name) {
-    return $('.container[data-controller="' + name + '"]').isPresent();
-  };
+$.isController = function(name) {
+  return $('.container[data-controller="' + name + '"]').isPresent();
+};

-  $.fn.isPresent = function() {
-    return this.length > 0;
-  };
+$.fn.isPresent = function() {
+  return this.length > 0;
+};

-  $.fn.scrollTo = function(selector) {
-    $(this).animate({
-      scrollTop: $(selector).offset().top - $(this).offset().top + $(this).scrollTop()
-    }, ANIMATION_DURATION);
-  };
-});
+$.fn.scrollTo = function(selector) {
+  $(this).animate({
+    scrollTop: $(selector).offset().top - $(this).offset().top + $(this).scrollTop()
+  }, ANIMATION_DURATION);
+};
--- a/app/assets/javascripts/bootstrap-dropdown-submenu.js
+++ b/app/assets/javascripts/bootstrap-dropdown-submenu.js
@@ -14,7 +14,7 @@ $(document).on('turbolinks:load', function() {
    var menu = $(this).parent().find("ul");
    var menupos = menu.offset();

-    var newPos;
+    var newPos = 0.0;
    if ((menupos.left + menu.width()) + 30 > $(window).width()) {
      newPos = -menu.width();
    } else {
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/app/assets/javascripts/editor/editor.js.erb
@@ -33,6 +33,7 @@ var CodeOceanEditor = {
  <% @config ||= CodeOcean::Config.new(:code_ocean).read(erb: false) %>
  sendEvents: <%= @config['codeocean_events'] ? @config['codeocean_events']['enabled'] : false %>,
  eventURL: "<%= @config['codeocean_events'] ? events_path : '' %>",
+  fileTypeURL: "<%= file_types_path %>",


 configureEditors: function () {
@@ -43,7 +44,7 @@ configureEditors: function () {

  confirmDestroy: function (event) {
    event.preventDefault();
-    if (confirm($(this).data('message-confirm'))) {
+    if (confirm($(event.target).data('message-confirm'))) {
      this.destroyFile();
    }
  },
@@ -63,7 +64,7 @@ configureEditors: function () {
    if ($('#output-' + index).isPresent()) {
      return $('#output-' + index);
    } else {
-      var element = $('<pre>').attr('id', 'output-' + index);
+      var element = $('<pre class="mt-2">').attr('id', 'output-' + index);
      $('#output').append(element);
      return element;
    }
@@ -79,13 +80,13 @@ configureEditors: function () {
    }
  },

-  getPanelClass: function (result) {
+  getCardClass: function (result) {
    if (result.stderr && !result.score) {
-      return 'panel-danger';
+      return 'card bg-danger text-white';
    } else if (result.score < 1) {
-      return 'panel-warning';
+      return 'card bg-warning';
    } else {
-      return 'panel-success';
+      return 'card bg-success text-white';
    }
  },

@@ -107,11 +108,22 @@ configureEditors: function () {
    progress_bar.css('width', percentage + '%');
  },

+  // The event ready.jstree is fired too early and thus doesn't work.
+  selectFileInJsTree: function(filetree, file_id) {
+    if (!filetree.hasClass('jstree-loading')) {
+      filetree.jstree("deselect_all");
+      filetree.jstree().select_node(file_id);
+    } else {
+      setTimeout(this.selectFileInJsTree.bind(null, filetree, file_id), 250);
+    }
+  },
+
  showFirstFile: function() {
    var frame = $('.frame[data-role="main_file"]').isPresent() ? $('.frame[data-role="main_file"]') : $('.frame').first();
    var file_id = frame.find('.editor').data('file-id');
    this.setActiveFile(frame.data('filename'), file_id);
-    $('#files').jstree().select_node(file_id);
+    var filetree = $('#files');
+    this.selectFileInJsTree(filetree, file_id);
    this.showFrame(frame);
    this.toggleButtonStates();
  },
@@ -124,11 +136,11 @@ configureEditors: function () {

  getProgressBarClass: function (percentage) {
    if (percentage < this.ADEQUATE_PERCENTAGE) {
-      return 'progress-bar progress-bar-striped progress-bar-danger';
+      return 'progress-bar progress-bar-striped bg-danger';
    } else if (percentage < this.SUCCESSFULL_PERCENTAGE) {
-      return 'progress-bar progress-bar-striped progress-bar-warning';
+      return 'progress-bar progress-bar-striped bg-warning';
    } else {
-      return 'progress-bar progress-bar-striped progress-bar-success';
+      return 'progress-bar progress-bar-striped bg-success';
    }
  },

@@ -158,7 +170,7 @@ configureEditors: function () {
        category: 'editor_paste',
        data: pasteObject.text,
        exercise_id: $('#editor').data('exercise-id'),
-        file_id: $(this).data('file-id')
+        file_id: $(event.target).data('file-id')
      });
    }
  },
@@ -266,6 +278,21 @@ configureEditors: function () {
    this.initializeRequestForComments()
  },

+  updateEditorModeToFileTypeID: function (editor, fileTypeID) {
+    var newMode = 'ace/mode/text'
+
+    $.ajax(this.fileTypeURL + '/' + fileTypeID, {
+      dataType: 'json'
+    }).done(function (data) {
+        if (data['editor_mode'] !== null) {
+          newMode = data['editor_mode'];
+        }
+    }).fail(_.noop)
+      .always(function () {
+        ace.edit(editor).session.setMode(newMode);
+    });
+  },
+
  initializeFileTree: function () {
    $('#files').jstree($('#files').data('entries'));
    $('#files').on('click', 'li.jstree-leaf', function (event) {
@@ -296,8 +323,8 @@ configureEditors: function () {

  handleSideBarToggle: function() {
    $('#sidebar').toggleClass('sidebar-col').toggleClass('sidebar-col-collapsed');
-    $('#sidebar-collapsed').toggleClass('hidden');
-    $('#sidebar-uncollapsed').toggleClass('hidden');
+    $('#sidebar-collapsed').toggleClass('d-none');
+    $('#sidebar-uncollapsed').toggleClass('d-none');
  },

  initializeRegexes: function () {
@@ -369,17 +396,17 @@ configureEditors: function () {
    return Modernizr.websockets;
  },

-  populatePanel: function (panel, result, index) {
-    panel.removeClass('panel-default').addClass(this.getPanelClass(result));
-    panel.find('.panel-title .filename').text(result.filename);
-    panel.find('.panel-title .number').text(index + 1);
-    panel.find('.row .col-sm-9').eq(0).find('.number').eq(0).text(result.passed);
-    panel.find('.row .col-sm-9').eq(0).find('.number').eq(1).text(result.count);
-    panel.find('.row .col-sm-9').eq(1).find('.number').eq(0).text(parseFloat((result.score * result.weight).toFixed(2)));
-    panel.find('.row .col-sm-9').eq(1).find('.number').eq(1).text(result.weight);
-    panel.find('.row .col-sm-9').eq(2).html(result.message);
-    if (result.error_messages) panel.find('.row .col-sm-9').eq(3).text(result.error_messages.join(' '));
-    //panel.find('.row .col-sm-9').eq(4).find('a').attr('href', '#output-' + index);
+  populateCard: function (card, result, index) {
+    card.addClass(this.getCardClass(result));
+    card.find('.card-title .filename').text(result.filename);
+    card.find('.card-title .number').text(index + 1);
+    card.find('.row .col-sm-9').eq(0).find('.number').eq(0).text(result.passed);
+    card.find('.row .col-sm-9').eq(0).find('.number').eq(1).text(result.count);
+    card.find('.row .col-sm-9').eq(1).find('.number').eq(0).text(parseFloat((result.score * result.weight).toFixed(2)));
+    card.find('.row .col-sm-9').eq(1).find('.number').eq(1).text(result.weight);
+    card.find('.row .col-sm-9').eq(2).html(result.message);
+    if (result.error_messages) card.find('.row .col-sm-9').eq(3).text(result.error_messages.join(' '));
+    //card.find('.row .col-sm-9').eq(4).find('a').attr('href', '#output-' + index);
  },

  publishCodeOceanEvent: function (payload) {
@@ -556,14 +583,14 @@ configureEditors: function () {
  },

  showOutputBar: function() {
-    $('#output_sidebar_collapsed').addClass('hidden');
-    $('#output_sidebar_uncollapsed').removeClass('hidden');
+    $('#output_sidebar_collapsed').addClass('d-none');
+    $('#output_sidebar_uncollapsed').removeClass('d-none');
    $('#output_sidebar').removeClass('output-col-collapsed').addClass('output-col');
  },

  hideOutputBar: function() {
-    $('#output_sidebar_collapsed').removeClass('hidden');
-    $('#output_sidebar_uncollapsed').addClass('hidden');
+    $('#output_sidebar_collapsed').removeClass('d-none');
+    $('#output_sidebar_uncollapsed').addClass('d-none');
    $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
  },

@@ -572,12 +599,12 @@ configureEditors: function () {
  },

  initializeDescriptionToggle: function() {
-    $('#exercise-headline').on('click', this.toggleDescriptionPanel.bind(this));
-    $('a#toggle').on('click', this.toggleDescriptionPanel.bind(this));
+    $('#exercise-headline').on('click', this.toggleDescriptionCard.bind(this));
+    $('a#toggle').on('click', this.toggleDescriptionCard.bind(this));
  },

-  toggleDescriptionPanel: function() {
-    $('#description-panel').toggleClass('description-panel-collapsed').toggleClass('description-panel');
+  toggleDescriptionCard: function() {
+    $('#description-card').toggleClass('description-card-collapsed').toggleClass('description-card');
    $('#description-symbol').toggleClass('fa-chevron-down').toggleClass('fa-chevron-right');
    var toggle = $('a#toggle');
    toggle.text(toggle.text() == toggle.data('hide') ? toggle.data('show') : toggle.data('hide'));
--- a/app/assets/javascripts/editor/evaluation.js
+++ b/app/assets/javascripts/editor/evaluation.js
@@ -9,7 +9,7 @@ CodeOceanEditorEvaluation = {
    this.clearScoringOutput();
    this.createSubmission('#assess', null, function (response) {
      this.showSpinner($('#assess'));
-      $('#score_div').removeClass('hidden');
+      $('#score_div').removeClass('d-none');
      var url = response.score_url;
      this.initializeSocketForScoring(url);
    }.bind(this));
@@ -26,9 +26,9 @@ CodeOceanEditorEvaluation = {

  printScoringResult: function (result, index) {
    $('#results').show();
-    var panel = $('#dummies').children().first().clone();
-    this.populatePanel(panel, result, index);
-    $('#results ul').first().append(panel);
+    var card = $('#dummies').children().first().clone();
+    this.populateCard(card, result, index);
+    $('#results ul').first().append(card);
  },

  printScoringResults: function (response) {
@@ -60,7 +60,7 @@ CodeOceanEditorEvaluation = {
  renderHint: function (object) {
    var hint = object.data || object.hint;
    if (hint) {
-      $('#hint .panel-body').text(hint);
+      $('#hint .card-body').text(hint);
      $('#hint').fadeIn();
    }
  },
--- a/app/assets/javascripts/editor/participantsupport.js
+++ b/app/assets/javascripts/editor/participantsupport.js
@@ -1,12 +1,12 @@
 CodeOceanEditorFlowr = {
  isFlowrEnabled: true,
-  flowrResultHtml: '<div class="panel panel-default"><div id="{{headingId}}" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="true" aria-controls="{{collapseId}}"></a></h4></div><div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="panel-collapse collapse"><div class="panel-body"></div></div></div>',
+  flowrResultHtml: '<div class="panel panel-default"><div id="{{headingId}}" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="true" aria-controls="{{collapseId}}"></a></h4></div><div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="panel-collapse collapse"><div class="card-body"></div></div></div>',

  handleStderrOutputForFlowr: function () {
    if (!this.isFlowrEnabled) return;

    var flowrUrl = $('#flowrHint').data('url');
-    var flowrHintBody = $('#flowrHint .panel-body');
+    var flowrHintBody = $('#flowrHint .card-body');
    var queryParameters = {
      query: this.flowrOutputBuffer
    };
@@ -19,8 +19,8 @@ CodeOceanEditorFlowr = {
        var resultTile = $(collapsibleTileHtml);

        resultTile.find('h4 > a').text(question.title + ' | Found via ' + question.source);
-        resultTile.find('.panel-body').html(question.body);
-        resultTile.find('.panel-body').append('<a href="' + question.url + '" class="btn btn-primary btn-block">Open this question</a>');
+        resultTile.find('.card-body').html(question.body);
+        resultTile.find('.card-body').append('<a href="' + question.url + '" class="btn btn-primary btn-block">Open this question</a>');

        flowrHintBody.append(resultTile);
      });
--- a/app/assets/javascripts/editor/prompt.js
+++ b/app/assets/javascripts/editor/prompt.js
@@ -2,19 +2,19 @@ CodeOceanEditorPrompt = {
    prompt: '#prompt',

    showPrompt: function(msg) {
-        var label = $('#prompt .input-group-addon');
+        var label = $('#prompt .input-group-text');
        var prompt = $(this.prompt);
        label.text(msg.data || label.data('prompt'));
-        if (prompt.isPresent() && prompt.hasClass('hidden')) {
-            prompt.removeClass('hidden');
+        if (prompt.isPresent() && prompt.hasClass('d-none')) {
+            prompt.removeClass('d-none');
        }
        $('#prompt input').focus();
    },

    hidePrompt: function() {
        var prompt = $(this.prompt);
-        if (prompt.isPresent() && !prompt.hasClass('hidden')) {
-            prompt.addClass('hidden');
+        if (prompt.isPresent() && !prompt.hasClass('d-none')) {
+            prompt.addClass('d-none');
        }
    },

--- a/app/assets/javascripts/editor/submissions.js
+++ b/app/assets/javascripts/editor/submissions.js
@@ -155,7 +155,7 @@ CodeOceanEditorSubmissions = {
    $('#stop').data('url', submission.stop_url);
    this.running = true;
    this.showSpinner($('#run'));
-    $('#score_div').addClass('hidden');
+    $('#score_div').addClass('d-none');
    this.toggleButtonStates();
    var url = submission.run_url.replace(this.FILENAME_URL_PLACEHOLDER, this.active_file.filename.replace(/#$/,'')); // remove # if it is the last character, this is not part of the filename and just an anchor
    this.initializeSocketForRunning(url);
@@ -175,7 +175,7 @@ CodeOceanEditorSubmissions = {
    if ($('#test').is(':visible')) {
      this.createSubmission('#test', null, function(response) {
        this.showSpinner($('#test'));
-        $('#score_div').addClass('hidden');
+        $('#score_div').addClass('d-none');
        var url = response.test_url.replace(this.FILENAME_URL_PLACEHOLDER, this.active_file.filename.replace(/#$/,'')); // remove # if it is the last character, this is not part of the filename and just an anchor
        this.initializeSocketForTesting(url);
      }.bind(this));
--- a/app/assets/javascripts/editor/turtle.js
+++ b/app/assets/javascripts/editor/turtle.js
@@ -38,10 +38,10 @@ CodeOceanEditorTurtle = {

  showCanvas: function () {
    if ($('#turtlediv').isPresent()
-        && this.turtlecanvas.hasClass('hidden')) {
+        && this.turtlecanvas.hasClass('d-none')) {
      // initialize two-column layout
      $('#output-col1').addClass('col-lg-7 col-md-7 two-column');
-      this.turtlecanvas.removeClass('hidden');
+      this.turtlecanvas.removeClass('d-none');
    }
  }

--- a/app/assets/javascripts/exercises.js.erb
+++ b/app/assets/javascripts/exercises.js.erb
@@ -66,10 +66,9 @@ $(document).on('turbolinks:load', function() {
    $('#files').append(html);
    $('#files li:last select[name*="file_type_id"]').val(getSelectedExecutionEnvironment().file_type_id);
    $('#files li:last select').chosen(window.CodeOcean.CHOSEN_OPTIONS);
+    $('#files li:last select').remove();
+    $('#files li:last>div:last').removeClass('in').addClass('show')
    $('body, html').scrollTo('#add-file');
-    // if we collapse the file forms by default, we need to click on the new element in order to open it.
-    // however, this crashes for more files (if we add several ones by clicking the add button more often), since the elements are probably not correctly added to the files list.
-    //$('#files li:last>div:first>a>div').click();

    // initialize the ace editor for the new textarea.
    // pass the correct index and the last ace editor under the node files. this is the last one, since we just added it.
@@ -93,7 +92,7 @@ $(document).on('turbolinks:load', function() {

  var deleteFile = function(event) {
    event.preventDefault();
-    var fileUrl = $(this).data('file-url');
+    var fileUrl = $(event.target).data('file-url');

    if (confirm('<%= I18n.t('shared.confirm_destroy') %>')) {
      var jqxhr = $.ajax({
@@ -139,9 +138,9 @@ $(document).on('turbolinks:load', function() {
  var enableBatchUpdate = function() {
    $('thead .batch a').on('click', function(event) {
      event.preventDefault();
-      if (!$(this).data('toggled')) {
-        $(this).data('toggled', true);
-        $(this).text($(this).data('text'));
+      if (!$(event.target).data('toggled')) {
+        $(event.target).data('toggled', true);
+        $(event.target).text($(event.target).data('text'));
        buildCheckboxes();
      } else {
        performBatchUpdate();
@@ -199,7 +198,7 @@ $(document).on('turbolinks:load', function() {
  var observeFileRoleChanges = function() {
    $(document).on('change', 'select[name$="[role]"]', function() {
      var is_test_file = $(this).val() === 'teacher_defined_test';
-      var parent = $(this).parents('.panel');
+      var parent = $(this).parents('.card');
      var fields = parent.find('.test-related-fields');
      if (is_test_file) {
        fields.slideDown();
@@ -262,17 +261,13 @@ $(document).on('turbolinks:load', function() {
      jqxhr.fail(ajaxError);
  }

-  if ($.isController('exercises')) {
+  if ($.isController('exercises') || $.isController('submissions')) {
      // ignore tags table since it is in the dom before other tables
    if ($('table:not(#tags-table)').isPresent()) {
      enableBatchUpdate();
    } else if ($('.edit_exercise, .new_exercise').isPresent()) {
      execution_environments = $('form').data('execution-environments');
      file_types = $('form').data('file-types');
-      // new MarkdownEditor('#exercise_instructions');
-      // new MarkdownEditor('#exercise_description')
-      // todo: add an ace editor for each file
-      new PagedownEditor('#exercise_description');

      enableInlineFileCreation();
      inferFileAttributes();
--- a/app/assets/javascripts/forms.js
+++ b/app/assets/javascripts/forms.js
@@ -14,11 +14,11 @@ $(document).on('turbolinks:load', function() {
      var alternative_input = parent.find('.alternative-input');

      if (alternative_input.attr('disabled')) {
-        $(this).text($(this).data('text-toggled'));
+        $(this).text($(event.target).data('text-toggled'));
        original_input.attr('disabled', true).hide();
        alternative_input.attr('disabled', false).show();
      } else {
-        $(this).text($(this).data('text-initial'));
+        $(this).text($(event.target).data('text-initial'));
        alternative_input.attr('disabled', true).hide();
        original_input.attr('disabled', false).show();
      }
@@ -26,5 +26,27 @@ $(document).on('turbolinks:load', function() {
  });

  window.CodeOcean.CHOSEN_OPTIONS = CHOSEN_OPTIONS;
-  $('select:visible').chosen(CHOSEN_OPTIONS);
+  chosen_inputs = $('select').filter(function(){
+    return !$(this).parents('ul').is('#dummies');
+  });
+
+  // enable chosen hook when editing an exercise to update ace code highlighting
+  if ($.isController('exercises') && $('.edit_exercise, .new_exercise').isPresent()) {
+      chosen_inputs.filter(function(){
+          return $(this).attr('id').includes('file_type_id');
+      }).on('change chosen:ready', function(event, parameter) {
+          // Set ACE editor mode (for code highlighting) on change of file type and after initialization
+          editorInstance = $(event.target).closest('.card-body').find('.editor')[0];
+          selectedFileType = event.target.value;
+          CodeOceanEditor.updateEditorModeToFileTypeID(editorInstance, selectedFileType);
+      })
+  }
+
+  chosen_inputs.chosen(CHOSEN_OPTIONS);
+});
+
+// Remove some elements before going back to an older site. Otherwise, they might not work.
+$(document).on('turbolinks:before-cache', function() {
+    $('.chosen-container').remove();
+    $('#wmd-button-row-description').remove();
 });
--- a/app/assets/javascripts/markdown_ace_editor.js
+++ b/app/assets/javascripts/markdown_ace_editor.js
@@ -9,7 +9,7 @@
        });
        editor.setShowPrintMargin(false);
        var session = editor.getSession();
-        session.setMode('markdown');
+        session.setMode('ace/mode/markdown');
        session.setUseWrapMode(true);
        session.setValue($(selector).val());
    };
--- a/app/assets/javascripts/pagedown.js
+++ b/app/assets/javascripts/pagedown.js
@@ -1,10 +0,0 @@
-(function() {
-    var ACE_FILES_PATH = '/assets/ace/';
-
-    window.PagedownEditor = function(selector) {
-        var converter = Markdown.getSanitizingConverter();
-        var editor    = new Markdown.Editor( converter );
-
-        editor.run();
-    };
-})();
--- a/app/assets/javascripts/pagedown/markdown.editor.js.erb
+++ b/app/assets/javascripts/pagedown/markdown.editor.js.erb
--- a/app/assets/javascripts/pagedown/pagedown.js.erb
+++ b/app/assets/javascripts/pagedown/pagedown.js.erb
@@ -0,0 +1,43 @@
+//= require markdown.converter
+//  markdown.editor is slightly adjusted to work with Bootstrap 4.
+//  Taken from https://github.com/hughevans/pagedown-bootstrap-rails, V2.1.4
+//= require markdown.editor
+//= require markdown.sanitizer
+//= require markdown.extra
+
+renderPagedown = function() {
+    $(".wmd-output").each(function (i) {
+        const converter = new Markdown.Converter();
+        const content = $(this).html();
+        return $(this).html(converter.makeHtml(content));
+    })
+};
+
+createPagedownEditor = function( selector, context ) {
+    if (context == null) { context = 'body'; }
+    return $(selector, context).each(function(i, input) {
+        if ($(input).data('is_rendered')) {
+            return;
+        }
+        const attr = $(input).attr('id').split('wmd-input')[1];
+        const converter = new Markdown.Converter();
+        Markdown.Extra.init(converter);
+        const help = {
+            handler() {
+                window.open('http://daringfireball.net/projects/markdown/syntax');
+                return false;
+            },
+            title: "<%= I18n.t('components.markdown_editor.help', default: 'Markdown Editing Help') %>"
+        };
+
+        const editor = new Markdown.Editor(converter, attr, help);
+        editor.run();
+        $('[data-toggle="tooltip"]').tooltip();
+        return $(input).data('is_rendered', true);
+    });
+};
+
+$(document).on('turbolinks:load', function() {
+    renderPagedown();
+    return createPagedownEditor('.wmd-input');
+});
--- a/app/assets/javascripts/sortable.js
+++ b/app/assets/javascripts/sortable.js
@@ -1,4 +1,4 @@
-$(document).ready(function(){
+$(document).on('turbolinks:load', function(){
  (function vendorTableSorter(){
    /*
      SortTable
--- a/app/assets/javascripts/statistics_activity_history.js
+++ b/app/assets/javascripts/statistics_activity_history.js
@@ -49,7 +49,7 @@ $(document).on('turbolinks:load', function() {

      var refreshData = function (callback) {
        var params = new URLSearchParams(window.location.search.slice(1));
-        var jqxhr = $.ajax(prefix + '-activity-history.json', {
+        var jqxhr = $.ajax('/statistics/graphs/' + prefix + '-activity-history.json', {
          dataType: 'json',
          data: {from: params.get('from'), to: params.get('to'), interval: params.get('interval')},
          method: 'GET'
--- a/app/assets/javascripts/statistics_graphs.js
+++ b/app/assets/javascripts/statistics_graphs.js
@@ -101,7 +101,7 @@ $(document).on('turbolinks:load', function() {
      });
    }

-    manageGraph('user-activity', 'graphs/user-activity', 10);
-    manageGraph('rfc-activity', 'graphs/rfc-activity', 30);
+    manageGraph('user-activity', '/statistics/graphs/user-activity', 10);
+    manageGraph('rfc-activity', '/statistics/graphs/rfc-activity', 30);
  }
 });
--- a/app/assets/javascripts/submission_statistics.js
+++ b/app/assets/javascripts/submission_statistics.js
@@ -5,30 +5,40 @@ $(document).on('turbolinks:load', function() {

  var currentSubmission = 0;
  var active_file = undefined;
-  var fileTrees = []
+  var fileTrees = [];
  var editor = undefined;
-  var fileTypeById = {}
+  var fileTypeById = {};

  var showActiveFile = function() {
    var session = editor.getSession();
-    var fileType = fileTypeById[active_file.file_type_id]
+    var fileType = fileTypeById[active_file.file_type_id];
    session.setMode(fileType.editor_mode);
    session.setTabSize(fileType.indent_size);
    session.setValue(active_file.content);
    session.setUseSoftTabs(true);
    session.setUseWrapMode(true);

+    // The event ready.jstree is fired too early and thus doesn't work.
+    var selectFileInJsTree = function() {
+      if (!filetree.hasClass('jstree-loading')) {
+        filetree.jstree("deselect_all");
+        filetree.jstree().select_node(active_file.file_id);
+      } else {
+        setTimeout(selectFileInJsTree, 250);
+      }
+    };
+
+    filetree = $(fileTrees[currentSubmission]);
+    selectFileInJsTree();
+    // Finally change jstree element to prevent flickering
    showFileTree(currentSubmission);
-    filetree = $(fileTrees[currentSubmission])
-    filetree.jstree("deselect_all");
-    filetree.jstree().select_node(active_file.file_id);
  };

  var initializeFileTree = function() {
    $('.files').each(function(index, element) {
      fileTree = $(element).jstree($(element).data('entries'));
      fileTree.on('click', 'li.jstree-leaf', function() {
-        var id = parseInt($(this).attr('id'))
+        var id = parseInt($(this).attr('id'));
        _.each(files[currentSubmission], function(file) {
          if (file.file_id === id) {
            active_file = file;
@@ -42,8 +52,8 @@ $(document).on('turbolinks:load', function() {

  var showFileTree = function(index) {
    $('.files').hide();
-    $(fileTrees[index].context).show();
-  }
+    $(fileTrees[index]).show();
+  };

  if ($.isController('exercises') && $('#timeline').isPresent()) {

@@ -85,7 +95,7 @@ $(document).on('turbolinks:load', function() {
        if (file.name === active_file.name) {
          fileIndex = index;
        }
-      })
+      });
      active_file = currentFiles[fileIndex];
      showActiveFile();
    });
@@ -94,10 +104,10 @@ $(document).on('turbolinks:load', function() {
      clearInterval(playInterval);
      playInterval = undefined;
      playButton.find('span.fa').removeClass('fa-pause').addClass('fa-play')
-    }
+    };

    playButton.on('click', function(event) {
-      if (playInterval == undefined) {
+      if (playInterval === undefined) {
        playInterval = setInterval(function() {
          if ($.isController('exercises') && $('#timeline').isPresent() && slider.val() < submissions.length - 1) {
            slider.val(parseInt(slider.val()) + 1);
@@ -112,7 +122,7 @@ $(document).on('turbolinks:load', function() {
      }
    });

-    active_file = files[0][0]
+    active_file = files[0][0];
    initializeFileTree();
    showActiveFile();
  }