Merge pull request #1 from nwittstruck/master

CodePilot integration

app/assets/javascripts/editor.js

@@ -13,9 +13,10 @@ $(function() {
   var THEME = 'ace/theme/textmate';
 
   var editors = [];
-  var active_file;
+  var active_file = undefined;
-  var active_frame;
+  var active_frame = undefined;
   var running = false;
+  var qa_api = undefined;
 
   var 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>'
 
@@ -141,11 +142,20 @@ $(function() {
       event_source.addEventListener('close', handleStderrOutputForFlowr);
     }
 
+    if (qa_api) {
+      event_source.addEventListener('close', handleStreamedResponseForCodePilot);
+    }
+
     event_source.addEventListener('status', function(event) {
       showStatus(JSON.parse(event.data));
     });
   };
 
+  var handleStreamedResponseForCodePilot = function(event) {
+      qa_api.executeCommand('syncOutput', [chunkBuffer]);
+      chunkBuffer = [{streamedResponse: true}];
+  }
+
   var evaluateCodeWithoutStreamedResponse = function(url, callback) {
     var jqxhr = ajax({
       method: 'GET',
@@ -264,6 +274,9 @@ $(function() {
   var handleTestResponse = function(response) {
     clearOutput();
     printOutput(response[0], false, 0);
+    if (qa_api) {
+      qa_api.executeCommand('syncOutput', [response]);
+    }
     showStatus(response[0]);
     showTab(2);
   };
@@ -276,6 +289,19 @@ $(function() {
   var initializeEditors = function() {
     $('.editor').each(function(index, element) {
       var editor = ace.edit(element);
+      if (qa_api) {
+        editor.getSession().on("change", function (deltaObject) {
+          qa_api.executeCommand('syncEditor', [active_file, deltaObject]);
+        });
+      }
+
+      var document = editor.getSession().getDocument();
+      // insert pre-existing code into editor. we have to use insertLines, otherwise the deltas are not properly added
+      var file_id = $(element).data('file-id');
+      var content = $('.editor-content[data-file-id=' + file_id + ']');
+      setActiveFile($(element).parent().data('filename'), file_id);
+
+      document.insertLines(0, content.text().split(/\n/));
       editor.setReadOnly($(element).data('read-only') !== undefined);
       editor.setShowPrintMargin(false);
       editor.setTheme(THEME);
@@ -498,6 +524,13 @@ $(function() {
     return 'executable' in active_frame.data();
   };
 
+  var setActiveFile = function (filename, fileId) {
+      active_file = {
+          filename: filename,
+          id: fileId
+      };
+  }
+
   var isActiveFileRenderable = function() {
     return 'renderable' in active_frame.data();
   };
@@ -530,10 +563,17 @@ $(function() {
     panel.find('.row .col-sm-9').eq(3).find('a').attr('href', '#output-' + index);
   };
 
+  var chunkBuffer = [{streamedResponse: true}];
+
   var printChunk = function(event) {
     var output = JSON.parse(event.data);
     if (output) {
         printOutput(output, true, 0);
+        // send test response to QA
+        // we are expecting an array of outputs:
+        if (qa_api) {
+            chunkBuffer.push(output);
+        }
     } else {
       clearOutput();
       $('#hint').fadeOut();
@@ -580,6 +620,10 @@ $(function() {
     })) {
       showTimeoutMessage();
     }
+    if (qa_api) {
+      // send test response to QA
+      qa_api.executeCommand('syncOutput', [response]);
+    }
   };
 
   var renderCode = function(event) {
@@ -703,10 +747,7 @@ $(function() {
   var 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');
-    active_file = {
+    setActiveFile(frame.data('filename'), file_id);
-      filename: frame.data('filename'),
-      id: file_id
-    };
     $('#files').jstree().select_node(file_id);
     showFrame(frame);
     toggleButtonStates();
@@ -865,8 +906,21 @@ $(function() {
     })
   }
 
+    var initializeCodePilot = function() {
+        if ($('#questions-column').isPresent() && QaApi.isBrowserSupported()) {
+            $('#editor-column').addClass('col-md-8').removeClass('col-md-10');
+            $('#questions-column').addClass('col-md-3');
+
+            var node = document.getElementById('questions-holder');
+            var url = $('#questions-holder').data('url');
+
+            qa_api = new QaApi(node, url);
+        }
+    }
+
   if ($('#editor').isPresent()) {
       if (isBrowserSupported()) {
+          initializeCodePilot();
           $('.score, #development-environment').show();
           configureEditors();
           initializeEditors();

app/controllers/exercises_controller.rb

@@ -86,6 +86,12 @@ class ExercisesController < ApplicationController
     @submission = current_user.submissions.where(exercise_id: @exercise.id).order('created_at DESC').first
     @files = (@submission ? @submission.collect_files : @exercise.files).select(&:visible).sort_by(&:name_with_extension)
     @paths = collect_paths(@files)
+
+    if current_user.respond_to? :external_id
+      @user_id = current_user.external_id
+    else
+      @user_id = '00000001-3100-4444-9999-000000000001'
+    end
   end
 
   def index

app/helpers/exercise_helper.rb

@@ -2,4 +2,17 @@ module ExerciseHelper
   def embedding_parameters(exercise)
     "locale=#{I18n.locale}&token=#{exercise.token}"
   end
+
+  def qa_js_tag
+    javascript_include_tag qa_url + "/assets/qa_api.js"
+  end
+
+  def qa_url
+    config = CodeOcean::Config.new(:code_ocean)
+    enabled = config.read[:code_pilot][:enabled]
+
+    if enabled
+      config.read[:code_pilot][:url]
+    end
+  end
 end

app/views/exercises/_editor_frame.html.slim

@@ -11,4 +11,5 @@
       - else
         = link_to(file.native_file.file.name_with_extension, file.native_file.url)
   - else
-    .editor data-file-id=file.ancestor_id data-indent-size=file.file_type.indent_size data-mode=file.file_type.editor_mode data-read-only=file.read_only = file.content
+    .editor-content.hidden data-file-id=file.ancestor_id = file.content
+    .editor data-file-id=file.ancestor_id data-indent-size=file.file_type.indent_size data-mode=file.file_type.editor_mode data-read-only=file.read_only

app/views/exercises/implement.html.slim

@@ -1,14 +1,16 @@
-h1 = @exercise
+.row
+  #editor-column.col-md-10.col-md-offset-1
+    h1 = @exercise
 
-span.badge.pull-right.score
+    span.badge.pull-right.score
 
-p.lead = @exercise.description
+    p.lead = @exercise.description
 
-#alert.alert.alert-danger role='alert'
+    #alert.alert.alert-danger role='alert'
       h4 = t('.alert.title')
       p = t('.alert.text', application_name: application_name)
 
-#development-environment
+    #development-environment
       ul.nav.nav-justified.nav-tabs role='tablist'
         li.active
           a data-placement='top' data-toggle='tab' data-tooltip=true href='#instructions' role='tab' title=t('shared.tooltips.shortcut', shortcut: 'ALT + 1')
@@ -71,3 +73,7 @@ p.lead = @exercise.description
               .progress-bar role='progressbar'
           br
           p.text-center = render('editor_button', classes: 'btn-lg btn-success', data: {:'data-message-confirm' => t('exercises.editor.confirm_submit'), :'data-url' => submit_exercise_path(@exercise)}, icon: 'fa fa-send', id: 'submit', label: t('exercises.editor.submit'))
+  - if qa_url
+    #questions-column
+      #questions-holder data-url="#{qa_url}/qa/index/#{@exercise.id}/#{@user_id}"
+    = qa_js_tag

app/views/layouts/application.html.slim

@@ -34,6 +34,12 @@ html lang='en'
     .container data-controller=controller_name
       = render('breadcrumbs')
       = render('flash')
+    - if (controller_name == "exercises" && action_name == "implement")
+      .container-fluid
         = yield
+    - else
+      .container
+        = yield
+
     - template_variables = {execution_environment: @exercise.execution_environment} if action_name == 'implement'
     = render('shared/modal', classes: 'modal-lg', id: 'modal-help', template: 'application/help', template_variables: template_variables, title: t('shared.help.headline'))

config/code_ocean.yml.example

@@ -1,11 +1,16 @@
 default: &default
   flowr:
     enabled: false
+  code_pilot:
+    enabled: false
 
 development:
   flowr:
     enabled: true
     url: http://example.org:3000/api/exceptioninfo?id=&lang=auto
+  code_pilot:
+    enabled: true
+    url: //localhost:3000
 
 production:
   <<: *default

config/code_ocean.yml.travis

@@ -1,3 +1,5 @@
 test:
   flowr:
     enabled: false
+  code_pilot:
+    enabled: false