UI For Metadata #2333

Carreau · 2012-08-24T10:23:58Z

This a prototype to edit metadata.
right now you need to execute

~~``` %%javascript #execute to toggle header to edit metadata of cell $('body').toggleClass('editmetaon') ```~~

To see the UI change.

I'll add a button to the toolbar to do so once #2127 is merged.
looks like

Cell "header" are togglable by above command, and clicking on "raw edit" bring the modal editor.

My question is what kind of API do we want to add other buttons to the cell header/toolbar.

Obviously if an extension want to add a button, the button needs to be be added to all the current cell of a certain type.

Do we allows extension to be loaded at any time, or do we says that some stuff can only be extended if the extension is loded at notebook load time?

And we also need maybe an event to say that the metadata have changed.

Update :

see this comment
To see how to enable.

travisbot · 2012-08-24T10:26:28Z

This pull request passes (merged 2e2514ab into 144f08a).

Carreau · 2012-09-30T09:53:47Z

Hi,
This PR is without activities for 1 month now,
I'm going to close it and open an issue to reference it.
This does not mean than we refuse the code that is here, but that we try to keep the number of opened Pull request as low as possible to have better bird view of active code.

Fell free to reopen this PR whenever you want or contact us if you have any questions.

Thanks for contributing.

I ll reopen later when times come.

Carreau · 2012-10-02T20:16:28Z

Reopening since #2127 has been merged.

fperez · 2012-10-06T07:54:56Z

Now that #2127 went in, do you want to add the button? That way we can play with it 'for real'...

Carreau · 2012-10-06T09:28:04Z

Yes, I'm working on it, but I'm leaving for conference on tuesday and just finished my poster.
I'll be offline and without computer next week so i'll do my best to have something usable before the end of the week-end, but that won't be easy.

Still here is a prototype which toggle between "Nothing Special" and "Slide Start".
Should work only with Code Cell.

There is a button in the toolbar to toggle the per cell menubar.

Pinging @ellisonbg, are you more interested in making this ready for merging, or are you Ok to make your PyData Presentation for a not yet merge Branch ?

If the later, I would hard code most on the stuff on this branch and start working on the Presentation Mode itself.

Carreau · 2012-10-06T12:12:50Z

Ok, the basic stuff should work for all kinds of cells.
adding buttons should be pretty strait forward.

metadata look like

{
    "slideshow": {
        "slide_start": false,
        "slide_step": true
    }
}

And the 2 properties can be toggled in one click, and survives save and reload.

Carreau · 2012-10-06T13:15:44Z

OK,
I'm missing time so I've hacked a quick thing together based on what I did On scipy and this PR.

https://github.com/Carreau/ipython/tree/slideshow_metadata

Click on the 'image' button in the toolbar, before the cell-type dropdown selection.
Edit the metadata to have the Slide Start on the right cell.
Hide the per/cell toolbar.

%load_ext slidemode

then,

%slideshow_mode

This push a new image button on the toolbar.
This new button 'enable' the slide mode.

To control the slide transition you have to click on the 'enable slide control' in the new toolbar on the top.

The 'stop' button is more a 'Pause' button, as if you start the slideshow again, you will get back to where you where before.

I'll redo the all thing later, but right now and won't have time.

Carreau · 2012-10-06T13:39:27Z

And now there is a stop/pause button, with the first you will start again from first slide, with the second, you will start where you left from.

The icon to toggle the metadata toolbar is now ui-icon-tag.

Done for today.

keflavich · 2012-11-09T18:43:54Z

Slideshow mode is great! Is there any documentation for it? (what does the In/Out button do, what does Group Stop / Slide Stop mean?)

Also, have you ever tried applying styling to your slides? http://wiki.ipython.org/Cookbook/Styling_Notebook only seems to work for the UI component.

Carreau · 2012-11-09T19:52:27Z

From my phone, so short:

In/Out: show only input; show only output; show in then out.; 2 at the same
time.

Group/slide : is it a start of a new slide or a step in showing the current
slide.

This is mainly an experimental branch so it is not documented and wont stay
as is.
Le 9 nov. 2012 19:44, "Adam Ginsburg" notifications@github.com a écrit :

Slideshow mode is great! Is there any documentation for it? (what does the
In/Out button do, what does Group Stop / Slide Stop mean?)

Also, have you ever tried applying styling to your slides?
http://wiki.ipython.org/Cookbook/Styling_Notebook only seems to work for
the UI component.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/2333#issuecomment-10239909.

Carreau · 2012-11-09T20:09:59Z

As for the css; we have custon element. You can override in
.ipython/profil_xxx/static/css/cusom.css if you need need smth more
specific we might give a more precise answer of how to do it.
Le 9 nov. 2012 19:44, "Adam Ginsburg" notifications@github.com a écrit :

Slideshow mode is great! Is there any documentation for it? (what does the
In/Out button do, what does Group Stop / Slide Stop mean?)

Also, have you ever tried applying styling to your slides?
http://wiki.ipython.org/Cookbook/Styling_Notebook only seems to work for
the UI component.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/2333#issuecomment-10239909.

keflavich · 2012-11-09T20:37:23Z

Re: experimental - it will be incredibly useful, so I hope you continue development!

Re: css, thanks; looks like the full directions for that process are here: http://mail.scipy.org/pipermail/ipython-user/2012-August/010997.html. However, I get the Placeholder for custom user CSS message instead of the css loading if I look at http://localhost:port/static/css/custom.css

Carreau · 2012-11-09T20:53:41Z

Re: experimental - it will be incredibly useful, so I hope you continue development!

Yes, it will be part of ipython.

However, I get the Placeholder for custom user CSS message instead of the css loading if I look at http://localhost:port/static/css/custom.css

This is because the server does not see you file, there is a placeholder file to avoid 404.

Did you restart the server? What is the full path of the css file you added ?

keflavich · 2012-11-09T20:56:56Z

Yes, I restarted the server. Full path is:
/Users/adam/.ipython/profile_default/static/css/custom.css
and the server reports on startup:
[NotebookApp] Using existing profile dir: u'/Users/adam/.ipython/profile_default'

FYI, I'm running from commit faedbd7 on the slideshow_extension branch.

Carreau · 2012-11-09T21:09:48Z

Yep, you are right, this branch is a little old and does not have custom css.

This one should be a little more recent :
https://github.com/Carreau/ipython/commits/slideshow_metadata

Carreau · 2012-11-09T21:19:44Z

slideshow_mode is the proof of concept branch.
slideshow_metadata is the more recent one ( i think) and should be the one to use.

You should also have a pmodeand _pmode branch around.

IIRC, in some branches the transition can be edited with the metadata toolbar, in the oldes one you should put
or #### in the first cell of each slide. I didn't had time to rework a lot on that. @ellisonbg might have used it for is talk at pydata and @dwf will soon use it or has used it not so long ago. They might send me feedback to improve it and hopefully we can start to merge things in IPython itself.

keflavich · 2012-11-09T21:22:08Z

OK, great! I will go ahead and use it - is this Issue a good place for feedback, or should I open independent issues in your fork?

Last question on css: Is it possible to override the UI css using the ~/.ipython/profile/static/jquery/css/themes/ directory, or does that still need to be done as on the wiki? My goal is to create a slideshow with a black background (so I don't get blinded by the projector)

keflavich · 2012-11-09T21:28:01Z

slideshow_metadata seems to be missing the "start slideshow" button; it has the sub-menus on each individual cell but not the overall important one. What is _pmode for?

Carreau · 2012-11-09T21:28:53Z

is this Issue a good place for feedback,
Yes, here is fine.

Last question on css: Is it possible to override the UI css using the ~/.ipython/profile/static/jquery/css/themes/ directory, or does that still need to be done as on the wiki? My goal is to create a slideshow with a black background (so I don't get blinded by the projector)

Yes any file in ~/.ipython/profile_xxx/static/ will "overwrite" its corresponding version in IPython source dir.
they just need to exist at server boot time (I think) .

It should be possible to add a class to <body> when the slide show is on (is there already maybe ?) so that your custom css apply only while you are presenting.

Carreau · 2012-11-09T21:36:39Z

You need to load the extension cf comment above (#2333 (comment))

Carreau · 2012-11-09T21:38:44Z

_pmodeand pmode are other draft branches. I should dive in it again to tell you the exact difference.
One should have a prototype that allow to show a code cell by group of line to slowly describe it. It still had to be triggerd by hand from the js console.

keflavich · 2012-11-09T21:44:27Z

Ah right, I just made a silly mistake not doing %load_ext. However, when I try %load_ext, it fails. If I look in my ipython/build directory, this file exists: ./build/lib/IPython/extensions/slidemode.py but this file ./IPython/extensions/slidemode.py is not copied into build/ - I think this may be an oversight in the setup.py?

ahmadia · 2012-11-10T16:07:44Z

@Carreau - Thanks for your work on this Matthias. We're going to be using slideshow_mode tomorrow in the Supercomputing presentation. We're going to hold off on the advanced metadata stuff, but I'll try to collect feedback from both instructors and students about how they feel things went.

ahmadia · 2012-11-10T21:06:29Z

More initial feedback. The lack of a slide navigator is a real show-stopper right now for working with and debugging large slide shows. It would be great if you could click the little [x/X] button indicating the current slide and choose to jump to a slide from the dropdown.

'flase' is true while false is false

update docs

And change text.

Carreau · 2013-01-14T07:50:43Z

Everything should be fixed, rebased on master to avoid stupid conflict.

Css could be perfected, but if we move to bootstrap soon, in anyway most of this would have to be re-done. So I would prefer not to fight for pixel perfect alignment now.

ellisonbg · 2013-01-14T17:47:06Z

IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js

+    var example_preset = []
+    example_preset.push('default.rawedit');
+
+    CellToolbar.register_preset('default',example_preset);


Let's capitalize default -> Default as the other menu items are capitalized.

ellisonbg · 2013-01-14T17:53:39Z

Hmm, I can't seem to load the example preset from the new location. I am including the following in my custom.js:

$.getScript('/static/js/celltoolbarpresets/example.js');

Am I missing something?

ellisonbg · 2013-01-14T17:54:15Z

IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js

+    CellToolbar.register_callback('example.help',add_simple_dialog_button)
+    example_preset.push('example.help')
+
+    CellToolbar.register_preset('example',example_preset);


Let's capitalize "Example" here as well.

Carreau · 2013-01-14T18:31:17Z

Hmm, I can't seem to load the example preset from the new location. I am including the following in my custom.js:
$.getScript('/static/js/celltoolbarpresets/example.js');
Am I missing something?

Nop, fixed now.

ellisonbg · 2013-01-14T20:01:52Z

Awesome, looks great! I am merging as all the comment have been addressed. Thanks for your patient work on this one, wish I could buy you a beer this evening!

UI For Metadata

Carreau · 2013-01-14T20:05:23Z

Yeepeee after 5 month ! It was a hard one !

Thanks for you careful review !

ellisonbg · 2013-01-14T20:10:39Z

Yes, I wish I could have spent more time reviewing to get it in faster, but
I am really happy that we took our time and did it right. It will pay off
in the long run. Let me know when you have updated the slideshow PR to
master. that one should be easy to merge now as it is just a simple preset!

On Mon, Jan 14, 2013 at 12:05 PM, Bussonnier Matthias <
notifications@github.com> wrote:

Yeepeee after 5 month ! It was a hard one !

Thanks for you careful review !

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/2333#issuecomment-12236983.

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

damianavila · 2013-01-14T20:20:51Z

El 14/01/13 17:05, Bussonnier Matthias escribió:

Yeepeee after 5 month ! It was a hard one !

Thanks for you careful review !

—
Reply to this email directly or view it on GitHub
#2333 (comment).

Thanks both for the hard work!!!

UI For Metadata

Carreau mentioned this pull request Sep 30, 2012

UI for metadata #2449

Open

Carreau closed this Sep 30, 2012

This was referenced Sep 30, 2012

mobile browsers and the htmlnotebook #2454

Closed

[brainstorming]Slideshow extension #2193

Closed

Carreau reopened this Oct 2, 2012

Carreau mentioned this pull request Oct 19, 2012

Implement slide show mode for the notebook #1580

Closed

Carreau added 13 commits January 14, 2013 08:40

remove relative position

7b029fd

do not use alert on invalid json

f90c26a

fix css size

25d6ebf

remove useless jquery selector

594da80

slightly generalize utils generator

6bed5eb

create celltoolbar in cell.js and inherit

b6d1c7c

change - to Hidden

649031c

fix lock cell button

c9574bf

'flase' is true while false is false

remove commented css

8489760

change set_preset to activate_preset

119af26

update docs

add default celltoolbar UI

5d0e44a

Load default.js (for celltoolbar) by default

3de83c1

And change text.

fix celltoolbar select css

ff47d83

ellisonbg reviewed Jan 14, 2013
View reviewed changes

Carreau added 2 commits January 14, 2013 19:10

Capitalize

0b350a6

fix example.js

bc2f76f

ellisonbg added a commit that referenced this pull request Jan 14, 2013

Merge pull request #2333 from Carreau/metaui

57b0450

UI For Metadata

ellisonbg merged commit 57b0450 into ipython:master Jan 14, 2013

Carreau deleted the metaui branch January 21, 2013 06:38

CamDavidsonPilon mentioned this pull request Mar 22, 2013

NBviewer experiment. CamDavidsonPilon/Probabilistic-Programming-and-Bayesian-Methods-for-Hackers#22

Open

mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

Merge pull request ipython#2333 from Carreau/metaui

506a0cd

UI For Metadata

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI For Metadata #2333

UI For Metadata #2333

Carreau commented Aug 24, 2012

travisbot commented Aug 24, 2012

Carreau commented Sep 30, 2012

Carreau commented Oct 2, 2012

fperez commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

ahmadia commented Nov 10, 2012

ahmadia commented Nov 10, 2012

Carreau commented Jan 14, 2013

ellisonbg Jan 14, 2013

ellisonbg commented Jan 14, 2013

ellisonbg Jan 14, 2013

Carreau commented Jan 14, 2013

ellisonbg commented Jan 14, 2013

Carreau commented Jan 14, 2013

ellisonbg commented Jan 14, 2013

damianavila commented Jan 14, 2013

UI For Metadata #2333

UI For Metadata #2333

Conversation

Carreau commented Aug 24, 2012

Update :

travisbot commented Aug 24, 2012

Carreau commented Sep 30, 2012

Carreau commented Oct 2, 2012

fperez commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

Carreau commented Oct 6, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

keflavich commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

Carreau commented Nov 9, 2012

keflavich commented Nov 9, 2012

ahmadia commented Nov 10, 2012

ahmadia commented Nov 10, 2012

Carreau commented Jan 14, 2013

ellisonbg Jan 14, 2013

Choose a reason for hiding this comment

ellisonbg commented Jan 14, 2013

ellisonbg Jan 14, 2013

Choose a reason for hiding this comment

Carreau commented Jan 14, 2013

ellisonbg commented Jan 14, 2013

Carreau commented Jan 14, 2013

ellisonbg commented Jan 14, 2013

damianavila commented Jan 14, 2013