Initial reply handling implemented along with css fixes.

IPython/frontend/html/notebook/kernelmanager.py

@@ -33,7 +33,7 b' class KernelManager(object):'
     def start_kernel(self, kernel_id):
         if kernel_id in self._kernels:
             raise DuplicateKernelError("Kernel already exists: %s" % kernel_id)
-        (process, shell_port, iopub_port, stdin_port, hb_port) = launch_kernel()
+        (process, shell_port, iopub_port, stdin_port, hb_port) = launch_kernel(pylab='inline')
         d = dict(
             process = process,
             stdin_port = stdin_port,

IPython/frontend/html/notebook/notebook.py

@@ -80,13 +80,15 b' class ZMQStreamHandler(websocket.WebSocketHandler, BaseKernelHandler):'
         self.zmq_stream.on_recv(self._on_zmq_reply)
 
     def on_message(self, msg):
-        logging.info("Message received: %r" % msg)
+        logging.info("Message received: %r, %r" % (msg, self.__class__))
+        logging.info(self.zmq_stream)
         self.zmq_stream.send_unicode(msg)
 
     def on_close(self):
         self.zmq_stream.close()
 
-    def _on_zmq_reply(self, msg):
+    def _on_zmq_reply(self, msg_list):
+        for msg in msg_list:
         logging.info("Message reply: %r" % msg)
         self.write_message(msg)
 

IPython/frontend/html/notebook/session.py

@@ -33,6 +33,7 b' class SessionManager(object):'
         session_id = str(uuid.uuid4())
         ports = self.kernel_manager.get_kernel_ports(self.kernel_id)
         iopub_stream = self.create_connected_stream(ports['iopub_port'], zmq.SUB)
+        iopub_stream.socket.setsockopt(zmq.SUBSCRIBE, b'')
         shell_stream = self.create_connected_stream(ports['shell_port'], zmq.XREQ)
         self._sessions[session_id] = dict(
             iopub_stream = iopub_stream,
@@ -54,7 +55,7 b' class SessionManager(object):'
     def create_connected_stream(self, port, socket_type):
         sock = self.context.socket(socket_type)
         addr = "tcp://%s:%i" % (self.kernel_manager.ip, port)
-        logging.info("Connecting to: %s" % addr)
+        logging.info("Connecting to: %s, %r" % (addr, socket_type))
         sock.connect(addr)
         return ZMQStream(sock)
 

IPython/frontend/html/notebook/static/css/notebook.css

@@ -1,15 +1,30 b''
-html, body, div, span, applet, object, iframe,
+/**
+ * HTML5 ✰ Boilerplate
+ *
+ * style.css contains a reset, font normalization and some base styles.
+ *
+ * Credit is left where credit is due.
+ * Much inspiration was taken from these projects:
+ * - yui.yahooapis.com/2.8.1/build/base/base.css
+ * - camendesign.com/design/
+ * - praegnanz.de/weblog/htmlcssjs-kickstart
+ */
+
+
+/**
+ * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
+ * html5doctor.com/html-5-reset-stylesheet/
+ */
+
+html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
 time, mark, audio, video {
     margin: 0;
     padding: 0;
@@ -19,6 +34,44 b' time, mark, audio, video {'
     vertical-align: baseline;
 }
 
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+input, select { vertical-align: middle; }
+
+
+/**
+ * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
+ */
+
+body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
+select, input, textarea, button { font:99% sans-serif; }
+
+/* Normalize monospace sizing:
+   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+
+
 body {
     background-color: white;
 }
@@ -40,42 +93,30 b' div#toolbar {'
 	padding: 5px;
 }
 
-#main_toolbar {
-}
 
-#main_toolbar button {
+/*#main_toolbar button {
     font-size: 0.9em;
-}
+}*/
 
 div.notebook {
-    width: 760px;
+    width: 790px;
     height: 100%;
     margin-left: auto;
     margin-right: auto;
     padding-top: 5px;
     padding-bottom: 5px;
     background-color: white;
-
-/*  Uncomment this block for help in debugging the padding and margins
-/*    border-left-width: 1px;
-    border-left-style: solid;
-    border-left-color: black;
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-right-color: black;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: black;*/
 }
 
 div.cell {
     width: 740px;
-    margin: 5px 5px 5px 5px;
+    margin: 5px auto 5px 5px;
     padding: 5px;
-    font-size: 11pt;
     position: relative;
+    display: table;
 }
 
+
 div.code_cell {
     background-color: white;
 }
@@ -83,16 +124,18 b' div.code_cell {'
 div.prompt {
     vertical-align: top;
     display: table-cell;
-    width: 85px;
-    min-width 80px !important;
+    width: 80px;
+    padding: 0px;
+    margin: 0px;
     font-family: Menlo, "Courier New", Courier, mono;
     font-weight: normal;
     font-style: normal;
 }
 
 div.input {
-    display: table;
-    height: auto;
+    display: table-row;
+    padding: 0px;
+    margin: 0px;
 }
 
 div.input_prompt {
@@ -106,19 +149,21 b' textarea.input_area {'
     font-size: inherit;
     border-style: none;
     display: table-cell;
-    margin: 0;
-    padding: 0;
+    padding: 0px;
+    margin: 0px;
     overflow: auto;
     font-weight: normal;
     font-style: normal;
-    width: 665px;
+    width: 650px;
     outline: none;
     resize: none;
 }
 
 
 div.output {
-    display: table;
+    display: table-row;
+    padding: 0px;
+    margin: 0px;
 }
 
 div.output_prompt {
@@ -128,11 +173,10 b' div.output_prompt {'
 div.output_area {
     text-align: left;
     font-family: Menlo, "Courier New", Courier, mono;
-    font-size: inherit;
-    margin:  0;
-    padding:  0;
+    padding: 0px;
+    margin: 0px;
     display: table-cell;
-    width:  665px;
+    width:  650px;
 }
 
 div.text_cell {

IPython/frontend/html/notebook/static/js/notebook.js

@@ -2,6 +2,67 b' var IPYTHON = {};'
 
 
 //============================================================================
+// Utilities
+//============================================================================
+
+
+var uuid = function () {
+    // http://www.ietf.org/rfc/rfc4122.txt
+    var s = [];
+    var hexDigits = "0123456789ABCDEF";
+    for (var i = 0; i < 32; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[12] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
+    s[16] = hexDigits.substr((s[16] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
+
+    var uuid = s.join("");
+    return uuid;
+};
+
+
+//Fix raw text to parse correctly in crazy XML
+function xmlencode(string) {
+    return string.replace(/\&/g,'&'+'amp;')
+        .replace(/</g,'&'+'lt;')
+        .replace(/>/g,'&'+'gt;')
+        .replace(/\'/g,'&'+'apos;')
+        .replace(/\"/g,'&'+'quot;')
+        .replace(/`/g,'&'+'#96;')
+}
+
+//Map from terminal commands to CSS classes
+attrib = {
+    "30":"cblack", "31":"cred",
+    "32":"cgreen", "33":"cyellow",  
+    "34":"cblue", "36":"ccyan", 
+    "37":"cwhite", "01":"cbold"}
+
+//Fixes escaped console commands, IE colors. Turns them into HTML
+function fixConsole(txt) {
+    txt = xmlencode(txt)
+    var re = /\033\[([\d;]*?)m/
+    var opened = false
+    var cmds = []
+    var opener = ""
+    var closer = ""
+    
+    while (re.test(txt)) {
+        var cmds = txt.match(re)[1].split(";")
+        closer = opened?"</span>":""
+        opened = cmds.length > 1 || cmds[0] != 0
+        var rep = []
+        for (var i in cmds)
+            if (typeof(attrib[cmds[i]]) != "undefined")
+                rep.push(attrib[cmds[i]])
+        opener = rep.length > 0?"<span class=\""+rep.join(" ")+"\">":""
+        txt = txt.replace(re, closer + opener)
+    }
+    if (opened) txt += "</span>"
+    return txt.trim()
+}
+
+//============================================================================
 // Notebook
 //============================================================================
 
@@ -11,14 +72,18 b' var Notebook = function (selector) {'
     this.element.scroll();
     this.element.data("notebook", this);
     this.next_prompt_number = 1;
+    this.next_kernel_number = 0;
+    this.kernel = null;
+    this.msg_cell_map = {};
     this.bind_events();
+    this.start_kernel();
 };
 
 
 Notebook.prototype.bind_events = function () {
     var that = this;
     $(document).keydown(function (event) {
-        console.log(event);
+        // console.log(event);
         if (event.which == 38 && event.shiftKey) {
             event.preventDefault();
             that.select_prev();
@@ -27,9 +92,27 b' Notebook.prototype.bind_events = function () {'
             that.select_next();
         } else if (event.which == 13 && event.shiftKey) {
             // The focus is not quite working here.
+            var cell = that.selected_cell();
+            var cell_index = that.find_cell_index(cell);
+            if (cell instanceof CodeCell) {
             event.preventDefault();
+                cell.clear_output();
+                var msg_id = that.kernel.execute(cell.get_code());
+                that.msg_cell_map[msg_id] = cell.cell_id;
+                if (cell_index === (that.ncells()-1)) {
             that.insert_code_cell_after();
+                } else {
+                    that.select(cell_index+1);
+                };
         }
+        } else if (event.which == 9) {
+            event.preventDefault();
+            var cell = that.selected_cell();
+            if (cell instanceof CodeCell) {
+                var ta = cell.element.find("textarea.input_area");
+                ta.val(ta.val() + "    ");
+            };
+        };
     });
 };
 
@@ -112,6 +195,19 b' Notebook.prototype.selected_index = function () {'
 };
 
 
+Notebook.prototype.cell_for_msg = function (msg_id) {
+    var cell_id = this.msg_cell_map[msg_id];
+    var result = null;
+    this.cell_elements().filter(function (index) {
+        cell = $(this).data("cell");
+        if (cell.cell_id === cell_id) {
+            result = cell;
+        };
+    });
+    return result;
+};
+
+
 Notebook.prototype.selected_cell = function () {
     return this.cell_elements().eq(this.selected_index()).data("cell");
 }
@@ -301,13 +397,63 b' Notebook.prototype.code_to_text = function (index) {'
 Notebook.prototype.collapse = function (index) {
     var i = this.index_or_selected(index);
     this.cells()[i].collapse();
-}
+};
 
 
 Notebook.prototype.expand = function (index) {
     var i = this.index_or_selected(index);
     this.cells()[i].expand();
-}
+};
+
+
+// Kernel related things
+
+Notebook.prototype.start_kernel = function () {
+    this.kernel = new Kernel("kernel" + this.next_kernel_number);
+    this.next_kernel_number = this.next_kernel_number + 1;
+    this.kernel.start_kernel(this._kernel_started, this);
+};
+
+
+Notebook.prototype._kernel_started = function () {
+    console.log("Kernel started: ", this.kernel.kernel_id);
+    this.kernel.start_session(this._session_started, this);
+};
+
+
+Notebook.prototype._session_started = function () {
+    console.log("Session started: ", this.kernel.session_id);
+    var that = this;
+
+    this.kernel.shell_channel.onmessage = function (e) {
+        reply = $.parseJSON(e.data);
+        console.log(reply);
+        var msg_type = reply.msg_type;
+        var cell = that.cell_for_msg(reply.parent_header.msg_id);
+        if (msg_type === "execute_reply") {
+            cell.set_prompt(reply.content.execution_count);
+        };
+    };
+
+    this.kernel.iopub_channel.onmessage = function (e) {
+        reply = $.parseJSON(e.data);
+        console.log(reply);
+        var msg_type = reply.msg_type;
+        var cell = that.cell_for_msg(reply.parent_header.msg_id);
+        if (msg_type === "stream") {
+            cell.expand();
+            cell.append_stream(reply.content.data + "\n");
+        } else if (msg_type === "pyout" || msg_type === "display_data") {
+            cell.expand();
+            cell.append_display_data(reply.content.data);
+        };
+    };
+};
+
+
+Notebook.prototype._handle_execute_reply = function (reply, cell) {
+    cell.set_prompt(reply.content.execution_count);
+};
 
 
 //============================================================================
@@ -324,6 +470,7 b' var Cell = function (notebook) {'
         this.element.data("cell", this);
         this.bind_events();
     }
+    this.cell_id = uuid();
 };
 
 
@@ -394,9 +541,41 b' CodeCell.prototype.create_element = function () {'
                 ).append(
                     $('<div/>').addClass('output_area')
                 );
-    output.hide();
     cell.append(input).append(output);
     this.element = cell;
+    this.collapse()
+};
+
+
+CodeCell.prototype.append_stream = function (data) {
+    var data_list = data.split("\n");
+    console.log(data_list);
+    if (data_list.length > 0) {
+        for (var i=0; i<data_list.length; i++) {
+            console.log(i, data_list[i]);
+            var toinsert = fixConsole(data_list[i]);
+            this.element.find("div.output_area").append($("<p>").append(toinsert));
+        };
+    }
+};
+
+
+CodeCell.prototype.append_display_data = function (data) {
+    if (data["image/svg+xml"] !== undefined) {
+        this.append_svg(data["image/svg+xml"]);
+    } else if (data["text/plain"] !== undefined) {
+        console.log(data["text/plain"]);
+        this.append_stream(data["text/plain"]);
+    };
+};
+
+CodeCell.prototype.append_svg = function (svg) {
+    this.element.find("div.output_area").append(svg);
+};
+
+
+CodeCell.prototype.clear_output = function () {
+    this.element.find("div.output_area").html("");
 };
 
 
@@ -429,6 +608,10 b' CodeCell.prototype.set_output_prompt = function (number) {'
 };
 
 
+CodeCell.prototype.get_code = function () {
+    return this.element.find("textarea.input_area").val();
+};
+
 //============================================================================
 // TextCell
 //============================================================================
@@ -508,34 +691,71 b' TextCell.prototype.config_mathjax = function () {'
 //============================================================================
 
 
-var KernelManager = function () {
-    this.kernelid = null;
-    this.baseurl = "/kernels";
+var Kernel = function (kernel_id) {
+    this.kernel_id = kernel_id;
+    this.base_url = "/kernels";
+    this.kernel_url = this.base_url + "/" + this.kernel_id
+    this.session_id = null;
 };
 
 
-KernelManager.prototype.create_kernel = function () {
+Kernel.prototype.get_msg = function (msg_type, content) {
+    var msg = {
+        header : {
+            msg_id : uuid(),
+            username : "bgranger",
+            session: this.session_id
+        },
+        msg_type : msg_type,
+        content : content,
+        parent_header : {}
+    };
+    return msg;
+}
+
+Kernel.prototype.start_kernel = function (callback, context) {
+    $.post(this.kernel_url, function () {
+        callback.call(context);
+    });
+};
+
+
+Kernel.prototype.start_session = function (callback, context) {
     var that = this;
-    $.post(this.baseurl, function (data) {
-        that.kernelid = data;
-    }, 'json');
+    $.post(this.kernel_url + "/sessions",
+        function (session_id) {
+            that._handle_start_session(session_id, callback, context);
+        },
+        'json');
 }
 
 
-KernelManager.prototype.execute = function (code, callback) {
-    var msg = {
-        header : {msg_id : 0, username : "bgranger", session: 0},
-        msg_type : "execute_request",
-        content : {code : code}
-    };
-    var settings = {
-      data : JSON.stringify(msg),
-      processData : false,
-      contentType : "application/json",
-      success : callback,
-      type : "POST"
+Kernel.prototype._handle_start_session = function (session_id, callback, context) {
+    this.session_id = session_id;
+    this.session_url = this.kernel_url + "/sessions/" + this.session_id;
+    this._start_channels();
+    callback.call(context);
+};
+
+
+Kernel.prototype._start_channels = function () {
+    var ws_url = "ws://127.0.0.1:8888" + this.session_url;
+    this.shell_channel = new WebSocket(ws_url + "/shell");
+    this.iopub_channel = new WebSocket(ws_url + "/iopub");
     }
-    var url = this.baseurl + "/" + this.kernelid + "/" + ""
+
+
+Kernel.prototype.execute = function (code) {
+    var content = {
+        code : code,
+        silent : false,
+        user_variables : [],
+        user_expressions : {}
+    };
+    var msg = this.get_msg("execute_request", content);
+
+    this.shell_channel.send(JSON.stringify(msg));
+    return msg.header.msg_id;
 }
 
 
@@ -579,4 +799,8 b' $(document).ready(function () {'
     $("#sort").buttonset();
     $("#sort_cells").click(function () {IPYTHON.notebook.sort_cells();});
 
+    $("#toggle").buttonset();
+    $("#collapse").click(function () {IPYTHON.notebook.collapse();});
+    $("#expand").click(function () {IPYTHON.notebook.expand();});
+
 });
  No newline at end of file

IPython/frontend/html/notebook/templates/notebook.html

@@ -67,6 +67,10 b''
         <span id="sort">
             <button id="sort_cells">Sort</button>
         </span>
+        <span id="toggle">
+            <button id="collapse">Collapse</button>
+            <button id="expand">Expand</button>
+        </span>
     </span>
 </div>
 

IPython/zmq/ipkernel.py

@@ -46,7 +46,6 b' from session import Session, Message'
 from zmqshell import ZMQInteractiveShell
 
 
-
 #-----------------------------------------------------------------------------
 # Main kernel class
 #-----------------------------------------------------------------------------