As notebook issued for teaching a lot and in these case you have to zoom in. This is pretty critical.

Like for example creating a new notebook:

I have no clue if I have focus to rename, chose the kernel, if enter will cancel or validate.
And Tab/shift-tab key should cycle through these.

After cloning npm install appears to work but pip install -e . fails due to apparently not recognising npm even though it is on the path.

λ pip install -e .
Obtaining file:///C:/dev/code/jupyterlab
    Complete output from command python setup.py egg_info:
    setup.py entered
    running egg_info
    running jsdeps
    C:\Python\envs\py-dev\lib\distutils\dist.py:261: UserWarning: Unknown distribution option: 'License'
      warnings.warn(msg)
    `npm` unavailable.  If you're running this command using sudo, make sure `npm` is available to sudo
    Installing extension build dependencies with npm.  This may take a while...
    rebuilding js and css failed
    missing files: ['C:\\dev\\code\\jupyterlab\\jupyterlab\\build\\bundle.js']
    error: [WinError 2] The system cannot find the file specified

    ----------------------------------------
Command "python setup.py egg_info" failed with error code 1 in C:\dev\code\jupyterlab\

Updated status

• We are currently using FontAwesome for the icon set in JupyterLab
• However, the @jupyter/designers feel the FA set is too heavy and complex for JupyterLab
• There is agreement from the @jupyter/designers that moving the the Material Design icons is a good idea.
• The MD icons are optimized for 24/18 px display, but in our UI a size of 16px is best for the MD icons.
• If we display the MD icons at 16px, users on low resolutions screens will see aliasing effects.

There is a PR here that implements the MD icons in the notebook toolbar: #686

Original comment

As discussed in #29 with @ellisonbg, font-based icons are generally designed to be "pixel" perfect at specific font sizes. This is especially important on non-retina displays and font-engines that force font-hinting on the user.

Both FontAwesome and Material icons are pixel perfect with a font-size that is a multiple of 14px, and the current font-size for the toolbar is 13px.

Here are some screenshots of the current toolbar with 13 and 14 px sizes:

13px:

14px:

Now, zoomed-in versions:

13px

14px

The latter is pixel perfect and much more crisp, and we can already see the difference in the original size. It become even clearer with the older font rendering engines of windows which does all kinds of ugly font hinting which cannot be disabled.

Hence we should

• always use multiples of 14px for iconic fonts
• design new icons on the same grid size for all the glyphs, and preferably the one of FontAwesome which is 1792x1792. It is also important to pay attention to not have too large font bearings.

Jupyterlab looks very cool (and I'm thinking about something very similiar to it), but I'm wondering when should I use it? Is there anyone using it for your project? and can I see an example?

If I run it in local machine, I dont' understand why I need a tab in browser for console?

The above image is from the current Jupyterlab build, the below image is from the current Jupyternotebook build. Each of these cells have an html element linking to an image

Only the Jupyternotebook interprets HTML correctly, Jupyterlab is still a little behind in that regard.

This is not exclusive to img elements, but a href don't display their link either, leading me to believe there is something wrong with HTML support as a whole.

In addition to the notebook interface, we need to implement a web-based version of the console interface. Here are some of the tasks that will get us there:

• Create a ConsolePanel as a container that holds a ConsoleWidget, similar to the way the notebook works.
• Create a ConsoleModel that is similar to a NotebookModel but does not have a notion of arbitrary cell insertion.
• The first child of the ConsoleWidget needs to be a RawCellWidget to hold a banner and the second needs to be a CodeCellWidget to hold the prompt.
• The ConsoleWidget needs a set of keyboard bindings to emulate the Qt Console application.
• The execution of the code cell needs to be separated from the notebook because it is common functionality.
• After every prompt execution, a new CodeCell needs to be generated to become the new prompt.
• The history functionality of the Qt Console needs to be implemented (i.e. navigating through past commands via arrow keys).
• The contextual tooltip feature of the Qt Console needs to be implemented.
• The pager functionality of leaving the prompt and residing within a different interactive context (i.e., entering the interactive help) needs to be implemented.
• The completion functionality (i.e., tab completion) of the Qt Console needs to be implemented. This should be done in a way that allows the notebook, or other widgets potentially, to use it as well.

Typing anything in it makes it render as expected.

Again, historical reason but appear to be strongly anchored in my muscle memory, so I suppose I'm not the only one.

It is confusing.

The "depressed" appearance when hovering is IMHO against most design principle, where depressed means clicked.

The image on the left is the Jupyter notebook. In this image it is correctly interpreting markdown text and formatting, correctly showing a numbered list along with stylized functions.

On the right we have Jupyter lab. The numbered list is incomplete and the functions are not stylized. When I looked further into this problem, I found that the text simply stops displaying once it hits a less than ('<') character. The only reason this issue isn't occurring at the end of list item 1 is because I put a space around the less than character and it is now being interpreted as '&lt'. Not too sure why this is, just putting this issue out there.

Since widgets, extensions, custom, basic, terminal, etc. are overloaded terms that have meanings from multiple contexts, it would be helpful to have a brief document that explains what these terms mean in the context of JupyterLab.

As a start:

Widgets

• "Basic ipywidgets" are ipython widgets provided in the ipywidgets repository/package. These are currently (mostly) work with JupyterLab if you have the development master branch of ipywidgets installed (i.e., version 6 or later). We are still working on getting the Output widget working, along with the @interact decorators.
• "Custom" or "third party" ipython widgets are those widgets created by the community that are not included within the ipywidgets repository. Examples are bqplot, pythreejs, ipyleaflet. Each is a separate python package that provides a new ipython widget (begs the question what are we defining as an ipython widget). We are working on a way to install these into JupyterLab.
• "Phosphor widgets" - In JupyterLab the basic UI building block is a "phosphor widget". Examples include the notebook, cells inside the notebook, individual outputs, the code editor, terminal, command palette, etc. The entire JupyterLab UI is a nested collection of Phosphor widgets. Phosphor widgets are completely distinct from ipython widgets (it's a little unfortunate that the two worlds overlapped there).

Extensions

Terminal

• the terminal on the call was the OS terminal using the xterm.js package. For example for OS X, it is a view to what you would see in iterm2 but in the browser
• the “console” is an implementation of the Qt console in the browser

cc/ @blink1073 @jasongrout @SylvainCorlay @ellisonbg @sccolbert @afshin

Well i did not even remembered we had that shortcut that ctrl-M==Esc, but apparently my muscle memory does remember (and esc is too far from my pinkie). And with the new MacBook Pro apparently going to lose the Esc-Key, I guess it's nice to have a second usable shortcut to switch mode.

This should likely create a tab similar to the "jupyterlab" that allow to pick up the new type of file you want. That appear to be the obvious thing my brain want to do to create a new tab, and seem a pretty-standard UI.

Esc/Enter should move back and forth between cmd/edit mode, currently not working.

The pages exist in the gh-pages branch, but are not being found, perhaps due to the redirect to jupyter.org?

I see two errors when doing npm run test on 4e59585 ERROR: 'Exception in signal handler:', TypeError{}. I see these when I run the tests manually under chrome and firefox. I see them on various Travis runs too.

This is where I will be posting the design specifications for the navigation bar to iterate on!

The instructions in the README for dev builds work fine if you haven't made any changes. But if you want to actually do development, there are missing pieces. I thought I could get away with just doing an npm run build in the top-level directory, but that doesn't seem to do it.

I dug around and found that python setup.py jsdeps does the trick. Is this the preferred approach? Do we want to add a top level npm command that does everything?

Currently there are massive slowdowns (see #15) which could be mitigated by having only one active editor in a notebook.

• When an editor receives focus in a notebook in edit mode, a codemirror widget is constructed and displayed with the current content (or maybe a single codemirror is kept around and reused...)
• When the editor blurs, the codemirror editor is replaced with a rendered version of the editor contents.

It would also make it easier to find.

On a server running the multiuser jupyterhub, the link pointing to jupyterlab:

http://jupyterhub.host:port/user/$USERNAME/lab

returns a 404 error. Below the log in the JS console:

require.js?v=6da8be3…:900 TypeError: Cannot read property 'scrollHeight' of undefined
    at http://epinux.com:8888/user/epinux/lab:259:20
    at Object.context.execCb (http://epinux.com:8888/user/epinux/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce:1690:33)
    at Object.Module.check (http://epinux.com:8888/user/epinux/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce:865:51)
    at Object.Module.enable (http://epinux.com:8888/user/epinux/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce:1177:22)
    at Object.Module.init (http://epinux.com:8888/user/epinux/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce:783:26)
    at http://epinux.com:8888/user/epinux/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce:1453:36Module.check @ require.js?v=6da8be3…:900Module.enable @ require.js?v=6da8be3…:1177Module.init @ require.js?v=6da8be3…:783(anonymous function) @ require.js?v=6da8be3…:1453

from the shell where the hub is started:

[W 2016-06-10 18:29:03.071 epinux log:47] 404 GET /user/epinux/lab (89.10.169.253) 13.10ms referer=http://epinux.com:8888/user/epinux/tree
[I 2016-06-10 18:29:21.808 epinux log:47] 302 GET /user/epinux/lab/ (89.10.169.253) 0.62ms
[W 2016-06-10 18:29:21.875 epinux log:47] 404 GET /user/epinux/lab (89.10.169.253) 2.27ms referer=None

When text cursor is at (0,0), and pressing "up", the previous cell shoudl become selected.

Same with "down" when cursor is the last line, last caracter.

Would it be possible to have it as a wheel on Pypi ?

@fperez suggested adding a directory of git hooks like in the notebook (https://github.com/jupyter/notebook/tree/master/git-hooks) so that pulling or merging will automatically rebuild the js and update the server extension.

@sccolbert, @blink1073, @afshin - would it be all right with you to relicense the two files that have a PhosphorJS copyright/license with the standard Jupyter license statement (same BSD license, but copyright Jupyter dev team)? The two files in question are:

https://github.com/jupyter/jupyterlab/blob/ba0a1b7e14509afaf59afb1a9afa0ba1aa9a01b3/src/codemirror/widget.ts

https://github.com/jupyter/jupyterlab/blob/f2a4b8d99218aef83f110e67e348ed21d9196cee/src/notebook/common/json.ts

Having a single common license for all the files in JupyterLab will make adoption and messaging simpler, and follows the project policy more closely (https://github.com/jupyter/governance/blob/master/projectlicense.md#our-copyright-policy).

Workflow A: have npm run build build the jupyterlab code, then install it into the extension, then update the extension bundle. It would be great to have an npm run watch or something that could do this automatically when a file changed too.

Workflow B: have an npm run watch in the jupyterlab directory, so you first go into the jupyterlab directory and run npm run watch, then as you make changes to the jupyterlab ts source, and run npm run build, the extension updates itself.

Tab, up arrow, and down arrow have hard-coded keybindings at https://github.com/jupyter/jupyterlab/blob/91e33ae71c9b7235cbd7270ef5c6746f1f5b1643/src/notebook/cells/editor.ts#L250. If it's not prohibitive, we should have these keys assigned at the application level so they can remapped by the user.

Not sure if this is on purpose, its ok if it stays like that, but just want to open this to make sure.

Seem obvious to change the URI, but we literally had classed in Berkley, where student would reissue jupyter notebook in a new terminal each time they wanted to access the dashboard, ence having up to 50 servers running at the end of class.

We don't have one on the current notebook, I'm starting to get develop the same feeling against this dialog than the UAC on windows vista.

I understand why you want that, but I think that it will annoying people.

Also, we have the "are you sure you want to leave" dialog on the other notebook, because we have no way of saving in the background. Imho closing a tab should automatically autosave, as anyway once we have the RT collab that will be the case. So no need for another change of behavior.

I guess @fperez , @ian-r-rose, @ellisonbg want to be part of this conversation.

Tab should not pick-up a completion, when the completer is (already) open, tab is supposed to complete to the common longest prefix[1] of all the completions.

Well technically not prefix, but common longuest contiguous subsequence, as mat<tab> returns matplotlib and %matplotlib so the longuest prefix would be empty string.

https://saucelabs.com/
https://docs.travis-ci.com/user/sauce-connect/

Cf screenshot:

At least it seem unaligned to me.

I also see this error on 4e59585 when doing npm run test:chrome (but not under firefox). I've replaced the system path to the jupyterlab repo with <<<PATH>>>.

FAILED TESTS:
  jupyter-ui
    PDFRenderer
      ✖ should output the correct HTML
        Chrome 51.0.2704 (Mac OS X 10.10.5)
      Error: expected '<a target="_blank" href="data:application/pdf;<<PATH>>64,I don\'t have a b64\'d PDF">View PDF</a>' to equal '<a href="data:application/pdf;<<PATH>>64,I don\'t have a b64\'d PDF" target="_blank">View PDF</a>'
          at Assertion.assert (<<PATH>>/test/build/bundle.js:309:14)
          at Assertion.be.Assertion.equal (<<PATH>>/test/build/bundle.js:429:11)
          at Assertion.(anonymous function) [as be] (<<PATH>>/test/build/bundle.js:282:25)
          at Context.<anonymous> (<<PATH>>/test/build/bundle.js:25369:42)

(with jupyterlab-0.0.5.tar.gz)

this notebook hangs at opening, before even trying to execute the mere first cell:
https://github.com/winpython/winpython_afterdoc/blob/master/docs/Winpython_checker.ipynb

maybe it's an incompatibility with bokeh/bqplot/ipywidgets ? Still, to hang at opening is a bit strange to me, as I open a notebook with cleared output cells.

Windows/python3.5.1:

On the left is Jupyter Notebook, the color scheme is being inherited from the CodeMirror repo. JupyterLab's color scheme is just slightly different and that is a no-go. Brian says this has something to do with iPython/CodeMirror's themes not being processed correctly, but I'm not too sure.

• Get API docs autobuilt
• turn on Travis
• Get notebook tests running again
• Basic tutorial documentation about the architecture of phosphide, document manager, and our app
• Add a work-around in phosphide to, from the appshell, get the current dock panel widget and list of dock panel widgets

It is difficult to discover the console.

Someone should check my changes in 068ceaa

We are getting closer and closer to parity!

Small issue I noticed when deleting cells: the previous cell is not selected after a deletion.

Team, If the API docs are built and rendered somewhere. I would like to use this as an issue on Monday for a Cal Poly intern sprint.

I might be completely imagining things, or i's an optical effect.
The effect disappears for me as soon as I zoom in.

Could they be anything real like a sub-pixel width or height ?
Or an optical effect as I keep switching between tabs and the color in lab is less dark than classical notebook?

Too far from the rest of the UI element , especially on big screens. I literally searched the button for a minute, went to the command tab...

Buttons should have visual-separations, even when not hovered,
the change of style on hover exists (I can see that the applied style is different), but for me, on my screen I cannot see any differences.

You guys probably have it globally installed.

this works under classic ipython4.2:

%matplotlib inline
# Pandas interactive
import pandas as pd
import numpy as np
import seaborn as sns

# create a df with random datas
np.random.seed(24)
df = pd.DataFrame({'A': np.linspace(1, 10, 10)})
df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4), columns=list('BCDE'))],
               axis=1)
df.iloc[0, 2] = np.nan

# interactive
from ipywidgets import widgets
@widgets.interact
def f(h_neg=(0, 359, 1), h_pos=(0, 359), s=(0., 99.9), l=(0., 99.9)):
    return (df
             .style
             .background_gradient(
                cmap=sns.palettes.diverging_palette(
                     h_neg=h_neg, h_pos=h_pos, s=s, l=l, as_cmap=True)
             ).highlight_null()

under jupyterlab (and chrome) I get a :

You currently need the master dev branch of widgets installed to have widgets working (what will be widgets 6.x) -- we should note that in the readme and the initial startup page.

• Release pre-release version of ipywidgets 6.x
• Make this pre-release a requirement of jupyterlab (maybe an optional prereq? That way people can still experiment with jupyterlab without messing up their ipywidgets installation if they just don't use ipywidgets)
• Note in the readme and initial about page that ipywidgets 6.x+ is needed for widgets to work.

Cell widgets now allow their models to be changed upon instantiation, but all they do is clobber their internal editor widget. In order to get real benefit from saving DOM manipulation when models change, their internal CellEditorWidget references need to support changing models as well.

cc: @blink1073 @jasongrout

This seem to be able to compile css variable:

https://www.npmjs.com/package/postcss-css-variables (http://postcss.org/).