Rise: Hide input cells

[jmshea]

It would be great if this had the ability to hide input cells, like you do for nbconvert here:

http://www.damian.oquanta.info/posts/hide-the-input-cells-from-your-ipython-slides.html

That would make the ability to mix hidden python stuff with purposefully displayed python.

[akloster]

I struggled with this, too. My first attempt was for a talk at EuroPython 2014 ("Brainwaves for Hackers") where I hacked the live_reveal extension to interpret "skip" (from the slideshow-toolbar) as "hide input".

A new idea is the following code. I don't know if IPython display already has a way to somehow access the "current slide" (which is a difficult concept when taking widgets, threads etc into account), so I found another way. I output a div with a unique id. Then I display a javascript function querying that div, resolving parents until I reach the "div.cell". From that I can find the "div.input" to add a class to it.

def hide_code_in_slideshow():
    import os
    uid = os.urandom(8).encode("hex")
    html = """<div id="%s"></div>
    <script type="text/javascript">
        $(function(){
            var p = $("#%s");
            if (p.length==0) return;

            while (!p.hasClass("cell")) {
                p=p.parent();

                if (p.prop("tagName") =="body") return;
            }
            var cell = p;
            cell.find(".input").addClass("hide-in-slideshow")
        });
    </script>""" % (uid, uid)
    display.display_html(html, raw=True)

Of course you need the ".hide-in-slideshow" too:

%%html
<style>
 .container.slides .celltoolbar, .container.slides .hide-in-slideshow {
    display: None ! important;
}
</style>

This also conveniently hides the toolbar in slideshow mode. At least I find this more convenient. I think editing in reveal-mode is almost useless for presentations, and in preparing for a presentation, it's not much better.

[akloster]

And I almost forgot. You have to use hide_code_in_slideshow() in cells you want to hide in this way.

[arulalant]

Already I did this few months back. Read the Note : 9 in README.md of https://github.com/arulalant/live_reveal

We can just use #hideme tag inside code cell to hide it.

I gave pull request https://github.com/damianavila/live_reveal/pull/13
But now I didnt sync with this original repo. In case of need, I will do that.

Thanks.

[mcrovella]

Arulalant: This would be a huge help for me too! Would be great to sync your mods with original repo!

[mcrovella]

akloster: I'd like to try your method too -- where exactly does the .hide-in-slideshow go?

[damianavila]

I not sure to ship this as default, maybe it can be a configurable option or use another "plugable" extension. There are other extensions making the same, ie: https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/usability/runtools,
Maybe we need just to adapt those solutions or, better, make them plugable to our system.

[juliohm]

What is the current state of this issue? I've installed the runtools plugin, but it's not exactly the same behavior as the output_toggle.tpl. For instance, we cannot click on the output during the presentation to see (and rerun) the code.

[damianavila]

What is the current state of this issue?

Still on discussion... there are some issues about the hiding and that's why I prefer to make it configurable or "plugable", but I did not go forward with the implementation yet...

[torwag]

As far as I understand, this issue and #107 should be merged

[damianavila]

I agree... closing #107 to keep the discussion opened here...

BTW, in #107, two extensions were mentioned which provide the desired functionality. We should be able to build on top of that to use them as a "plugin" or in combination with RISE.

Additionally, I am thinking in a native config option to hide all the code cells (and maybe specific cells, but we should find a nice way to spell which cells we want to hide: one possibility is to use the cell metadata - as one of the referenced extensions works - but there is no UI for that and you have to modified the metadata by hand).

Maybe we can provide the config hide all cells functionality and left the specific ones for later (or for other extensions...

[dzenny]

There is a hack (based on http://blog.nextgenetics.net/?e=102) which worked perfectly for my recent presentation, when I needed to restart my interactive widgets.
(All changes are made in \settings.ipython\nbextensions\livereveal\main.js)

87: function() {Reveal.toggleOverview();}, // w, toggle overview, W    
// after the line above insert the following
67: function() {codeOnOff();}, // C-67 (c-99)  Toggle code cells on/off

"<li><b>alt + r</b>: Enter/Exit RISE</li>" +
// after the line above insert the following
"<li><b>c</b>: Toggle view of code cells</li>" +  // Toggle code cells on/off

// after the function buttonHelp insert the following
// start: Toggle code cells on/off
function codeOnOff() {
  code_show = !code_show;
if (code_show) { 
  $('div.input').show();
  $('#code_b').css('opacity', '0.8');
}  else  {
   $('div.input').hide();
   $('#code_b').css('opacity', '0.6'); }
};

function buttonCode() {
  var code_button = $('<i/>')
    .attr('id','code_b')
    .attr('title','Code On/Off')
    .addClass('fa-info-circle fa-4x fa')   
     // Possible variants for the icon: arrows-v,  check-circle, circle-o,
     // dot-circle, ellipsis-v, eye, eye-slash, folder-open-o, info-circle
    .addClass('my-main-tool-bar')
    .css('position','fixed')
    .css('bottom','2em')
    .css('left','0.48em')
    .css('opacity', '0.6')
    .click(
        function(){
     code_show = !code_show;
     if (code_show) { 
                $('div.input').show();
                $('#code_b').css('opacity', '0.8'); 
             }
     else {
                 $('div.input').hide();
                 $('#code_b').css('opacity', '0.6'); 
             }
    }
    );
  $('.reveal').after(code_button);
  code_show = true;  // this is not working
  codeOnOff();
}
//end: Toggle code cells on/off

// In the function revealMode() 
...
buttonExit();
// after the line above insert
buttonCode();       // Toggle code cells on/off
...
$('#help_b').remove();
// after the line above insert
$('div.input').show();      // Toggle code cells on/off
$('#code_b').remove();  // Toggle code cells on/off

It even works seamlessly with overview mode.

[damianavila]

Thanks for posting you experience...

[akloster]

So what is the canonical way to supress output now? I'm still relatively happy with my own solution because it is code-driven and saved inside the code cells, and shows up in the normal notebook mode.

[mcrovella]

I have been (extensively) using your solution @akloster (updated to python 3) - I prefer being able to specify which code should be hidden in the notebook itself, and it also becomes possible to strip the code out of converted latex files easily when desired.

[damianavila]

So what is the canonical way to supress output now? I'm still relatively happy with my own solution because it is code-driven and saved inside the code cells, and shows up in the normal notebook mode.

There is no a canonical way :wink: so it is nice to know the experience from others to see how we can implement this successfully and covering the more frequent use cases...

[kirbs-]

I created a notebook extension to hide code and the input prompts. A single click toolbar button hides all code cells and input/output prompts. Or you can customize what is hidden in each cell via a cell toolbar. As a bonus, it's pip installable. Check out hide_code.

[damianavila]

Thanks fo the work and the link @kirbs- !

[damianavila]

FYI, we will have a native solution upstream soon: https://github.com/jupyter/notebook/issues/534

[damianavila]

OK, but until the upstream solution lands... let's implement a custom solution

[gsemet]

I would recommend simply a new 'Slide Type', named 'Output only', that would only apply a CSS style to hide the input code in the presentation. Same, I would add a 'Input only' slide type.

[julionaojulho]

Hi, do we have a solution for this issue?
Right now I am using @akloster approach, but it doesn't hide the inputs when I apply the nbconvert --to slides.
Is there any solution for that?

[damianavila]

If you are using nbconvert, you just need a customized template getting rid of the inputs... there are several examples on the web to do that... you have here http://www.damian.oquanta.info/posts/hide-the-input-cells-from-your-ipython-slides.html something like that (beware that thing are outdated... it is just to give you an idea @julionaojulho ;-)

[julionaojulho]

Why, thank you very much @damianavila !

I'll try to work it and adapt your solution to my needs

[schlichtanders]

I also think @Stibbons suggestion is most intuitive to everyone, let me repeat it here:

I would recommend simply a new 'Slide Type', named 'Output only',
that would only apply a CSS style to hide the input code in the presentation. 
Same, I would add a 'Input only' slide type.

Any progress on implementing this so far?

[schlichtanders]

Found that there is a very related discussion on ipython
https://github.com/ipython/ipython/issues/3841

[damianavila]

Any progress on implementing this so far?

Thinking into provide a mechanism to do this on RISE itself, since the upstream solution will probably live in jupyterlab.

[jasonsross]

It's been a while. Where are we at on this for suppressing input on resulting reveal slides?

[TMorville]

Is there any progress on this issue? Being able to hide code and only show the resulting figure seems like it should be a basic functionality.

[parmentelat]

just trying to close this discussion:

as per this convention here, from https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/nbextensions/hide_input/readme.html

The codecell hiding state is stored in the metadata cell.metadata.hide_input. If it is set to true, the codecell will be hidden on reload

---

I've been trying it out

• enabled the hide_input extension
• clicking on the button allows to toggle cell visibility (a narrow, near-empty cell remains, which seems about right)
• and this display is honored all right in RISE mode as well

---

So; can anyone confirm that this answers the initial need

the only caveat that I've found was about having to use a mouse click to toggle on and off; although this belongs of course more with the hide_input extension itself, I could propose to expose a bindable RISE: action to take care of that; but in a separate Issue in any case ..

[damianavila]

I have seen another extension that actually allows you to hide input and output with cells metadata.
And it seems to work OK: https://github.com/kirbs-/hide_code.
It is installable with pip and conda and it seems to work OK with RISE.
We maybe need to just document these options for the people interested in this sort of feature.

[firasm]

The above tool (https://github.com/kirbs-/hide_code) works pretty well with RISE ! Bit annoying to switch views from RISE and hide_code, but keyboard shortcuts (E and Shift +E to hide and show outputs).

[pytkr]

The above tool (https://github.com/kirbs-/hide_code) works pretty well with RISE ! Bit annoying to switch views from RISE and hide_code, but keyboard shortcuts (E and Shift +E to hide and show outputs).

Strangely, I use hide code with rise slide mode, but fail to show the input cell in correct position, always locating lower than normal position, and the line number dissapeared and collapse code extension's gutter bar covered left part of input area, any idea?

[damianavila]

It could be some conflicts between the extension, I binder example showcasing what you are describing would be a nice thing to have to start digging into it...

[kirbs-]

@pytkr hide_code doesn't modify any CSS classes. You shouldn't see the behavior you describe. Can you provide a binder or notebook of the issue?

[NEGU93]

Conclusion of this conversation. The current solution is the Hide Code tool which I actually tried and works like charm.

I believe this thread can be closed right?

Some notes:

I would recommend simply a new 'Slide Type', named 'Output only', that would only apply a CSS style to hide the input code in the presentation. Same, I would add a 'Input only' slide type.

This recommendation is great. However, now that I am using the Hide Code toolbox I like the 3 options it comes with. The proposed solution lacks this.

The above tool (https://github.com/kirbs-/hide_code) works pretty well with RISE ! Bit annoying to switch views from RISE and hide_code, but keyboard shortcuts (E and Shift +E to hide and show outputs).

It is still a bit annoying. The best for me will be for RISE to have the dropdown menu for the clide and subslide etc and then the 3 checkboxes of Hide Code all together as one. I am just saying to integrate this Hide Code tool to RISE as only one extension and not both.

[damianavila]

Thanks for the notes and feedback.
I think the hide_code extension is a reasonable solution for now.
We may implement/integrate this feature/idea in the jupyterlab version of RISE.
So, closing this one now.