Jupyter extension, registering clicks

32 views
Skip to first unread message

Dario Panada

unread,
Mar 24, 2020, 3:30:40 PM3/24/20
to Project Jupyter
Hello,

I am creating a Jupyter extension to register clicks anywhere on the notebook webpage. I am using:

$(window).click(() => console.log("click"));


That works for any click, except the first click on an un-selected code cell. Once that becomes selected, further clicks register normally. 

Any advice as to why?

Jason Grout

unread,
Mar 24, 2020, 4:11:58 PM3/24/20
to Project Jupyter
My guess is that the thing handling clicks in the notebook is stopping propagation of the click event up to the window?

Jason


--
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 view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/d89c9b46-14dc-424f-bcc8-d2aeeb528a93%40googlegroups.com.

Dario Panada

unread,
Mar 24, 2020, 4:36:49 PM3/24/20
to jup...@googlegroups.com
Any suggestion around this? For context, I am trying to hide some code comments but every time I click they reappear. 

Kind regards 
Dario 


On Tuesday, March 24, 2020, Jason Grout <ja...@jasongrout.org> wrote:
My guess is that the thing handling clicks in the notebook is stopping propagation of the click event up to the window?

Jason


On Tue, Mar 24, 2020 at 12:31 PM Dario Panada <dario....@gmail.com> wrote:
Hello,

I am creating a Jupyter extension to register clicks anywhere on the notebook webpage. I am using:

$(window).click(() => console.log("click"));


That works for any click, except the first click on an un-selected code cell. Once that becomes selected, further clicks register normally. 

Any advice as to why?

--
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+unsubscribe@googlegroups.com.

--
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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/CAPDWZHx6nPmxFaq-BaiYd35tWqT6id66Pkkiu5WMCQsw8T8QGg%40mail.gmail.com.

Jason Grout

unread,
Mar 24, 2020, 6:05:51 PM3/24/20
to Project Jupyter
Is this the Jupyter Notebook, JupyterLab, or some other front end with notebooks?

Do you want to just see every click, or do you want to override functionality from Jupyter? If you just want to see the clicks, you can register a click handler in the capture phase of the DOM events. See https://www.w3.org/TR/DOM-Level-3-Events/#event-flow or https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase or https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture for more information. If you want to override Jupyter functionality, then it entirely depends on what you want to do and what frontend you are working in.

Thanks,

Jason


On Tue, Mar 24, 2020 at 1:37 PM Dario Panada <dario....@gmail.com> wrote:
Any suggestion around this? For context, I am trying to hide some code comments but every time I click they reappear. 

Kind regards 
Dario 

On Tuesday, March 24, 2020, Jason Grout <ja...@jasongrout.org> wrote:
My guess is that the thing handling clicks in the notebook is stopping propagation of the click event up to the window?

Jason


On Tue, Mar 24, 2020 at 12:31 PM Dario Panada <dario....@gmail.com> wrote:
Hello,

I am creating a Jupyter extension to register clicks anywhere on the notebook webpage. I am using:

$(window).click(() => console.log("click"));


That works for any click, except the first click on an un-selected code cell. Once that becomes selected, further clicks register normally. 

Any advice as to why?

--
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.

--
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.

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/CAByD6GMuHQcLEVJWyK3Afo_ZZryg9akx%2B0uCfrGqqXD5-sY4jA%40mail.gmail.com.

Dario Panada

unread,
Mar 25, 2020, 6:19:07 AM3/25/20
to jup...@googlegroups.com
Hi Jason,

It is a plain Jupyter notebook.

This is part of an extension (nbextensions). I added the following, which is a click listener on the window with useCapture set to true. The behavior I observe is that all clicks are recorded except the first click on a code cell which selects it. Clicks on a selected code cell are recorded.

window.addEventListener("click", () => console.log("you clicked me!"), true);

More context. I have some lines which are annotated with tags introduced as comments. Eg:

print("hello") #!tag

I want my extension to hide all comments that start with !tag. So to do this I would like to find all items with class cm-comment, check if they start with #!tag and, if so, add a css property display: none. This should work, except my styles are overridden each time a code cell is clicked. To work around, I can use setInterval to delay the execution of my function say, by 0.1s, so whatever code renders the code cells and applies styles runs before mine and I get the desired result. Except, I can't capture click events when selecting a code cell.

Any feedback on my specific problem or the overall problem welcome.
Reply all
Reply to author
Forward
0 new messages