Add notebook presentation view

[aifrak]

In the indicator group, add a button to toggle the showcase mode.

When enabled:

• The left sidebar is hidden.
• All other non-focused cells become semi-transparent but remain clickable.
• All other features on cells and blocks (cell editing, block creation, etc) remain available.
• When in showcase mode and when the user clicks on a blank part on the side of the page, the cell stays focused.
• A modal inform the user about shortcuts to navigate between cells.

Demo

Reasons

• I got this idea while watching kip using Livebook instead of a PowerPoint presentation for one of his talk. He even changed values then evaluate cells during his talk to show further examples. I found it great!
• Avoid juggling between the code editor and the PowerPoint presentation.
• Showing the whole editor can sometimes be overwhelming. Livebook can show the explanation, the code and the evaluated result all near each other.

Questions

1. What do you think about this idea?
2. Is the name "Showcase mode" good enough? Initially, I wanted to call it "Presentation mode", but people might think it is something like a PowerPoint presentation.
3. Is the used icon clear enough?

[CLAassistant]

All committers have signed the CLA.

[josevalim]

Thank you @aifrak, this is a really nice proof of concept. However, I would like to avoid adding another icon on the bottom right.

I also was planning to generalize code zen for a while, I think we could do this: we can have a button on the bottom right, once you click it, you can choose between:

1. Code mode
2. Presentation mode (show all + spotlight mode)
3. Custom mode

Custom mode will open up a modal where you configure what you want to show. You will have 5 options:

1. Show sections
2. Show markdown
3. Show results
4. Show outputs
5. Spotlight focused (the feature you implemented here)

Code mode is a shortcut where 3 and 4 only are enabled. Presentation mode has all 5 above enabled.

Thoughts @jonatanklosko? Or am I overcomplicating this?

[jonatanklosko]

@josevalim options and presets sounds good to me! I think it would be annoying to always go through the modal with custom, so instead we can make custom a toggle as code/presentation and have an options button in the menu that opens up a modal or similar to configure (and the settings are persisted on the client).

[josevalim]

For sure, I am thinking the flow would be like this:

1. Click a button on the bottom right
2. That will open up a pop-up, like the one we show for turning off code zen, with three options: "Code mode", "Presentation mode", "Custom mode"
3. Clicking "Code mode" and "Presentation mode" automatically enter the preset mode. The icon becomes green, the chosen mode is highlighted, and an option to turn off also appears

I think we can go into steps though. For now, we could do this: @aifrak, can you please rework this PR so, instead of adding a button to the bottom left, we use a single button which, once clicked allows you to choose between code mode and presentation mode?

@aifrak @jonatanklosko any suggestions on the "root" icon?

[jonatanklosko]

@josevalim we could put all the view customization under "landscape" umbrella and have this icon:

or "layout"

[josevalim]

layout-3 or layout-5 works for me!

[aifrak]

@josevalim Thank your for your feedbacks! Ok for layout-5. I will rework the PR. I have few questions before starting:

1. Are "Code mode" and "Code zen" the same thing?
2. Is "root" icon replacing "Code zen" button visually?
3. If "Code mode" or "Presentation mode" is clicked, should the "root" icon be green also?
4. "Hide outputs" is not mention. Is it also inside in the pop-up?
5. Will "Presentation mode" be the official name?

From what I understand, it will look like the pictures below:

• Nothing activated:
  
• "Code zen" activated:
  

[josevalim]

Are "Code mode" and "Code zen" the same thing?

Yes

Is "root" icon replacing "Code zen" button visually?

Yes

If "Code mode" or "Presentation mode" is clicked, should the "root" icon be green also?

Yes

"Hide outputs" is not mention. Is it also inside in the pop-up?

You will be able to do this with the custom mode, so we can remove it for now.

Will "Presentation mode" be the official name?

I am not sure. Suggestions @jonatanklosko?

[josevalim]

@aifrak and your picture is perfect. Now that I think about it, let's keep it as "Code zen" instead of "Code mode", "Code zen" is much nicer. :)

[aifrak]

@josevalim Thanks for your answers!

[jonatanklosko]

@josevalim Focus mode or Presentation mode works for me, presentation is closer to the end use case. I was thinking of getting rid of "mode", but it's probably fine, unless we want to be fancy and call it "Showtime" :)

[josevalim]

What if we call it "Views" at the root level then? We would have this:

Views
+ Code zen
+ Presentation
+ Custom

Where "custom" can be a future PR?

[jonatanklosko]

I was thinking "view" initially, but thought it points more in the direction of a separate page, while "layout" refers to the current page. I'm fine with either though.

[josevalim]

Let’s go with “View” then.

[aifrak]

Ok "Presentation" (even shorter then) and "Views".

In the initial PR, I made this modal to inform the users about the "Presentation mode" and the shortcuts. The modal is shown after "Presentation mode" is clicked.

1. Should we keep it?
2. If yes, is the message for you.
   

[jonatanklosko]

I think it's ok not to show this message, since all navigation/controls work the same as in the default view, also the user will intuitively click anywhere which should make the spotlight clear. @josevalim?

[josevalim]

I think we can skip it for now and see how the usability goes. Once we add the Custom mode, we can leave a hint under the checkbox that says use j/k for navigation.

[aifrak]

Rework has been done. PR is ready for review.

[jonatanklosko]

@aifrak thanks, we should make the modes exclusive, so when we are in code zen and click presentation mode, it should disable code zen. So instead of two flags, we can have this.view as null | 'code' | 'presentation'.

Also, the spotlight mode doesn't work properly with Kino.JS outputs (like a chart) because those are absolutely positioned iframes, so the opacity rule doesn't concern them. This one is a bit tricky, but I can figure it out later :)

[aifrak]

@jonatanklosko Thank you for your feedback. I have made the view modes exclusive as requested.

I did not know Kino.JS outputs were special and assumed they were like the other outputs. So as you said I let this one to you, but if you need some help, you can let me know.

[jonatanklosko]

Thanks :)

[github-actions]

Uffizzi Preview deployment-23685 was deleted.

[josevalim]

Thank you for the PR @aifrak ! If you want to tackle #1890, a PR will also be very appreciated :)

[aifrak]

@josevalim You are welcome. I will try to dive into it when I have a bit of time.