Feature request: Support collapsible sections in app mode

[amotl]

Description

Hi there,

first things first: Thank you so much for conceiving marimo. It is really a pleasure to work with, full of so many details expanding upon but re-thinking Jupyter and other Notebook ideas and technologies. @WalBeh and me love it.

Status quo

We are very pleased with the "collapsible section" feature, as described and implemented over here.

• Feature request: Collapsible markdown headings #1085
• Table of contents / outline feedback #1682
• feat: collapsible sections #1826

We are currently exploring to conceive a little chrome for a small operational support utility, and are currently giving it a shot to do it with marimo.

• CFR job statistics and slow-query exploration: First draw of marimo notebook crate/cratedb-toolkit#350

In this scenario, the notebook is getting longer and longer already, which makes it uncomfortable to work with in edit mode, but navigating it efficiently in view/app mode is also difficult.

With kind regards,
Andreas.

Suggested solution

Building upon that marimo includes the fundamental implementation already, we would dearly like to see the feature be available in app mode as well.

We would dearly like to give the notebook the possibility to be started in full collapsed mode, so the user can effectively use the section headers as a primary navigation element to drill down into different parts without needing to read sequentially.

While the grid view is also nice for end-user/app mode presentations, we think elaborating this specific feature and possibly a few friends, in traditional notebook/cell mode, would yield excellent usability improvements, specifically when approaching marimo from an application developer's perspective.

---

NB: We found @vangberg already reported the same request 1:1 over here,

• Collapsible headings in app mode #2660

but we wanted to emphasize it by handing in a dedicated feature request about it, because we think it would be a so important feature, at least for us, and would like to give more people the chance to upvote more prominently. If you think it is not applicable, feel free to close, and we will add our voice to GH-2660 instead.

[mscolnick]

Hi @amotl, thanks for the appreciation, context, and feature request.

We could add collapsible sections to app mode as well (our logic should be fairly straightforward to transfer).

1. We can make this configurable likely in some app settings (whether the collapse icons should exist)

2. We could also add an app setting whether they are initially collapsed. The other option is adding our own annotation to the title # Title {collapsed}.

Questions for you:

• Do you know if you want everything initially collapsed or would want to pick and choose?
• Would this feature be valuable with just (1) to start and not (2)? Basically, everything is initially expanded.

[amotl]

Dear Myles,

thanks for your swift reply.

For our specific use case, we would like to pack a single notebook full of individual features, separate them by traditional Markdown headlines, and render the outcome into an embedded application where its default render mode pretends to be like Grafana in this specific case, where you can group panels into rows, collapse them, and also make "collapsed mode" the default when loading the dashboard.

As our use case is not far away from Grafana's, revolving around operational monitoring and tooling, it's actually very similar like outlined on the screenshot: There are many different topic domains when holistically monitoring a system, and we would like to present them all on a single page, but at the same time not overwhelm the user, and give them a clear navigation structure to drill down from.

We see it is a different use case than the traditional way of navigating notebooks, but because we recognized (and appreciated!) your experiments around the grid view paradigm, we thought it would be a good idea to elaborate in detail about our use case, which also intends to blur the boundaries between application development and scratching on a notepad, with a little mix-in of "dashboarding" ;].

Those might be relevant discussion from the Grafana realms in this regard:

• [Feature Request] Collapsible rows in the Table Panel grafana/grafana#48967
• Default state for row - collapsed grafana/grafana#52520

With kind regards,
Andreas.

[amotl]

Do you know if you want everything initially collapsed or would want to pick and choose?

In this case, unless @WalBeh doesn't provide any objections, I think we would like to have all sections collapsed when loading the page, probably all second level elements, so that we still can employ a preamble below the first-level top headline and above the first second-level section headline, which is visible to the user.

Of course, an individual pick and choose mechanism would be paramount in the long run, possibly based on an annotation syntax # Title {collapsed} like you are proposing.

Would this feature be valuable with just (1) to start and not (2)? Basically, everything is initially expanded.

I think we would really need it in the opposite direction: All sections are initially collapsed.

It is clear for us that this would make it a Sonderwunsch/Extrawurscht of some sorts, so it was also clear for us it would need to be bound to a specific application setting of corresponding sorts.

In this spirit, if it would be easy to start to make the "load all L2 sections collapsed, in app mode" feature wish bound to a specific app setting, that would probably be well sufficient, as we are intending to run the marimo backend programmatically within our little toolkit application. If that would be possible on behalf of the "app settings" approach, it would be a perfect fit, and we will appreciate it so much.

[mscolnick]

Thanks for the info. We can look into supporting this.

In the meantime, mo.accordion might be helpful.

We could also implement the details markdown , which would look something like one implemented:

mo.md(f"""

/// details | My charts
{mo.hstack([chart1, chart2])}
///

""")

The styling could also be customized.

---

I am leaning towards adding the /// details feature if that would work for you. (could ship it quite quickly).

EDIT: here is what it could look like:

[amotl]

Hi again. We will try the components you suggested, and also look forward to test drive the /// details feature you are proposing when it's ready. I am sure @WalBeh will spend a few cycles on this, and respond with relevant feedback which fits best for our use case. Thank you very much!

[ashah03]

Just logging that this is also a feature that we would find very useful! @mscolnick just to clarify, is the /// details feature a stopgap while you consider implementing collapsible sections in app mode, or would it replace it?

[mscolnick]

@ashah03, yea the details feature is a stopgap for part of the request. it should be easy to add config to show collapsible headers in marimo run. But for the configurable collapsible header state (open/closed), that is still unsure if we want to or how we want to implement it.