Tag based cell, output and input hiding, all CSS

[mpacer]

So I've been working on an all CSS implementation of cell, output and input hiding for html output based on cell metadata tags.

This more or less implements the feature requested in jupyter/notebook#1812 but in terms of the use of these tags rather than their application. That is, it doesn't address the UI in the notebook for adding the tags (for that a number of proposals for a while have existed the main one being ipython/ipython#6638).

An active site using this can be found (with a partial exposition) at https://mpacer.github.io/hiding_tags_nbconvert/hide_cells_based_on_tags.html the repo housing the template is in toggle_hidden.tpl at https://github.com/mpacer/hiding_tags_nbconvert.

@Carreau @fperez I think will both be interested in this.

Eager to here feedback about the general functionality and how to integrate something like this into the main nbconvert library. I'd prefer discussing stylistic changes to be deferred until we're fairly settled on the integration question.

[minrk]

Cool! I think there will be two use cases:

1. 'soft' hiding like this, where the information is present for those interested, but not shown by default
2. 'hard' hiding, where the information isn't even available.

For the soft case, I think the principle is roughly correct, and we can work on the design separately with the help of @ellisonbg.

[mpacer]

Hard hiding is even easier.

Just a sec and I'll have a version that does that as well.

[mpacer]

Ok, now 2. is taken care of by the template kill_hidden at https://github.com/michaelpacer/hiding_tags_nbconvert/blob/master/kill_hidden.tpl.

Because all we're doing is removing elements from the DOM I just needed to use the same selection action and replace it with nothing.

That meant that all of the CSS could go as well, as no new elements are being created.

Originally I had expected this to be handled by a different set of tags (hidden vs. killed, hide_output vs kill_output and hide_input vs. kill_input).

But I wasn't sure how to handle all of the tag logic without having a bunch more elif statements, which would have meant applying an even strong tag hierarchy than we currently have. At least for now this seems like a good solution.

However, if we want this to scale up to handling many more tags, we'll still need to solve the tag logic manipulation system. It may require building templates in memory on the fly as suggested by @Carreau but I don't want to sink the time into solving that until we know better the road we want to travel.

[mpacer]

Now, there is also one for hard hiding (killing) pdf output too:
https://github.com/michaelpacer/hiding_tags_nbconvert/blob/master/kill_hidden.tplx

I think we could do the cell killing at the preprocessor level, and then it would generalise across output formats, but since templates expect to find well-formed notebooks, we can't kill the output or input earlier in the chain (at least not in any straightforward way).

Also, this solution doesn't allow this to be combined easily with arbitrary templates even for the same output format (html/pdf). For that we may need to build Jinja templates on-the-fly.

[mpacer]

Per comments from the Fall 2016 dev week, I changed the tags to use a jupyter: prefix.

Are there any other changes that need to be made before we can begin integrating something like this into the core nbconvert framework (even without a user-friendly interface for adding and editing tags in the notebook)?

[ociule]

Hi, it's been a while since nbformat has picked source_hidden and outputs_hidden as the official code metadata, please see jupyter/nbformat#94

Furthermore, jupyterlab implements it, see jupyterlab/jupyterlab#2474

It would be great if nbconvert implemented it too.

I think only a template change is needed.

[ociule]

FWIW, I was able to get the result I wanted (not CSS hide-based like this issue, but kill-based, no output) by using this template in the jupyter data folder share\jupyter\nbconvert\templates\html\index.html.j2 (it's used when exporting via File->Export->HTML)

{%- extends 'classic/index.html.j2' -%}

{%- block input_group scoped-%}

{%- if 'source_hidden' in cell.metadata.get("jupyter",[]) and cell.metadata.jupyter.source_hidden -%}
{%- else -%}
    {{ super() }}
{%- endif -%}
{%- endblock input_group -%}

{%- block output_group scoped-%}

{%- if 'outputs_hidden' in cell.metadata.get("jupyter",[]) and cell.metadata.jupyter.outputs_hidden -%}
{%- else -%}
    {{ super() }}
{%- endif -%}
{%- endblock output_group -%}

This uses the input / output hidden metadata implemented by the jupyterlab user interface.

[choldgraf]

Just a note that (without knowing about this issue), I've started using the following tags for controlling cell behavior in Jupyter Book:

Soft hiding will add a "toggle" button to the right of the cell and hide some element of it.

• hide_input
• hide_output

hard hiding will ensure that parts of the cell don't make into the HTML at all:

• remove_input
• remove_output
• remove_cell

More info here: https://jupyterbook.org/features/hiding.html

I would be happy to brainstorm with folks around how to standardize these tags across projects etc. I know a few other projects have considered using tags for this (I believe nbsphinx is one) so it may be useful to just have an agreed-upon set of tag names for this behavior

[MSeal]

As an FYI there are some metadata fields in the schema for hiding input and outputs (jupyter:source_hidden and jupyter:outputs_hidden) as well as for collapsing outputs (collapsed): https://github.com/jupyter/nbformat/blob/master/nbformat/v4/nbformat.v4.schema.json#L195-L239 -- I haven't checked if nbconvert respects these for html exports though (I suspect it doesn't off-hand).

[westurner]

It looks like these are the latest docs for Hiding or Removing input, output, and cell cells with Jupyter Book (Sphinx (docutils)) and MyST Markdown, ReStructuredText, or MyST in .ipynb :

• https://jupyterbook.org/en/stable/content/metadata.html#add-tags-using-myst-markdown-notebooks
• https://jupyterbook.org/en/stable/interactive/hiding.html#hide-cell-inputs