Work on save widget, kernel status widget and notebook section.

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

@@ -0,0 +1,54 b''
+
+//============================================================================
+// Kernel Status widget
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var utils = IPython.utils;
+
+    var KernelStatusWidget = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+        }
+    };
+
+
+    KernelStatusWidget.prototype.style = function () {
+        this.element.addClass('ui-widget');
+    };
+
+
+    KernelStatusWidget.prototype.status_busy = function () {
+        this.element.removeClass("status_idle");
+        this.element.removeClass("status_restarting");
+        this.element.addClass("status_busy");
+        this.element.text("Busy");
+    };
+
+
+    KernelStatusWidget.prototype.status_idle = function () {
+        this.element.removeClass("status_busy");
+        this.element.removeClass("status_restarting");
+        this.element.addClass("status_idle");
+        this.element.text("Idle");
+    };
+
+    KernelStatusWidget.prototype.status_restarting = function () {
+        this.element.removeClass("status_busy");
+        this.element.removeClass("status_idle");
+        this.element.addClass("status_restarting");
+        this.element.text("Restarting");
+    };
+
+
+
+
+    IPython.KernelStatusWidget = KernelStatusWidget;
+
+    return IPython;
+
+}(IPython));
+

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

@@ -74,23 +74,39 b' body {'
 
 
 div#header {
-    height: 35px;
+    position: relative;
+    height: 45px;
     padding: 5px;
     margin: 0px;
     width: 100%
 }
 
 span#ipython_notebook {
+    position: absolute;
 }
 
 span#ipython_notebook h1 {
     font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     font-size: 22pt;
+    display: inline;
+}
+
+span#save_widget {
+    position: absolute;
+    left: 0px;
+    padding: 5px 0px;
+    margin: 0px 0px 0px 0px;
+}
+
+input#notebook_name {
+    height: 1em;
+    line-height: 1em;
+    padding: 5px;
 }
 
 span#kernel_status {
     position: absolute;
-    top: 12%;
+    padding: 8px 5px 5px 5px;
     right: 10px;
 	font-weight: bold;
 }
@@ -129,22 +145,27 b' div.section_content {'
     padding: 5px;
 }
 
-#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below,
-#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell,
-#run_all_cells, #int_kernel, #restart_kernel, #python_help, #ipython_help,
-#numpy_help, #matplotlib_help, #scipy_help, #sympy_help {
-    width: 65px;
+/*#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below,*/
+/*#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell,*/
+/*#run_all_cells, #int_kernel, #restart_kernel, #python_help, #ipython_help,*/
+/*#numpy_help, #matplotlib_help, #scipy_help, #sympy_help, #new_notebook,*/
+/*#open_notebook {*/
+/*    width: 60px;*/
+/*}*/
+
+span.section_row_buttons > button {
+    width: 60px;
 }
 
-.cell_section_row {
+.section_row {
     margin: 5px 0px;
 }
 
-.cell_section_row_buttons {
+.section_row_buttons {
     float: right;
 }
 
-.cell_section_row_header {
+.section_row_header {
     float: left;
     font-size: 0.8em;
     padding: 0.2em 0em;
@@ -158,7 +179,7 b' span.button_label {'
 }
 
 /* This is needed because FF was adding a 2px margin top and bottom. */
-.cell_section_row .ui-button {
+.section_row .ui-button {
     margin-top: 0px;
     margin-bottom: 0px;
 }

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

@@ -73,40 +73,18 b' var IPython = (function (IPython) {'
 
 
     Kernel.prototype.restart = function () {
-        this.status_restarting();
+        IPython.kernel_status_widget.status_restarting();
         url = this.kernel_url + "/restart"
         var that = this;
         $.post(url, function (kernel_id) {
             console.log("Kernel restarted: " + kernel_id);
             that.kernel_id = kernel_id;
             that.kernel_url = that.base_url + "/" + that.kernel_id;
-            that.status_idle();
+            IPython.kernel_status_widget.status_idle();
         }, 'json');
     };
 
 
-    Kernel.prototype.status_busy = function () {
-        $("#kernel_status").removeClass("status_idle");
-        $("#kernel_status").removeClass("status_restarting");
-        $("#kernel_status").addClass("status_busy");
-        $("#kernel_status").text("Busy");
-    };
-
-
-    Kernel.prototype.status_idle = function () {
-        $("#kernel_status").removeClass("status_busy");
-        $("#kernel_status").removeClass("status_restarting");
-        $("#kernel_status").addClass("status_idle");
-        $("#kernel_status").text("Idle");
-    };
-
-    Kernel.prototype.status_restarting = function () {
-        $("#kernel_status").removeClass("status_busy");
-        $("#kernel_status").removeClass("status_idle");
-        $("#kernel_status").addClass("status_restarting");
-        $("#kernel_status").text("Restarting");
-    };
-
     IPython.Kernel = Kernel;
 
     return IPython;

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

@@ -28,9 +28,9 b' var IPython = (function (IPython) {'
 
         $('div#left_panel_splitter').height(app_height);
 
+        $('div#notebook_panel').height(app_height);
         var left_panel_width = $('div#left_panel').outerWidth();
         var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
-        $('div#notebook_panel').height(app_height);
         if (IPython.left_panel.expanded) {
             $('div#notebook_panel').css({marginLeft : left_panel_width+left_panel_splitter_width});
         } else {

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

@@ -57,15 +57,10 b' var IPython = (function (IPython) {'
 
 
     LeftPanel.prototype.create_children = function () {
-        this.notebook_section = new IPython.NotebookSection();
-        this.left_panel_element.append(this.notebook_section.element);
-        this.cell_section = new IPython.CellSection();
-        this.left_panel_element.append(this.cell_section.element);        
-        this.kernel_section = new IPython.KernelSection();
-        this.left_panel_element.append(this.kernel_section.element);   
-        this.help_section = new IPython.HelpSection();
-        this.left_panel_element.append(this.help_section.element);
-        this.help_section.collapse();
+        this.notebook_section = new IPython.NotebookSection('div#notebook_section');
+        this.cell_section = new IPython.CellSection('div#cell_section');
+        this.kernel_section = new IPython.KernelSection('div#kernel_section');
+        this.help_section = new IPython.HelpSection('div#help_section');
     }
 
     LeftPanel.prototype.collapse = function () {

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

@@ -474,9 +474,9 b' var IPython = (function (IPython) {'
             cell.append_pyerr(content.ename, content.evalue, content.traceback);
         } else if (msg_type === "status") {
             if (content.execution_state === "busy") {
-                this.kernel.status_busy();
+                IPython.kernel_status_widget.status_busy();
             } else if (content.execution_state === "idle") {
-                this.kernel.status_idle();
+                IPython.kernel_status_widget.status_idle();
             };
         }
     };

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

@@ -17,14 +17,17 b' $(document).ready(function () {'
         }
     });
 
+    $('div#header').addClass('border-box-sizing');
     $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
 
     IPython.layout_manager = new IPython.LayoutManager();
-//    IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter');
+    IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.notebook = new IPython.Notebook('div#notebook');
+    IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status');
+    IPython.kernel_status_widget.status_idle();
 
     IPython.notebook.insert_code_cell_after();
     IPython.layout_manager.do_resize();

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

@@ -11,7 +11,7 b' var IPython = (function (IPython) {'
         this.pager_element = $(pager_selector);
         this.pager_splitter_element = $(pager_splitter_selector);
         this.expanded = true;
-        this.percentage_height = 0.30;
+        this.percentage_height = 0.40;
         this.style();
         this.bind_events();
     };

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

@@ -9,18 +9,25 b' var IPython = (function (IPython) {'
 
     // Base PanelSection class
 
-    var PanelSection = function () {
-        if (this.section_name === undefined) {
-            this.section_name = 'section';
-        };
-        this.create_element();
-        if (this.element !== undefined) {
+    var PanelSection = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.header = this.element.find('h3.section_header');
+            this.content = this.element.find('div.section_content');
+            this.style();
             this.bind_events();
         }
         this.expanded = true;
     };
 
 
+    PanelSection.prototype.style = function () {
+        this.header.addClass('ui-widget ui-state-default');
+        this.content.addClass('ui-widget section_content');
+    };
+
+
     PanelSection.prototype.bind_events = function () {
         var that = this;
         this.header.click(function () {
@@ -32,27 +39,9 b' var IPython = (function (IPython) {'
     };
 
 
-    PanelSection.prototype.create_element = function () {
-        this.element = $('<div/>').attr('id',this.id());
-        this.header = $('<h3>'+this.section_name+'</h3>').
-            addClass('ui-widget ui-state-default section_header');
-        this.content = $('<div/>').
-            addClass('ui-widget section_content');
-        this.element.append(this.header).append(this.content);
-        this.create_children();
-    };
-
-
-    PanelSection.prototype.id = function () {
-        return this.section_name.toLowerCase() + "_section";
-    };
-
-
     PanelSection.prototype.expand = function () {
         if (!this.expanded) {
             this.content.slideDown('fast');
-//            this.header.addClass('ui-state-active');
-//            this.header.removeClass('ui-state-default');
             this.expanded = true;
         };
     };
@@ -61,8 +50,6 b' var IPython = (function (IPython) {'
     PanelSection.prototype.collapse = function () {
         if (this.expanded) {
             this.content.slideUp('fast');
-//            this.header.removeClass('ui-state-active');
-//            this.header.addClass('ui-state-default');
             this.expanded = false;
         };
     };
@@ -83,7 +70,6 b' var IPython = (function (IPython) {'
     // NotebookSection
 
     var NotebookSection = function () {
-        this.section_name = "Notebook";
         PanelSection.apply(this, arguments);
     };
 
@@ -91,10 +77,28 b' var IPython = (function (IPython) {'
     NotebookSection.prototype = new PanelSection();
 
 
+    NotebookSection.prototype.style = function () {
+        PanelSection.prototype.style.apply(this);
+        this.content.addClass('ui-helper-clearfix');
+        this.content.find('div.section_row').addClass('ui-helper-clearfix');
+        this.content.find('#new_open').buttonset();
+    };
+
+
+    NotebookSection.prototype.bind_events = function () {
+        PanelSection.prototype.bind_events.apply(this);
+        this.content.find('#new_notebook').click(function () {
+            alert('Not Implemented');
+        });
+        this.content.find('#open_notebook').click(function () {
+            alert('Not Implemented');
+        });
+    };
+
+
     // CellSection
 
     var CellSection = function () {
-        this.section_name = "Cell";
         PanelSection.apply(this, arguments);
     };
 
@@ -102,6 +106,19 b' var IPython = (function (IPython) {'
     CellSection.prototype = new PanelSection();
 
 
+    CellSection.prototype.style = function () {
+        PanelSection.prototype.style.apply(this);
+        this.content.addClass('ui-helper-clearfix');
+        this.content.find('div.section_row').addClass('ui-helper-clearfix');
+        this.content.find('#delete_cell').button();
+        this.content.find('#insert').buttonset();
+        this.content.find('#move').buttonset();
+        this.content.find('#cell_type').buttonset();
+        this.content.find('#toggle_output').buttonset();
+        this.content.find('#run_cells').buttonset();
+    };
+
+
     CellSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#collapse_cell').click(function () {
@@ -140,63 +157,9 b' var IPython = (function (IPython) {'
     };
 
 
-    CellSection.prototype.create_children = function () {
-
-        this.content.addClass('ui-helper-clearfix');
-
-        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').addClass('cell_section_row_buttons').
-                append($('<button>X</button>').attr('id','delete_cell'))).
-            append($('<span/>').html('Actions').addClass('cell_section_row_header'));
-        row0.find('#delete_cell').button();
-        this.content.append(row0);
-
-        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','insert').addClass('cell_section_row_buttons').
-                append( $('<button>Above</button>').attr('id','insert_cell_above') ).
-                append( $('<button>Below</button>').attr('id','insert_cell_below') )).
-            append($('<span/>').html('Insert').addClass('button_label'));
-        row1.find('#insert').buttonset();
-        this.content.append(row1);
-
-        var row2 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','move').addClass('cell_section_row_buttons').
-                append( $('<button>Up</button>').attr('id','move_cell_up') ).
-                append( $('<button>Down</button>').attr('id','move_cell_down') ) ).
-            append($('<span/>').html('Move').addClass('button_label'));
-        row2.find('#move').buttonset();
-        this.content.append(row2);
-
-        var row3 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','cell_type').addClass('cell_section_row_buttons').
-                append( $('<button>Code</button>').attr('id','to_code') ).
-                append( $('<button>Text</button>').attr('id','to_text') ) ).
-            append($('<span/>').html('Cell Type').addClass('button_label'));
-        row3.find('#cell_type').buttonset();
-        this.content.append(row3);
-
-        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','toggle_output').addClass('cell_section_row_buttons').
-                append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
-                append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
-            append($('<span/>').html('Output').addClass('button_label'));
-        row1.find('#toggle_output').buttonset();
-        this.content.append(row1);
-
-        var row0 = $('<div>').addClass('cell_section_row').
-            append($('<span/>').attr('id','run_cells').addClass('cell_section_row_buttons').
-                append( $('<button>Selected</button>').attr('id','run_selected_cell') ).
-                append( $('<button>All</button>').attr('id','run_all_cells') ) ).
-            append($('<span/>').html('Run').addClass('button_label'));
-        row0.find('#run_cells').buttonset();
-        this.content.append(row0);
-    };
-
-
     // KernelSection
 
     var KernelSection = function () {
-        this.section_name = "Kernel";
         PanelSection.apply(this, arguments);
     };
 
@@ -204,6 +167,14 b' var IPython = (function (IPython) {'
     KernelSection.prototype = new PanelSection();
 
 
+    KernelSection.prototype.style = function () {
+        PanelSection.prototype.style.apply(this);
+        this.content.addClass('ui-helper-clearfix');
+        this.content.find('div.section_row').addClass('ui-helper-clearfix');
+        this.content.find('#int_restart').buttonset();
+    };
+
+
     KernelSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#restart_kernel').click(function () {
@@ -215,24 +186,9 b' var IPython = (function (IPython) {'
     };
 
 
-    KernelSection.prototype.create_children = function () {
-
-        this.content.addClass('ui-helper-clearfix');
-
-        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','int_restart').addClass('cell_section_row_buttons').
-                append( $('<button>Interrupt</button>').attr('id','int_kernel') ).
-                append( $('<button>Restart</button>').attr('id','restart_kernel') )).
-            append($('<span/>').html('Actions').addClass('cell_section_row_header'));
-        row0.find('#int_restart').buttonset();
-        this.content.append(row0);
-    };
-
-
     // HelpSection
 
     var HelpSection = function () {
-        this.section_name = "Help";
         PanelSection.apply(this, arguments);
     };
 
@@ -240,38 +196,22 b' var IPython = (function (IPython) {'
     HelpSection.prototype = new PanelSection();
 
 
-    HelpSection.prototype.bind_events = function () {
-        PanelSection.prototype.bind_events.apply(this);
+    HelpSection.prototype.style = function () {
+        PanelSection.prototype.style.apply(this);
+        PanelSection.prototype.style.apply(this);
+        this.content.addClass('ui-helper-clearfix');
+        this.content.find('div.section_row').addClass('ui-helper-clearfix');
+        this.content.find('#help_buttons0').buttonset();
+        this.content.find('#help_buttons1').buttonset();
     };
 
 
-    HelpSection.prototype.create_children = function () {
+    HelpSection.prototype.bind_events = function () {
+        PanelSection.prototype.bind_events.apply(this);
+    };
 
-        this.content.addClass('ui-helper-clearfix');
 
-        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','help_buttons0').addClass('cell_section_row_buttons').
-                append( $('<button/>').attr('id','python_help').
-                    append( $('<a>Python</a>').attr('href','http://docs.python.org').attr('target','_blank') )).
-                append( $('<button/>').attr('id','ipython_help').
-                    append( $('<a>IPython</a>').attr('href','http://ipython.org/documentation.html').attr('target','_blank') )).
-                append( $('<button/>').attr('id','numpy_help').
-                    append( $('<a>NumPy</a>').attr('href','http://docs.scipy.org/doc/numpy/reference/').attr('target','_blank') ))).
-            append($('<span/>').html('Links').addClass('cell_section_row_header'));
-        row0.find('#help_buttons0').buttonset();
-        this.content.append(row0);
-
-        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
-            append($('<span/>').attr('id','help_buttons1').addClass('cell_section_row_buttons').
-                append( $('<button/>').attr('id','matplotlib_help').
-                    append( $('<a>MPL</a>').attr('href','http://matplotlib.sourceforge.net/').attr('target','_blank') )).
-                append( $('<button/>').attr('id','scipy_help').
-                    append( $('<a>SciPy</a>').attr('href','http://docs.scipy.org/doc/scipy/reference/').attr('target','_blank') )).
-                append( $('<button/>').attr('id','sympy_help').
-                    append( $('<a>SymPy</a>').attr('href','http://docs.sympy.org/dev/index.html').attr('target','_blank') )));
-        row1.find('#help_buttons1').buttonset();
-        this.content.append(row1);
-    };
+    // Set module variables
 
     IPython.PanelSection = PanelSection;
     IPython.NotebookSection = NotebookSection;

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

@@ -8,26 +8,41 b' var IPython = (function (IPython) {'
     var utils = IPython.utils;
 
     var SaveWidget = function (selector) {
-        this.element = $(selector);
-        this.create_element();
-        if (this.element !== undefined) {
-            this.element.data("cell", this);
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
             this.bind_events();
         }
     };
 
 
+    SaveWidget.prototype.style = function () {
+        this.element.find('input#notebook_name').addClass('ui-widget ui-widget-content');
+        this.element.find('button#save_notebook').button();
+        var left_panel_width = $('div#left_panel').outerWidth();
+        var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
+        $('span#save_widget').css({marginLeft:left_panel_width+left_panel_splitter_width});
+    };
+
+
     SaveWidget.prototype.bind_events = function () {
         var that = this;
+        this.element.find('button#save_notebook').click(function () {
+            IPython.notebook.save_notebook(that.get_notebook_name());
+        });
     };
 
 
-    // Subclasses must implement create_element.
-    SaveWidget.prototype.create_element = function () {
-        this.element.
-            append($('textarea')).
-            append($('<button>Save</button>').button());
-    };
+    SaveWidget.prototype.get_notebook_name = function () {
+        return this.element.find('input#notebook_name').attr('value');
+    }
+
+
+    SaveWidget.prototype.set_notebook_name = function (name) {
+        this.element.find('input#notebook_name').attr('value',name);
+    }
+
 
     IPython.SaveWidget = SaveWidget;
 

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

@@ -31,12 +31,112 b''
 
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
-    <span id="save_widget"></span>
+    <span id="save_widget">
+        <input type="text" id="notebook_name" size="20"></textarea>
+        <button id="save_notebook">Save</button>
+    </span>
+    <span id="kernel_status">Idle</span>
 </div>
 
 <div id="notebook_app">
 
-    <div id="left_panel"></div>
+    <div id="left_panel">
+
+        <div id="notebook_section">
+            <h3 class="section_header">Notebook</h3>
+            <div class="section_content">
+                <div class="section_row">
+                    <span id="new_open" class="section_row_buttons">
+                        <button id="new_notebook">New</button>
+                        <button id="open_notebook">Open</button>
+                    </span>
+                    <span class="section_row_header">Actions</span>
+                </div>
+            </div>
+        </div>
+
+        <div id="cell_section">
+            <h3 class="section_header">Cell</h3>
+            <div class="section_content">
+                <div class="section_row">
+                    <span class="section_row_buttons">
+                        <button id="delete_cell">Delete</button>
+                    </span>
+                    <span class="section_row_header">Actions</span>
+                </div>
+                <div class="section_row">
+                    <span id="insert" class="section_row_buttons">
+                        <button id="insert_cell_above">Above</button>
+                        <button id="insert_cell_below">Below</button>
+                    </span>
+                    <span class="button_label">Insert</span>
+                </div>
+                <div class="section_row">
+                    <span id="move" class="section_row_buttons">
+                        <button id="move_cell_up">Up</button>
+                        <button id="move_cell_down">Down</button>
+                    </span>
+                    <span class="button_label">Move</span>
+                </div>
+                <div class="section_row">
+                    <span id="cell_type" class="section_row_buttons">
+                        <button id="to_code">Code</button>
+                        <button id="to_text">Text</button>
+                    </span>
+                    <span class="button_label">Cell Type</span>
+                </div>
+                <div class="section_row">
+                    <span id="toggle_output" class="section_row_buttons">
+                        <button id="collapse_cell">Collapse</button>
+                        <button id="expand_cell">Expand</button>
+                    </span>
+                    <span class="button_label">Output</span>
+                </div>
+                <div class="section_row">
+                    <span id="run_cells" class="section_row_buttons">
+                        <button id="run_selected_cell">Selected</button>
+                        <button id="run_all_cells">All</button>
+                    </span>
+                    <span class="button_label">Run</span>
+                </div>
+            </div>
+        </div>
+
+        <div id="kernel_section">
+            <h3 class="section_header">Kernel</h3>
+            <div class="section_content">
+                <div class="section_row">
+                    <span id="int_restart" class="section_row_buttons">
+                        <button id="int_kernel">Interrupt</button>
+                        <button id="restart_kernel">Restart</button>
+                    </span>
+                    <span class="section_row_header">Actions</span>
+                </div>
+            </div>
+        </div>
+
+        <div id="help_section">
+            <h3 class="section_header">Help</h3>
+            <div class="section_content">
+                <div class="section_row">
+                    <span id="help_buttons0" class="section_row_buttons">
+                        <button id="python_help"><a href="http://docs.python.org" target="_blank">Python</a></button>
+                        <button id="ipython_help"><a href="http://ipython.org/documentation.html" target="_blank">IPython</a></button>
+                        <button id="numpy_help"><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
+                    </span>
+                    <span class="section_row_header">Links</span>
+                </div>
+                <div class="section_row">
+                    <span id="help_buttons1" class="section_row_buttons">
+                        <button id="matplotlib_help"><a href="http://matplotlib.sourceforge.net/" target="_blank">MPL</a></button>
+                        <button id="scipy_help"><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
+                        <button id="sympy_help"><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+    </div>
     <div id="left_panel_splitter"></div>
     <div id="notebook_panel">
         <div id="notebook"></div>
@@ -55,6 +155,7 b''
 <script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/savewidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>