{
 "metadata": {
  "name": "direct_view_widget"
 },
 "nbformat": 3,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "source": [
      "Direct View Widget"
     ]
    },
    {
     "cell_type": "markdown",
     "source": [
      "IPython has a JavaScript widget for interacting with an IPython parallel engine interactively in the Notebook. This Notebook shows how this widget can be used."
     ]
    },
    {
     "cell_type": "code",
     "input": [
      "from IPython.frontend.html.notebook.widgets import directview",
      "from IPython.parallel import Client"
     ],
     "language": "python",
     "outputs": [],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "source": [
      "Let's create a `Client` and build a `DirectView` containing all of the engines:"
     ]
    },
    {
     "cell_type": "code",
     "input": [
      "c = Client()",
      "dv = c[:]"
     ],
     "language": "python",
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "markdown",
     "source": [
      "To interact with the engines we simply pass the `DirectView` instance to the `interact` function.  The resulting widget has an embedded notebook cell, but any code entered into the embedded cell is run on the engines you choose. The engines are now full blown IPython kernels so you can enter arbitrary Python/IPython code and even make plots on the engines."
     ]
    },
    {
     "cell_type": "code",
     "input": [
      "directview.interact(dv)"
     ],
     "language": "python",
     "outputs": [
      {
       "javascript": [
        "//----------------------------------------------------------------------------",
        "//  Copyright (C) 2008-2012  The IPython Development Team",
        "//",
        "//  Distributed under the terms of the BSD License.  The full license is in",
        "//  the file COPYING, distributed as part of this software.",
        "//----------------------------------------------------------------------------",
        "",
        "//============================================================================",
        "// EngineInteract",
        "//============================================================================",
        "",
        "var key   = IPython.utils.keycodes;",
        "",
        "",
        "var DirectViewWidget = function (selector, kernel, targets) {",
        "    // The kernel doesn't have to be set at creation time, in that case",
        "    // it will be null and set_kernel has to be called later.",
        "    this.selector = selector;",
        "    this.element = $(selector);",
        "    this.kernel = kernel || null;",
        "    this.code_mirror = null;",
        "    this.targets = targets;",
        "    this.create_element();",
        "};",
        "",
        "",
        "DirectViewWidget.prototype.create_element = function () {",
        "    this.element.addClass('cell border-box-sizing code_cell vbox');",
        "    this.element.attr('tabindex','2');",
        "    this.element.css('padding-right',0);",
        "",
        "    var control = $('<div/>').addClass('dv_control').height('30px');",
        "    var control_label = $('<span/>').html('Select engine(s) to run code on interactively: ');",
        "    control_label.css('line-height','30px');",
        "    var select = $('<select/>').addClass('dv_select ui-widget ui-widget-content');",
        "    select.css('font-size','85%').css('margin-bottom','5px');",
        "    var n = this.targets.length;",
        "    select.append($('<option/>').html('all').attr('value','all'));",
        "    for (var i=0; i<n; i++) {",
        "        select.append($('<option/>').html(this.targets[i]).attr('value',this.targets[i]))",
        "    }",
        "    control.append(control_label).append(select);",
        "",
        "    var input = $('<div></div>').addClass('input hbox');",
        "    var input_area = $('<div/>').addClass('input_area box-flex1');",
        "    this.code_mirror = CodeMirror(input_area.get(0), {",
        "        indentUnit : 4,",
        "        mode: 'python',",
        "        theme: 'ipython',",
        "        onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)",
        "    });",
        "    input.append(input_area);",
        "    var output = $('<div></div>');",
        "",
        "",
        "    this.element.append(control).append(input).append(output);",
        "\tthis.output_area = new IPython.OutputArea(output, false);",
        "",
        "};",
        "",
        "",
        "DirectViewWidget.prototype.handle_codemirror_keyevent = function (editor, event) {",
        "    // This method gets called in CodeMirror's onKeyDown/onKeyPress",
        "    // handlers and is used to provide custom key handling. Its return",
        "    // value is used to determine if CodeMirror should ignore the event:",
        "    // true = ignore, false = don't ignore.",
        "  ",
        "    var that = this;",
        "    var cur = editor.getCursor();",
        "",
        "    if (event.keyCode === key.ENTER && event.shiftKey && event.type === 'keydown') {",
        "        // Always ignore shift-enter in CodeMirror as we handle it.",
        "        event.stop();",
        "        that.execute();",
        "        return true;",
        "    } else if (event.keyCode === key.UP && event.type === 'keydown') {",
        "        event.stop();",
        "        return false;",
        "    } else if (event.keyCode === key.DOWN && event.type === 'keydown') {",
        "        event.stop();",
        "        return false;",
        "    } else if (event.keyCode === key.BACKSPACE && event.type == 'keydown') {",
        "        // If backspace and the line ends with 4 spaces, remove them.",
        "        var line = editor.getLine(cur.line);",
        "        var ending = line.slice(-4);",
        "        if (ending === '    ') {",
        "            editor.replaceRange('',",
        "                {line: cur.line, ch: cur.ch-4},",
        "                {line: cur.line, ch: cur.ch}",
        "            );",
        "            event.stop();",
        "            return true;",
        "        } else {",
        "            return false;",
        "        };",
        "    };",
        "",
        "    return false;",
        "};",
        "",
        "",
        "// Kernel related calls.",
        "",
        "",
        "DirectViewWidget.prototype.set_kernel = function (kernel) {",
        "    this.kernel = kernel;",
        "}",
        "",
        "",
        "DirectViewWidget.prototype.execute = function () {",
        "    this.output_area.clear_output(true, true, true);",
        "    this.element.addClass(\"running\");",
        "    var callbacks = {",
        "        'execute_reply': $.proxy(this._handle_execute_reply, this),",
        "        'output': $.proxy(this.output_area.handle_output, this.output_area),",
        "        'clear_output': $.proxy(this.output_area.handle_clear_output, this.output_area),",
        "    };",
        "    var target = this.element.find('.dv_select option:selected').attr('value');",
        "    if (target === 'all') {",
        "        target = '\"all\"';",
        "    }",
        "    var code = '__widget_b32c0bd12a804f69b0e6445ef57c08d9.execute(\"\"\"'+this.get_text()+'\"\"\",targets='+target+')';",
        "    var msg_id = this.kernel.execute(code, callbacks, {silent: false});",
        "    this.clear_input();",
        "    this.code_mirror.focus();",
        "};",
        "",
        "",
        "DirectViewWidget.prototype._handle_execute_reply = function (content) {",
        "    this.element.removeClass(\"running\");",
        "    // this.dirty = true;",
        "}",
        "",
        "// Basic cell manipulation.",
        "",
        "",
        "DirectViewWidget.prototype.select_all = function () {",
        "    var start = {line: 0, ch: 0};",
        "    var nlines = this.code_mirror.lineCount();",
        "    var last_line = this.code_mirror.getLine(nlines-1);",
        "    var end = {line: nlines-1, ch: last_line.length};",
        "    this.code_mirror.setSelection(start, end);",
        "};",
        "",
        "",
        "DirectViewWidget.prototype.clear_input = function () {",
        "    this.code_mirror.setValue('');",
        "};",
        "",
        "",
        "DirectViewWidget.prototype.get_text = function () {",
        "    return this.code_mirror.getValue();",
        "};",
        "",
        "",
        "DirectViewWidget.prototype.set_text = function (code) {",
        "    return this.code_mirror.setValue(code);",
        "};",
        "",
        "container.show();",
        "var widget = $('<div/>')",
        "// When templating over a JSON string, we must use single quotes.",
        "var targets = '[0,1,2,3]';",
        "targets = $.parseJSON(targets);",
        "var eiw = new DirectViewWidget(widget, IPython.notebook.kernel, targets);",
        "element.append(widget);",
        "element.css('padding',0);",
        "setTimeout(function () {",
        "    eiw.code_mirror.refresh();",
        "    eiw.code_mirror.focus();",
        "}, 1);",
        "",
        ""
       ],
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x107d35fd0>"
       ]
      },
      {
       "output_type": "pyout",
       "prompt_number": 6,
       "text": [
        "<IPython.frontend.html.notebook.widgets.directview.DirectViewWidget at 0x107eb9890>"
       ]
      }
     ],
     "prompt_number": 6
    }
   ]
  }
 ]
}