customizing look of a notebook for embedding in a MOOC infra

[Thierry Parmentelat]

Hi folks

My goal is to have notebooks embedded as an iframe in an open-edx MOOC

I am now working on customizing the look so as to optimize real estate

ideally I'd like the notebook area to look like the attachment

I have started to write a custom.js that uses jquery primitives like e.g.

    $("div#header-container").hide();

and have been able to get part of the job done

(I'd rather use custom.js than an extension because as far as I understood, it's easier to deploy in my context that is docker-based)

However, some other aspects seem to not work at all

For example trying to turn off the `Widgets` entry in the menubar is not working for me;

I have tried to have this

    $("#maintoolbar>div>div>div:nth-child(7)").hide();

attached to either app_initialized.NotebookApp or to notebook_loaded.Notebook,

but no matter what I try, I fancy something (extension?) runs in my back afterwards and reinstates it..

At this point I figure I am most likely not doing things the way they should be done...

So my questions are

* where should I start ?

  I have tried to find doc. resources but could only come up with pieces here and there,

  and found it hard to summarize; plus, people often discuss adding stuff, but I really could not

  find much on the topic of removing menu entries and similar

* more specifically, I guess I have 2 separate questions to answer

  * at what stage of the loading process should I hook ? should I use custom.js or an extension ?

    which event should trigger my code ?

  * is/are there any higher-level API that I should use instead of messing directly with the DOM

Sorry if I am missing the obvious here == thanks in advance for any help

Also feel free to redirect me if here is not the right place to ask 

-- Thierry

[Matthias Bussonnier]

Hi Thierry,

On Sun, Jan 29, 2017 at 7:38 AM, Thierry Parmentelat
<thierry.p...@gmail.com> wrote:
> Hi folks
>
> My goal is to have notebooks embedded as an iframe in an open-edx MOOC
>
> I am now working on customizing the look so as to optimize real estate
> ideally I'd like the notebook area to look like the attachment
>
> I have started to write a custom.js that uses jquery primitives like e.g.
> $("div#header-container").hide();
>
> and have been able to get part of the job done
> (I'd rather use custom.js than an extension because as far as I understood,
> it's easier to deploy in my context that is docker-based)

The difference is minimal, custom.js is supposed to be user-defined, extensions
are supposed to be requirable modules that you can individually deploy.

>
> However, some other aspects seem to not work at all
> For example trying to turn off the `Widgets` entry in the menubar is not
> working for me;
> I have tried to have this
> $("#maintoolbar>div>div>div:nth-child(7)").hide();
> attached to either app_initialized.NotebookApp or to
> notebook_loaded.Notebook,
> but no matter what I try, I fancy something (extension?) runs in my back
> afterwards and reinstates it..

Yes, IIR the widgets package itself run an extension which add option
to the notebook menu.
It's not ment to be deactivated, but if you are controlling the
deployment, you can deploy a
custom build version of the notebook.widget extension.

>
>
> At this point I figure I am most likely not doing things the way they should
> be done...
>
> So my questions are
>
> * where should I start ?
> I have tried to find doc. resources but could only come up with pieces
> here and there,
> and found it hard to summarize; plus, people often discuss adding stuff,
> but I really could not
> find much on the topic of removing menu entries and similar

The current notebook is not well designed to allow this kind of things.
It was never initially developed for extensions, so the documentation
is lacking if not non-existant.

> * more specifically, I guess I have 2 separate questions to answer
> * at what stage of the loading process should I hook ? should I use
> custom.js or an extension ?

That will not matter much. It depends on the composability you want.
if you want to reuse some things go with extensions. They can be
installed system wide and
activated on a per-user basis. In the code itself, `custom.js` is
loaded a tiny bit before extensions.
But the range of functionality are quasi-identical:

https://github.com/jupyter/notebook/blob/master/notebook/static/notebook/js/main.js#L75
// custom.js
https://github.com/jupyter/notebook/blob/master/notebook/static/notebook/js/main.js#L211
// extensions.

> which event should trigger my code ?

That will a bit depend on what you are trying to do/undo. The widgets
extensions likely trigger on notebook loaded. So you need to trigger post-this
to remove the menu. You'll have to listen for an event emitted by the
widget extension itself.

Likely the 2 main event you want to listen to are :

app_initialized.NotebookApp and notebook_loaded.Notebook

That trigger early enough when the JS application is ready but notebook
not yet loaded, and then after a specific notebook have loaded.

> * is/are there any higher-level API that I should use instead of messing
> directly with the DOM

Not with Classic Jupyter notebook. Lab will have more hooks.

> Sorry if I am missing the obvious here == thanks in advance for any help
> Also feel free to redirect me if here is not the right place to ask

With the kind of customisation you are trying to do, I would directly deploy a
custom build of the notebook. For example, the Maintoolbar you want to use
in the header is created on notebook/js/main.js using the #maintoolbar-container
div, it self hardcoded in notebook.html template. The template itself
is hard to extend
if you want to change just this. It will likely get easier to do
_some_ of these things
with a custom deployment. And sending us back the feedback in order for us to
make things easier. Apologies again if things are not that easy to
configure/replace.

Cheers,

--
Matthias

>
> -- Thierry
>
> --
> You received this message because you are subscribed to the Google Groups
> "Project Jupyter" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to jupyter+u...@googlegroups.com.
> To post to this group, send email to jup...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/jupyter/3a046b03-c621-4b09-8095-5c8ee7219b1f%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Thierry Parmentelat]

Hi Matthias

thanks for the tips

The whole idea behind going for docker in the first place is to have the option to use all the fancy images out there
So I’m trying to minimize the impact of the changes that need to be done on the image
OTOH I already need to build variants of the vanilla dockerhub images, (I started with jupyter/scipy-notebook), if only to add specific python modules for each course

So; one thing that seems to work wrt this ‘widgets’ component is this addition to my Dockerfile
RUN jupyter nbextension disable jupyter-js-widgets/extension

does that look OK? what functionalities should I expect to lose ?


many thanks for your feedback, this is most helpful — Thierry

> You received this message because you are subscribed to a topic in the Google Groups "Project Jupyter" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/jupyter/fAU2zI9jdw4/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to jupyter+u...@googlegroups.com.

> To post to this group, send email to jup...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/CANJQusUqaWgoTePmes3MZVyr_B5pXy7xDR3Zu_7wQDQcJE-61w%40mail.gmail.com.