Add expand/collapse support for long output elements like stdout and tracebacks

[fperez]

When cells produce very long strings of stdout, it would be better to present the output eliding the middle section and replacing that with an element that can be clicked to expand the whole thing:

first few lines (10 or so) of output...

[ N lines hidden - click here to expand ]

last few lines of output.

For reference, the code that inserts the stdout elements is here.

Another place where similar functionality would be useful is in tracebacks: instead of flattening the whole traceback out, we could show only the bottom frame and offer a widget to expand the others only on request.

I looked around for options on how to best do this, and found a few options that range from simple snippets of JS we can add to using jquery plugins. This one seems like a reasonably simple one that doesn't add a ton of code for us.

I'd like some feedback from @ellisonbg and @minrk who know the JS code better than I, before starting to implement anything directly. Ultimately we may want to go with a more featureful solution if it looks like we're going to reuse this in several places, but if not I can cook something up quickly with the one linked above. Note: there are a ton of these online, so I'm happy to use another if anyone has a principled preference.

[ellisonbg]

I definitely agree that we probably want a better UI for collapsing of the output cells. But this will be very simple to pull off using plain old jquery - I don't think we need to worry about using plugins. The only difficult part is designing a UI that is clean and simple.

[fperez]

What do you think of using this snippet: http://jsfiddle.net/RKsEm/ ? It's the simplest I could find, that uses jquery but isn't an extra full-blown plugin...

[ellisonbg]

We should just write our own code for this - it is pretty simple stuff
and we will need to generate a UI that matches our UI theming.
JqueryUI has a set of builtin icons that will match our theme and I
know they have a couple +/- options as well as other collapse/expand
ones. But from the UI design perspective, I am not convinced we want
to go with an icon/button for collapsing/expanding. I am loath to
start putting buttons on the main notebook area. We will just need to
play around with different options. One such option would be to only
show the +/- when you hover over a the output area. But the code
itself is not difficult to write.

On Thu, Mar 22, 2012 at 4:34 PM, Fernando Perez
reply@reply.github.com
wrote:

What do you think of using this snippet: http://jsfiddle.net/RKsEm/ ?  It's the simplest I could find, that uses jquery but isn't an extra full-blown plugin...

---

Reply to this email directly or view it on GitHub:
#1513 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[fperez]

yup, I also don't think buttons are the way to go in text areas... the snippet I linked to is actually tiny and an easy starting point, it shows the right jquery calls to do the expand/collapse.

[ivanov]

i think this an approach addressing this issue has now been merged into trunk, ff0f5cd
most recently with . Ok to close?

[fperez]

y