App configuration: show code

VivaldoMendes commented 2 months ago

Description

Following @odanoburu's suggestion in #1975 that slides would be significantly improved if code (or some code) were allowed to be displayed/visible in the presentation, I would make a similar point for the App version itself.

Having the code visible in the Notebook version but not in the App version is almost indifferent to the one who wrote the notebook. However, if the notebook is written with someone else in mind who will interact with it during a particular task, whether the code is visible or not in the App version becomes a critical point. One crucial characteristic of computational notebooks that led to their monumental success over the last decade is, I believe, the option available to hide/display specific parts of the code.

To the best of my knowledge, all notebooks available allow you to hide/display specific parts of the code, even in a truly app view. I am providing a good example. Consider Hex notebooks, which target a segment of users for whom the App version seems more important than the notebook version itself. However, in Hex notebooks, the App version allows the inclusion of visible code, as well as code that is not visible. The first image below displays the Notebook version of an example on their website, while the second one shows the App version of the same notebook. Notice that in the App version, one code cell is hidden while another is displayed.

Notebook view:

App view:

If this option to hide/display code in the app version is implemented in marimo, the scope of adopters of this excellent piece of software will drastically increase.

Alternative

No response

Additional context

No response

mscolnick commented 2 months ago

hi @VivaldoMendes - this is already possible today. you can do marimo run my_app.py --include-code

VivaldoMendes commented 2 months ago

Hi @mscolnick, thank you for your feedback.

I was not aware of this possibility, so I tested it. Unless I am missing some trick now, as I was before, it does not solve the problem I mentioned above. Apparently, if I load the notebook as an App (marimo run my_notebook.py --include-code), I can not edit the notebook. I can hide/show all code, then decide which code will be visible or hidden, but this is not a practical procedure if one uses a long notebook for teaching.

On the other hand, if I load the notebook as a notebook (marimo edit my-notebook.py), I can edit the document and move from App view to Notebook view quite easily by Ctrl + . , but I can not choose the cells to display and hide on a discretionary basis when the App is selected. This may look like a small detail, but it makes all the difference.

I give an example (I continue considering the case of marimo edit my-notebook.py). I have a notebook that includes many markdown cells and many computational cells. The output of all markdown cells will be visible in the App view (text, equations, headers, ...), and they should be so. All markdown code (input) is hidden in the App view, and it should be so. We have the same logic in the case of computational code cells: all computational code (input) is hidden, and all the output (tables, plots, ...) is visible in the App view.

In the first image below, I present a slice of one of my notebooks (notebook view), which shows a section number, a horizontal line, and a code cell. Even though hiding markdown code takes a lot of space in the notebook, everything looks OK. In the second image I display the same part of he notebook after I did Ctrl + . . What is the problem here? The notebook looks awkward without the code cell that includes the for loop being visible. In fact, it seems useless. What is the small detail that avoids this: allowing this particular code cell to be always visible, no matter whether I use the notebook in the App view or the Notebook view? This possibility is available in the other notebooks, from Jupyter, Observable, Pluto, to Hex. It is critical when the notebook is used to share information and to be used in teaching.

aaaa

Please do not consider this comment of mine as a criticism of the status of marimo at the moment because that is not my intention. I am just trying to highlight a particular point that, from my own experience, may allow marimo to reach many more people, particularly in education. Sorry for this long post, but I could not find a shorter way to describe my point.

My suggestion. Implementing a similar procedure to that of Hex notebooks: in marimo edit my-notebook.py, allow switching from app-view to notebook-view, and in the app-view, allow the possibility to have some code cells (the input) to be automatically visible, while others hidden.

Thanks

mscolnick commented 2 months ago

If you want the user to edit the code as well, would you "mo.ui.code_editor" help?

mscolnick commented 2 months ago

We could add a config to each cell "include_in_app".

But I am afraid it could cause confusion with errors that are caused from other cells that are not included. Not to mention, the user may not have the debugging tools on the left-hand panel.

VivaldoMendes commented 2 months ago

I don't know what the best option is to implement such functionality. In the case of Hex, I think they have something like Add to App builder. My intuition tells me that it has to be implemented on a cell-by-cell basis because we may have situations where we need to hide some code cells and others where the code cells should be visible.

My point is simple: notebooks must be flexible regarding the code cells we decide to hide and those we must keep visible (regarding markdown code, there are all the reasons to keep all code (input) hidden) in both modes: app-view and notebook-view. Without such flexibility, sooner or later, nonsense will appear in a notebook in any of those modes, as my example above indicates. This flexibility is available in all the notebooks I have used, which is a significant reason notebooks have tremendously succeeded in teaching and exchanging computational information.

Please consider this suggestion of mine as a humble contribution to the development of marimo. I do not feel much comfortable pushing for developments that other users do not consider indispensable. I read this forum and have yet to find many contributors with the same concerns as mine.

An image from Hex:

mscolnick commented 2 months ago

This is helpful. We can this flexibility - just need to think through the best way to not overly complicate it / confuse users into accidentally exposing / not-exposing the right stuff.

VivaldoMendes commented 2 months ago

That is great. To make things easier, I suggest that all input codes be hidden in the App view by default, as we have now. If someone wants some specific code cells to be visible in the app view, they have to indicate that choice to the notebook.

patrick-kidger commented 2 months ago

+1 for this! I was just looking for this exact functionality, thinking I'd try using Marimo to put a technical presentation (about a codebase) together.

akshayka commented 1 month ago

@VivaldoMendes , our next release includes a library function that lets you include the code in the output of a cell, making it visible in the app view. Importantly, as I believe you've requested, the author of the notebook can on a cell-by-cell basis choose which cells include their code in the output.

For a preview of this feature you may view https://github.com/marimo-team/marimo/pull/2342. It will be available in the next release.

akshayka commented 1 month ago

mo.show_code(), released in 0.8.16, lets you programmatically include a cell's code in its output.

See the docs for more information: https://docs.marimo.io/api/outputs.html#display-cell-code-in-marimo-s-app-views

marimo-team / marimo