Double-clicking to add cells

[jasongrout]

In the classic notebook, just below the last cell, there is a div with the class end_space. Double-clicking on this div appends a new cell to the notebook. Here is a screenshot of the div (I've added a red border around it to highlight where it is and how big it is:

Here is the code in the classic notebook that adds the area and makes it append new cells on double-click:

https://github.com/jupyter/notebook/blob/9640e1f94366aa442af279ad77390f6c0a29b8b1/notebook/static/notebook/js/notebook.js#L273-L292

That code contains a comment about why the area exists:

        // We add this end_space div to the end of the notebook div to:
        // i) provide a margin between the last cell and the end of the notebook
        // ii) to prevent the div from scrolling up when the last cell is being
        // edited, but is too low on the page, which browsers will do automatically.

We don't have this in JLab. @bassio just pointed out on Gitter that they use it:

I have a quick question about jupyterlab. I have been using the original notebook for years, and today was the first time to try jupyter lab. In the original notebook, I used to click the panel below the lowermost cell in the notebook and it appends a new blank cell at the end. However, I noticed that this feature is missing in jupyter lab. I click below the last cell and nothing happens, and I need to use the taskbar. IMO this is a reduction in usability as it slows the laying out of cells, and I am tempted to stay on the original notebook for this reason.

So:

1. Should we add something like this for backwards compatibility and/or as a valuable addition?
2. What should the ux look like? UX? Should it use double-click? I can see something like this being valuable on mobile, for example - double-tapping the extra space adds a new cell. Should the region extend to all of the space below the notebook? Should the region add space below the notebook if none would exist normally?

[bassio]

Hi @jasongrout

Thanks for starting this issue.

To mention again, I find my usability decreases significantly because of this, because it at least doubles the amount of steps to just add a cell. IMO I find the keyboard shortcut in jupyterlab "b" to insert a new cell is not actually a time saver, because you first have to click outside of the cell to exit Edit mode into Command mode then click 'b' (so it is actually two steps rather than one) and hinders the flow if you will be writing one cell after the other when you are writing a new notebook.

I see add this back through two possible routes: 1) Replicate old behaviour in the old notebook i.e. make an end div that is double-clickable and appends a cell to the end of the notebook. 2) Enhance the behaviour so that inserts a new cell wherever you double click between any two cells. This will mirror the intention of the keyboard shortcut. One solution would be to add something like a cell footer to each cell (let us say with a few pixels of height / bottom padding) and make it double-clickable.

I am happy to work on this to push this in the next version, but I am a beginner with node and this codebase so I will need a mentor. I read through the codebase yesterday and found a cellfooter class btw but I am not sure if it could/should be used for this purpose.

[jasongrout]

Another possibility we used in the Sage notebook is that when you hover between cells, a small line appears to insert a new cell. Click on that line and it inserts a new cell. In Sage, we split the line so clicking on the left half inserted a code cell, clicking on the right half inserted a text cell. Of course, depending on a hover action makes it harder to do on mobile, though.

[jasongrout]

And thanks for offering to work on this! I think the first (and probably hardest) part will be coming to a consensus about what the UX is like.

CC @tgeorgeux @ellisonbg.

[ellisonbg]

Yeah, the UX of this is really challenging. All the way back in 2012/3, I implemented the "clickable line between the cells" in the classic notebook. It worked, but the the UX was felt to be awkward in how it added a lot of interaction and visual noise to the interface. It was been interesting to see other notebooks (nteract, colab, observablehq) wrestle with this and explore different approaches. The cell element has a header and foot that we can use for any UI related to this, so the implementation is straightforward. Some of the UX design principles that are relevant for this:

• The mental model of the notebook is that of a document that is a "blank piece of paper for user to add content to". Thus, user content should be primary and any other UI controls should be strongly secondary.
• Limit visual repetition and noise. We have to find a way to add this UI between all the cells while not repeating the same UI again and again. Even a hover based interaction can be super painful. If we want to use hover based interactions to reveal this UI, we will probably need to put a delay on them so as a user scans their mouse over the document, they don't see rapid sequences of hover on/off.
• Balance simplicity with capability. There are multiple types of cells (at least code + markdown). It is challenging to offer a way of inserting both types of cells in a simple way.
• Compact vertical space. For every px of vertical space that we use in the UI, that is a px less that users can utilize in reading/writing their content.

I am fine with us starting to do exploratory implementations, but I do think this will require a lot of iteration and testing on the UX.

[ellisonbg]

I should note there are potentially two different questions:

1. Inserting new cells in between existing ones.
2. Inserting a new cell at the end of the notebook.

While the UX of 2 is probably easier, I think we eventually want a single solution for both.

[fcollonval]

@HaudinFlorence as discussed together a way to address this is:

• add a footer to the notebook document as it is done for the header:

https://github.com/jupyterlab/jupyterlab/blob/438d30ac71eaa54a3916ad93a3b68966dc994204/packages/notebook/src/windowing.ts#L90

• Create a NotebookFooter widget on which you add the event listener, something like:

class NotebookFooter extends Widget {
  constructor(protected notebook: Notebook) {}

  handleEvent(event: Event): void {
    switch (event.type) {
      case "dblclick":
        this.onDblClick(event);
        break;
    }
  }

  onDblClick(event): void {
    NotebookActions.insertBelow(this.notebook);
  }

  protected onAfterAttach(msg: Message): void {
    super.onAfterAttach(msg);
    this.node.addEventListener("dblclick", this);
  }
  protected onBeforeDetach(msg: Message): void {
    this.node.removeEventListener("dblclick", this);
    super.onBeforeDetach(msg);
  }

}

[GabrielaVives]

Do you have a specific UI you are going to use to implement this ? And what will be the interactions (hover, click, etc) ? if not I can work on it

[jtpio]

@GabrielaVives maybe trying it on the Classic Notebook v6 can give a good idea of the UI / UX (double clicking below the last cell).

For example with this Gist on Binder: https://gist.github.com/jtpio/02b11644933ff9c2afdfea32edcde523

https://user-images.githubusercontent.com/591645/221595378-7104a3a0-43b4-44bf-b7fc-e055ff7ff6cf.mp4

[GabrielaVives]

Thanks @jtpio , ok so there if I understand well, there is no UI showing the user that this action exists. I think we avoid having hidden buttons in the interface. New users have no way of knowing that this is possible, and even intermediate or advanced users can easily forget and find it frustrating to have to remember about an invisible feature.

Here is a prototype with a suggestion to put a UI in the clickable space.

When you hover over a delimited space below the last cell, a prompt appears with the indication to double-click.

• If the user double-clicks a new cell is created and the prompt disappears, the user then need to move the mouse down again to add a second new cell
• If the user exits the area without double-clicking, the prompt disappears

[HaudinFlorence]

@GabrielaVives Thanks for the prototype. A solution close to your proposition is presented in PR https://github.com/jupyterlab/jupyterlab/pull/14109. All comments and discussions are welcomed.

[jtpio]

I think we avoid having hidden buttons in the interface. New users have no way of knowing that this is possible, and even intermediate or advanced users can easily forget and find it frustrating to have to remember about an invisible feature.

Right. Although this "double-click to add" feature can also be found elsewhere like in Trello: https://blog.trello.com/gigantic-list-trello-tips

https://user-images.githubusercontent.com/591645/222125838-74b8da86-0a86-4cac-934e-6b8f5f5fa053.mp4

Probably once people know about it then it's fine (I personally use it very often). Although a visual indication would definitely help.

[GabrielaVives]

Yes this feature does exist in other apps like Trello, also in Miro and Mural. They all offer a digital whiteboard, management and collaboration features in a space that can be infinite in all directions. We could think if we have similar use cases.