formgrader - manage assignments - problems (with jupyterhub)

[christina-seegers]

Could anyone please verify, on the page of the formgrader and there with manage assignments:
It really is possible to click on the name of an assignment or on the preview/ magnifiying glass and something happens if everything is installed correctly.

As I am not able to click these two although it is possible for generate or edit and I assume it is due to a installation/configuration problem (that I just do not understand).

nbgrader --0.8.2

jupyterhub --2.3.1

jupyter notebook --6.5.4

Expected behavior

A notebook opens upon clicking onto the name of an assignment. (formgrader page and there managing assignments)

Actual behavior

Cannot click on the name.

Steps to reproduce the behavior

Have JupyterHub with nbgrader and multiple classes setup.
Go to formgrader page and there managing assignments and add an assignment or try to use the preexisting ps1 that comes with the quickstart (following the demo-setup-steps for multiple classes).

[christina-seegers]

Additional finding, if I do start the formgrader within my personal space an not via the service this happens:
I can create an assignment and click but get a 404 not found error
I looked into jupyter nbextension list and the config for conda says formgrader/main disabled (while for me personally everything is enabled and stated OK) - I am not sure if it should be set up this way.

And just found this: #1660
-> I will switch jupyterlab

[christina-seegers]

Sadly this #1660 does not fix the issue. I still cannot click the link.
Although I have to admit that upon inspecting the website again it looks as if there is more content and there might be some sort of event possible - it just doesn't work for me.

[christina-seegers]

The combination of Jupyterhub 4.0 and nbgrader 0.8.3 leads to the same situation. I still cannot access a notebook of an assignment by clicking on the assignment name. In both cases this is due to the #href that is missing within the service page of managing assignments.
Are there maybe some prerequistis to that #href to be set. Like access to a folder or file? Or a specific file structure? Maybe something special to the multiple-classes setup?

[lahwaacz]

The link is created here: https://github.com/jupyter/nbgrader/blob/v0.8.3/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js#L105-L116

        /* Append link with :
         *     - href if this is a Notebook<7 environment
         *     - click listener to send message to iframe parent if this is Jupyter Lab environment
         */
        this.$name.append($("<a/>")
            .text(name)
            .attr("target", self.is_lab ? undefined : "_blank")
            .attr("href", self.is_lab ? undefined : base_url + "/tree/" + url_prefix + "/" + this.model.get("source_path"))
            .click(self.is_lab ? function(){
                window.parent.postMessage(jlab_go_to_path(url_prefix + "/" + this_assignment.model.get("source_path")), '*');
            } : undefined)
        );

This looks pretty weird. Why does the link needs a click event when self.is_lab is true?

[lahwaacz]

Does anybody know which code in JupyterLab is supposed to handle the messages sent via window.parent.postMessage?

[brichet]

It was a workaround to handle notebook<7 and jupyterlab.
In notebook, the href opens an new tab in the tree view, in the correct directory.
In jupyterlab, it runs a command to open the directory in the file browser panel. The formgrader widget is an iframe embedded in jupyterlab, so the window.parent.postMessage is used to send a message from the iframe to jupyterlab

[lahwaacz]

@brichet I don't understand - the code is the same even in the main branch which targets notebook 7 and jupyterlab 4 (which is where I actually encountered this issue): https://github.com/jupyter/nbgrader/blob/main/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js#L105-L116

[brichet]

@lahwaacz I was only answering to the question about the self.is_lab flag. Indeed, it is a leftover after the support to jupyterlab4 and notebook7, and should always be true in the 0.9.x version. We might be able to remove it, as well as the link's href.
About the issue itself, I have no way to test it currently.

[lahwaacz]

@brichet I'm confused about what is the intended behavior here. I don't see any <iframe> element in the HTML when I open jupyterlab 4. Even in that case, window.parent == window, but I was not able to find any code that would handle the messages sent via window.parent.postMessage, which is obviously necessary for this feature to work. Maybe you have some reference where I could find the details?

[brichet]

The widgets for jupyterlab are in typescript, in the src directory.
For the formgrader, instead of rewriting the whole code, we just embbed the javascript one from the nbgrader/server_extensions/formgrader directory using an iframe.
The definition of the jupyterlab widget is in src/formgrader/index.ts:
export class FormgraderWidget extends IFrame

(I answered from a cell phone, it's not easy to provide links.)

[lahwaacz]

I think that I finally got it. There are actually two cases (with jupyterlab 4 and jupyterhub 4):

1. The formgrader is open inside jupyterlab, in which case there really is an iframe and the link works (though its action can be easily missed, e.g. if the opened directory is empty):

   

2. The formgrader is open by following the link from the hub control panel via Services > [name of the course], when this is set up according to Using nbgrader with JupyterHub. In this case clicking on the course title in formgrader does nothing, as there is no iframe and no file browser: