Show the currently focused cell by other collaborators

[martinRenou]

Similar to jupyterlab/jupyterlab#11528

Problem

We currently have a way to see the cursor of other collaborators. But this only works when the other collaborators are in "edit" mode. This results in this issue jupyterlab/jupyterlab#11406

We should maybe think of a way to indicate that another collaborator has focus on one cell, whether they are in "edit" mode or "command" mode. Similar to what google does for showing the focused cells in spreadsheets:

Proposed Solution

Show an outline colored with the collaborator's color on the focused cell.

Additional context

The proposed solution would fix jupyterlab/jupyterlab#11406

[hbcarlos]

Maybe we can show a list of collaborators in each cell to see where is everyone.
Something like this:

[martinRenou]

It's similar to what I wanted to suggest in jupyterlab/jupyterlab#11528 (comment). Though if we already have the list of contributors somewhere else in the UI it might be too much redundant information.

Another idea could be to just have a similar visual indication to the "active" state:

[krassowski]

We could even show the cursor. It is technically feasible - while figuring out where the cursor should be after rendering is difficult, the trick is to insert the cursor before rendering so that it is preserved by marked.js.

We do this already for rendering Tex (we use custom markers to substitute stuff after rendering).

I think that rendering the cursor would be the best UX possible. (of course this is for edit mode, for command mode the icons or colors are fine).

Out of the two proposals above I slightly prefer the icons over colours (you know colourblind people etc).

[martinRenou]

I think that rendering the cursor would be the best UX possible. (of course this is for edit mode, for command mode the icons or colors are fine).

We're doing this already in edit mode. Or did I misunderstand what you mean by cursor?
EDIT: Sorry, I understand now you're talking about showing the cursor in the rendered Markdown cells. I agree it would be nice to do that.

[krassowski]

I mean when person A is in edit mode but person B has markdown rendered, we are currently not showing the cursor of A in the rendered markdown of person B.

Instead PR jupyterlab/jupyterlab#11544 attempts to switch person B to unrendered state which leads to UX issues discussed on that PR (unable to have rendered preview in second window, unable to render while collaborator is in the same cell) and more (potential performance penalty from switching between states).

Apologies, maybe I should have posted this as a comment on that PR. I misinterpreted this as a discussion revisiting that topic, while it mostly focuses on the command mode.

[martinRenou]

Yes, thank you for the clarification. Indeed both showing the cursor in the rendered Markdown cells in edit mode and showing the focused cell in command mode could be complementary.

[martinRenou]

I pushed a POC on this branch which is on top of @hbcarlos IUser changes.

collab.mp4

I personally like the result, but it goes in the way of the dirty cell state visual representation. Also how do we show that there are more than one contributor?

On another note, it looks like deepnote shows a list of collaborator icons next to the cell, as suggested by Carlos.

[jasongrout]

On another note, it looks like deepnote shows a list of collaborator icons next to the cell, as suggested by Carlos.

I like the idea of user icons next to the cell instead of a frame around the cell. I think the icon gives more info (i.e., who, not just a color), and having a frame around the cell is I think too heavy of a change UX-wise.

[martinRenou]

I think the icon gives more info (i.e., who, not just a color), and having a frame around the cell is I think too heavy of a change UX-wise.

I agree. The annoying thing is that there is very little space between the collapser and the cell prompt for code cells if the code is short.

[martinRenou]

I've been recently working on the following approach:

See this branch: https://github.com/martinRenou/jupyterlab/tree/collaborator_list (not opening a PR yet, as it's depending on Carlos's IUser PR)

[martinRenou]

As discussed during the weekly meeting, there are some other options we could explore:

• put the icons on the line gutter (right or left) and remove the flag on the other collaborator cursors.
  • Pros: This would add the information of the line number people are working on.
  • Cons: It will not work well with rendered markdown cells.
• put the icon list outside of the cell.
  • Pros: It prevents the icons to hide the code.
  • Cons: It will take more space in the Notebook UI than the solution proposed in the above comment.

[davidbrochart]

What about putting the icons inside the cell but making them transparent, so that they appear "behind" the code?

[fcollonval]

Moving this to jupyter-collaboration

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[GabrielaVives]

This is a subject I started to explore during the JuyterLab usability test in November 2022. The prototype I tested had interactive UI features intended to show users:

• all collaborators of the notebook: on the top right of the menu
• focused cells by other collaborators: on the top right of the cell

Here is a screenshot of the prototype with these two features:

The results of the study have validated these design options, as they were well understood by all participants.

Do you need more design work done on this subject? Maybe other use cases I did not think about? or have you already agreed on a convenient solution?

[krassowski]

I find the idea of putting the colaborator icon to the right of cell toolbar problematic:

Imaging that user tries to click on a button or user icon (which can be destructive "delete" button - not shown on picture above) but in the meantime the collaborator moves focus to another cell and you end up clicking another button. This can lead to user annoyance or data loss if mistake is not noticed before exiting session.