Control code cell visibility and behavior with tags and metadata

[choldgraf]

Currently, all code cells that are parsed by MyST will include their input and outputs together.

Outputs can be inserted into the page via the {embed} directive, which allows you to remove the input, output, or include both.

However it's not possible to modify the behavior of the code cell itself, which makes it clunky if you want the code cell to exist on the same page where you want to embed its output.

It would be helpful if there were a way to control the visibility of the cell input and cell output from within a code cell.

How MyST-NB handles this

MyST NB accomplishes this by using Cell Metadata tags, with tags like the following:

• remove-cell
• remove-input
• remove-output
• hide-input (hides behind a toggle)
• hide-output
• skip-execution
• raises-exception (to prevent errors from stopping the build process)

References

• 🏷 Propagate block metatags to code node and output node #407

There was an initial PR on this in the theme over here:

• Add visibility control to support Jupyter meta tags myst-theme#129
• Related issue: Support myst-nb tags and settings for executable code cell block myst-theme#50

[rowanc1]

This was partially implemented here:

• 🏷 Propagate block metatags to code node and output node #407

But I believe is undocumented on our side. I think at this stage, only the remove-cell/input/output is respected (no toggles). The tags are listed here:

https://github.com/executablebooks/mystmd/blob/main/packages/myst-common/src/types.ts#L34

There was an initial PR on this in the theme over here:

• Add visibility control to support Jupyter meta tags myst-theme#129
• Related issue: Support myst-nb tags and settings for executable code cell block myst-theme#50

We got the first part merged, but not the theme as there were changes to thebe that we needed to consider.

[choldgraf]

Ah nice - I've added a PR to document some of this here:

• 📖 Document code-cell directive and cell tag functionality #1110

Agreed that there's still functionality that needs to be added, so we can use this to flesh out the behavior. I've added your links to the top comment so that it's easier to track the progress

[drewlio]

Sorry to bother you, but it seems remove-cell/input/output tags are not respected for PDF output for native jupyter code cells. From looking at #407 it seems like it should work just as it does in Jupyter Book. It seems like #407 was merged at 1.0.2. I'm on 1.2.0. I'm not sure why its not working.

Edit: adding to this. I see your documentation on notebook cell visibility. I see no indication that this works. Or maybe I'm using it wrong. Could you please advise?

[agahkarakuzu]

I am running into a similar issue (v1.2.3), where remove-input works, but hide-input does not. Not sure if this is not implemented yet, but interestingly, it throws a warning when you pass both tags.

[agoose77]

@drewlio this should have been fixed in 1.3.3. Would you be able to check that for me? :)

[agoose77]

I am running into a similar issue (v1.2.3), where remove-input works, but hide-input does not. Not sure if this is not implemented yet, but interestingly, it throws a warning when you pass both tags.

@agahkarakuzu could you possibly provide a reproducer?

[agahkarakuzu]

@agoose77 I'll soon test this, sorry for the late reply!

[agahkarakuzu]

@agoose77 versions are the following:

[2024-09-10 01:55:19,833: WARNING/ForkPoolWorker-7] ✓ Node.js is installed: v22.6.0
[2024-09-10 01:55:20,836: WARNING/ForkPoolWorker-7] ✓ mystmd is installed: v1.3.8

1. Hide input issue still persists.

For example, the first code block of this notebook from this myst article has the hide-input set true, yet the code cell is still visible with no toggle option.

2. Interactive figure outputs are generated, but not embedded

This 3D interactive plot was generated during myst build (with execute), but does not show up in the myst article. I tagged the cell and used that in the figure directive. Interestingly, it knows the space the figure would normally occupy (see Click here to see 3D UMAP scatter toggle).

3. Default article-theme dark?

I used to build articles with light-theme, but now by default it is dark, how can I set this back to light?